Background color and posts

Author

Posts
May 30, 2019 at 11:12 pm #144266

metbaseball
Member

I would like to add some visual contrast to my site.

How can I add a light-grey background color outside of my posts that separates the posts from the sidebars?

The blog I need help with is: (visible only to logged in users)

May 31, 2019 at 8:53 pm #144289

binarymoon
Theme Author

Hi there – thanks for the message.

I’m not entirely clear what you want to do though. Do you want the page to have a light grey background, with the blog posts on a white background, or do you want a light grey border around the blog posts? Or something else?

I can probably give you some custom css for both these options, I just need to know which you are hoping to achieve.

Thanks – Ben

May 31, 2019 at 9:25 pm #144290

metbaseball
Member

Original poster

After giving thought to what you wrote in your reply, a light grey border around the blog posts like what appears around the posts in this forum might do the trick.

May 31, 2019 at 11:43 pm #144294

metbaseball
Member

Original poster

Related to my previous post, how can I put the same light-grey border around images?

May 31, 2019 at 11:43 pm #144295

metbaseball
Member

Original poster

That is, images in posts.

June 1, 2019 at 10:48 am #144303
binarymoon
Theme Author
No problem:

Light grey borders around blog posts:
```
.main article.post-archive {
    border: 1px solid #e6e6e6;
    padding: 20px;
}
```
This uses the same grey that’s used in the underlines on widget titles. You can select your own colour here:
https://prothemedesign.com/tools/color-picker/

You can also tweak the padding size and border size to taste.

To add a border around images you can use:
```
.wp-block-image {
    padding: 10px;
    border: 1px solid #e6e6e6;
}
```
June 1, 2019 at 12:34 pm #144306

metbaseball
Member

Original poster

I do not see any border around the blog posts.

June 1, 2019 at 1:21 pm #144307

metbaseball
Member

Original poster

My mistake. I just realized that the border is around the post “excerpts” on my blog’s homepage. I like that.

What I originally was thinking of was for a separator on an actual post page, either by putting a border about the post or maybe by adding a light background color to the left sidebar.

June 2, 2019 at 7:09 am #144323
binarymoon
Theme Author
Ah – sorry about that. I still misunderstood :)

You can use the following to add a border around the content on the single posts:
```
.single .main-content article {
    border: 1px solid #e6e6e6;
    padding: 20px;
}
```
Hopefully this does the trick.
June 2, 2019 at 3:13 pm #144327

metbaseball
Member

Original poster

That’s very helpful. Thanks.

If I wanted to put a light-grey background in the left sidebar (small left widget), how would I do that?

Howard

June 2, 2019 at 4:32 pm #144328
binarymoon
Theme Author
You can add a grey background to the left sidebar with:
```
.sidebar-small {
    background-color: #e6e6e6;
    padding-top: 10px;
}
```
Personally I would remove the black border from the top of the widgets since I think that looks better:
```
.sidebar-small .widget h3.widgettitle {
    border: none;
}
```

The topic ‘Background color and posts’ is closed to new replies.

No items found.