[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.