[Support request] Applying blog style from page templates

Home Forums Support [Support request] Applying blog style from page templates

Home Forums Support Applying blog style from page templates

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #743593
    Rolf

    Hi, my setting is:
    – generatepress pro
    – elmentor pro

    right now I am using elementor to render the blog overview page, but i would prefer rending the blog overview page via GP.

    As my site is live – how can I play around with different styles from the template gallery other then importing?

    this is my current gp based blog overview page: https://freshvanroot.com/blog-gp/

    I would like to apply the style from this template: https://generatepress.com/site-library/

    How would that work?

    thanks!
    -rolf

    #743639
    David
    Staff
    Customer Support

    Hi there

    whats the name of the Site Library template you would like to match? Sorry the URL provided just links to the Site Library πŸ™‚ Let me know.

    #743660
    Rolf
    #743679
    David
    Staff
    Customer Support

    Awesome choice πŸ™‚
    So its not advisable to import a Site on a pre-built site as somethings may conflict. If you have a staging server or can create a clone site on a sub domain then you could test.

    Is it just the blog page layout you want? I can provide the settings I used and the custom CSS for it?

    #743690
    Rolf

    so settings + css would be cool!

    i will set up a test site anyway but that will take some time.

    #743705
    David
    Staff
    Customer Support

    Cool:

    So this CSS is what forces the images to the landscape view and adjusts the margins and meta sizes:

    .blog .post-image, .archive .post-image, .search .post-image {
        margin: 0.5em 0 1em 0 !important;
    	float: none !important;
    }
    
    .blog .post-image img, .archive .post-image img, .search .post-image img {
        width: 100%;
        height: 250px;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .entry-summary, .entry-meta {
        font-size: 0.75em;
        margin-top: 1em;
    }
    

    This CSS adds the background and color to the Category tags:

    .entry-meta .cat-links a {
        background-color: #ff3366;
        color: #fff !important;
        padding: 6px 12px;
        border-radius: 3px;
        font-size: 0.7em;
        text-transform: uppercase;
    }

    The blog pagination are also styled ( may not see it on the demo site ) with this:

    .nav-links .page-numbers {
        display: inline-block;
        min-width: 30px;
        line-height: 39px;
        text-align: center;
        border-radius: 2px;
    }
    
    .nav-links .next.page-numbers, .nav-links .prev.page-numbers {
        width: auto;
        padding: 0 20px;
    }
    
    .nav-links .page-numbers {
        background-color: #0b0521;
        color: #fff;
    }
    
    .nav-links .page-numbers:hover {
        background-color: #383f49;
        color: #fff;
    }

    The rest of the styling is done via the Customizer, for which your current layout works fine. The font for the H2 is Muli.

    #743892
    Rolf

    Thanks!
    And another question πŸ™‚

    I have added this CSS to change the content width on single posts.
    How can I do the same for the blog homepage?
    The general sites content width should stay untouched.

    body.single .site.grid-container {
    max-width: 800px;
    }

    thanks
    -ro

    #743913
    David
    Staff
    Customer Support

    This CSS will apply to single post, blog, archive and search:

    body.single .site.grid-container, .blog .site.grid-container, .archive .site.grid-container, .search .site.grid-container {
        max-width: 800px;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.