Background color and posts

  • Author
    Posts
  • #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 batsandstats.com.

    #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

    #144290

    metbaseball
    Member

    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.

    #144294

    metbaseball
    Member

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

    #144295

    metbaseball
    Member

    That is, images in posts.

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

    metbaseball
    Member

    I do not see any border around the blog posts.

    #144307

    metbaseball
    Member

    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.

    #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.

    #144327

    metbaseball
    Member

    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

    #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.