Site logo

Archived topic

Any Ideas to make my pages look better

25 replies · Started by kyle on September 14, 2020

Viewing posts 1–15 of 26

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.

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.

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?

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?

This archived topic is closed to new replies.