different background color for main page and blog post page

  • Unknown's avatar
    celinejennison · Member ·

    Hello ! How do I make my main page and my blog post pages have different background colors ?

    many thanks !

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

  • Unknown's avatar
    v444cygni · Member ·

    Hi celinejennison,

    Please, try this CSS:

    body.home {
    background-color: #fadbdd; /* Main page background color */
}

body.single-post {
    background-color: navajowhite;  /* "Post" pages background color */
}

    Also, if you would like to style other pages differently, you could try the same code but changing the CSS selector (“body.category” instead of “body.single-post” to style category pages).

    You can take a look at the HTML in the source code of your page and look for the <body> tag and the classes that it is using for any kind of page (home, category, blog post, and so on). Example:

    <body class="archive category category-uncategorized category-1 logged-in admin-bar no-customize-support custom-background mp6 customizer-styles-applied single-author chrome highlander-enabled highlander-light custom-colors">

    You can ask here for any other changes if you don’t feel confortable with that though!

    Hope it helps!

  • Unknown's avatar
    celinejennison · Member ·

    thanks very much !
    I do have another question:
    on the main page, how do you make the section where it says search, recent posts.. etc underneath the black section where I have the instagram feed?

    Also, on the blog post pages, how do I make the margin on the right smaller, and push it to the right so that it takes up less space?

    cheers,
    Céline

  • Unknown's avatar
    v444cygni · Member ·

    Have you tried moving the Instagram widget up top so all other widgets are beneath the pictures?

    As for the right margin on blog post pages… I see the content in there perfectly centered (with equal margins on the left and right side of the page), do you still want to move the content closer to the right side of the screen? Could you post a screenshot of what you are seeing? (You can upload it here https://cloudup.com/ and post a link to it)

    Cheers!

  • Unknown's avatar
    celinejennison · Member ·

    ok, I managed to do the first part.

    I’ve decided I want to take that primary sidebar out all together. I was able to remove 1 component of it, but I can’t seem to make the whole thing disappear so that there is more room for my blog post text and pictures

    cheers!

  • Unknown's avatar
    v444cygni · Member ·

    Hi Céline,

    Plese try the following CSS and see if you get what you are looking for.
    It should hide the sidebar and make the post content full width in post pages.

    body.single-post .container #sidebar {
    display: none;
}

#posts.single-page-post .post-content {
    width:100%;
}

#posts.single-page-post {
    background-image: none;
    width: 100%;
}

#posts.single-page-post .post-wrap {
    width: 100%;
}
  • The topic ‘different background color for main page and blog post page’ is closed to new replies.