[Support request] Applying blog style from page templates

[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

[David]

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.

[Rolf]

https://gpsites.co/volume/

[David]

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?

[Rolf]

so settings + css would be cool!

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

[David]

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.

[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

[David]

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;
}

[Author]

Posts