Archived topic
Applying blog style from page templates
7 replies · Started by Rolf on November 29, 2018
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
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.
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?
so settings + css would be cool!
i will set up a test site anyway but that will take some time.
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.
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
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;
}