Archived topic
Any Ideas to make my pages look better
25 replies · Started by kyle on September 14, 2020
Hey team, I'd like to ask some personal opinions on how i could make my page designs look better. Right now the color scheme is a little bit off in my opinion, perhaps you can offer some useful tips/advice on how i can change it?
Hi there,
It's a bit tough for us to answer design questions here as it's more about personal preference.
The single post looks pretty good to me. Maybe a smaller font for the content and menu?
Did you import a site from the library? If so I always find it helpful to compare with the original site.
Hey Leo,
I agree with the single posts.
The pages and blogs however seem a little bit off to me.
For example this page: https://bushcraftboss.com/how-to-survive-underground/ The grey header meshes with the featured image.
Or this page: https://bushcraftboss.com/contact/ why does the title still show even though I am hiding it?
Lastly the blog page https://bushcraftboss.com/blog/ has a weird grey box on the page?
Leo could you give me CSS to make pages look the same as single posts? All I'll do is change the width and make pages a little bit wider than single posts.
For example this page: https://bushcraftboss.com/how-to-survive-underground/ The grey header meshes with the featured image.
Check to display padding around featured images in the customizer:
https://docs.generatepress.com/article/adjusting-the-featured-images/
Or this page: https://bushcraftboss.com/contact/ why does the title still show even though I am hiding it?
That title is coming from a page hero. You would need to add that page in the exclusion rule:
https://docs.generatepress.com/article/header-element-overview/
Lastly the blog page https://bushcraftboss.com/blog/ has a weird grey box on the page?
I'm not seeing this:
https://www.screencast.com/t/M1IsAMagIBx
Am I missing something?
Leo could you give me CSS to make pages look the same as single posts? All I’ll do is change the width and make pages a little bit wider than single posts.
Hi there,
you cans set different widths of the content but theres a couple if things to do.
1. Go to Customizer > Additional CSS and remove this which was probably added by a Site Library Import:
.single .container.grid-container {
max-width: 775px;
}
2. In Customizer > Layout > Container - set the Content Width to the Maximum size your require it. eg. for your Page.
3. Go to Appearance > Elements - and Look for a Layout Element - edit this where you can set the Content Width - it looks like this is already set to Display on the Entire Site. You can change the display rules to just Single Posts.
3.1 Create more Layout Elements if you want to set other Pages to a different width.
Hi David, currently I am using this CSS to make my posts look like they do.
.single-post .site-content {
border: 1px solid rgba(232,234,237,1);
box-shadow: 0 0 10px rgba(232,234,237,.5);
}
I would like CSS that can make my pages look the same, I would just like to have my normal pages slightly wider than the posts.
Does this make sense?
You can use this CSS instead:
body:not(.home) .site-content {
border: 1px solid rgba(232,234,237,1);
box-shadow: 0 0 10px rgba(232,234,237,.5);
}
This will apply to all pages except the Home and all single posts.
Hey David thanks i used CSS but the content is right on top the border now, please see example here: https://bushcraftboss.com/how-to-survive-underground/
How can i get some space between the the border and content?
The full width page builder container is activated for that page which is why there is no padding:
https://docs.generatepress.com/article/page-builder-container/
It's either activated by the metabox option linked above or a layout element:
https://docs.generatepress.com/article/layout-element-overview/
Try disabling that so the padding in the customizer applies.
Let me know if this helps :)
Hi Leo, ok I have done that and it seems to have worked.
However, i would like to remove that white space on the pages so that it looks the same as my posts, how can I do this?
So basically you want posts and pages both to have narrow width?
If so can you set that width (800px) in the customizer?
https://docs.generatepress.com/article/container-width/
No, in my posts you'll notice that it is just the content with shadow box, then grey background. But with pages it's content shadow box then white space then grey background.
I want my pages to look like posts in terms of no extra white space surrounding the content box.
So are there any pages that you don't want this style?