[Anja LParticipant]

Hi,

I managed to change the background of the portfolio and blog page to white (default is blue background for other pages) and text to grey (#5c5c5b). But unfortunately I can not manage it for:
– single blog posts
– single portfolio item pages
– for tag archive
– category archive page.

And header widget icon (the “+”) should not change color to grey.

Could you please help me out with that? This is the code I use right now:

.entry-header a:hover, .x-sidebar.right a:hover{
color: #e14e61 !important;
}

.pagination span.current {
background-color: #28b5e5;
}

.single-post, .single-post .site {
background-color: #28b5e5 !important;
}

.page-template-template-layout-portfolio-php .site, .page-template-template-layout-portfolio-php .x-colophon, .blog .site, .blog .x-colophon, .archive.category .x-header-landmark, .archive.category .p-landmark-sub, .archive.category .entry-content {
  background-color: #fff!important;
color:#5c5c5b;
  }

  .page-template-template-layout-portfolio-php .site a, .page-template-template-layout-portfolio-php .x-colophon a, .blog .site a, .blog .x-colophon a {
  color:#5c5c5b;
   text-decoration: none !important;
  }

  .page-template-template-layout-portfolio-php .x-colophon.bottom, .blog .x-colophon.bottom {
   border-top: 0px !important;
  background-color: #28b5e5!important;
  text-decoration: underline !important;
  }

  .page-template-template-layout-portfolio-php h1.h-landmark entry-title, .blog h1.h-landmark entry-title, h1.h-landmark {
    color:#5c5c5b !important;
 
  }

.entry-content.excerpt p, .entry-date, .p-meta>span, .p-meta>span>a, .entry-title {
    color:#5c5c5b !important;
  }

Thanks really a lot! 🙂

[Anja LParticipant]

This reply has been marked as private.

[Paula SMember]

Hi Anja,

Thanks for writing in! Here are the answers to your queries:

for the Widget bar at the top, use this CSS code:

.x-btn-widgetbar i {
color: gray;
}

for the single blog post, you can use this code as well:

.single-post, .single-post .site {
background-color: #fff !important;
}

As for the other pages, you will need to assign a custom body class per page – as you have mentioned that you would like to change the background colours of some of the pages, correct? You can add a “body class” from the editor page when you open to edit your pages, then from there you can assign the body class, like so (here is an example)

page: whiteportfolio for portfolio page items

on CSS will appear as :

.whiteportfolio {
background-color: #fff; !important;
}

and so on. Also, it’s up to you what labels you’re going to use, just make sure it’s unique!

Hope that helps. Feel free to post more if you need further assistance!

[Anja LParticipant]

This reply has been marked as private.

[CousettMember]

1. Single site – When viewing the site I see the dark gray you have chosen for the text. An easy way to see the change is to change the color to something very visible such as red and see if it changes. When I tried this it changed. The solution here might be to choose a different shade of gray that is more visible.

2. There is another style that is conflicting add the blue background. You can add the additional class to your custom CSS and this should fix your issue.

body.postid-2472 .site {
background: #fff;
}

3. This has a similar solution to the above issue but with slightly different CSS:

body.archive.tax-portfolio-tag .site {
background: white;
}

and

body.archive.category .site {
background: white;
}

[ZeshanMember]

Hi Anja,

Thank you for writing in!

#1. It seems that the normal text color on single site is working just fine (see: http://prntscr.com/49u2ly). And after changing the color to red: http://prntscr.com/49u37w. Can you please confirm the issue again? You can try clearing your browser’s cache or testing on a different browser.

#2. It seems that the color has been applied to the inner element. Please try using the following CSS code instead:

.whiteportfolio .site {
   color: #fff !important;
}

#3. Simply use the following CSS code:

.archive .site {
   background-color: #fff !important;
}

Hope this helps. 🙂

Thank you.

[Anja LParticipant]

Great, worked all perfect, thanks! 🙂

Only issue is still with single blogpost. Still continuos text its not displayed in grey. As I wrote, I use this code:

.single-post, .single-post .site {
background-color: #fff !important;
  color:#5c5c5b !important;
}

#5c5c5b is a dark grey, the same you can see on sidebar, it cant be an issue of this color as on other pages in same size its displayed perfectly! It must be the wrong code – you have any idea how to solve this?

EDIT: Oh, just saw your second reply! Unfortunately for me in different browsers and after deleting cache the normal paragraph text is still white (exactly same page you made screenshots of), also when i inspect it it says:

p {
color: #fff;
}

Thanks much, really appreciate great support!

[Paula SMember]

Hi Anja,

Thanks for the information. Kindly try pasting this code onto the Customizer > Custom CSS:

.single-post .entry-content {
margin-top: 25px;
color: #5c5c5b;
}

Hope that helps!

[Anja LParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Anja,

Thank you for writing in!

Please try using the following CSS code instead:

.single-post .entry-content, .single-post .entry-content p, .single-post .entry-content h1, .single-post .entry-content h2, .single-post .entry-content h3, .single-post .entry-content h4, .single-post .entry-content h5, .single-post .entry-content h6, .single-post .entry-content .h1, .single-post .entry-content .h2, .single-post .entry-content .h3, .single-post .entry-content .h4, .single-post .entry-content .h5, .single-post .entry-content .h6 {
   color: #5c5c5b;
}

Hope this helps. 🙂

Thank you.

[LeannaParticipant]

Hi, hope this is close enough to the topic to post here… I am using Ethos and wondered if u can give me a simple way to set the background image for blog index page and all posts? Thanks…

[Rue NelModerator]

Hi @Leana,

You can set a custom background image for your blog index and all post by having some css code, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

/* set a background image to the blog index */
.blog .site {
  background-image: url('http://placehold.it/100x100');
}

/* set a background image to all single posts */
.single-post .site {
  background-image: url('http://placehold.it/100x100');
}

Hope this helps. Please let us know then.

[LeannaParticipant]

Thanks that worked!

[LeannaParticipant]

While we’re at it, another blog format quickie… due to a dark bg I want all my headers to come in a lighter color than black. How can I change header color across all blog posts?
thanks…

[ChristianModerator]

Hey Leanna,

Please add the code below in your Appearance > Customize > Custom > CSS.

h1.entry-title, h2.entry-title a, .p-meta > span > a {
    color: white !important;
}

Hope that helps. 🙂

[Author]

Posts