Change sidebar background colour and font colour

Hi there

I am using the free version of talon and have set the background colour to black. However the sidebar widgets remain white and I would like them to be black with white text. I have tried various css snippets but nothing works.

In addition I would like to change the mobile menu background colour. Again I have tried many snippets but nothing has worked.

Can you help please?

Many thanks as always

Bibs

Hi,

Can you share your site URL here?

Regards,

Hi Awan

I managed to solve the sidebar colour issue with the following code -

/sidebar widget area background colour/
.widget-area .widget {
background-color: #000;
}
/widget font colour/
.widget-area .widget, .widget-area .widget a {
color: #ffff;
}
/widget title background colour/
.widget-area .widget-title span {
background: #000;
}

However, I am still stuck with how to change the mobile menu background colour. As I say I’ve tried all the code snippets currently on your support forums but nothing has worked for me.

The site is freightblogger.com

Thanks very much

Bibs

Just to update this, we just noticed on IE and Edge that the css wasn’t recognised and also on the blog page there were white spaces around each summary. So we have had to revert back to the default background colour and remove the css. It’s a real shame as it looked good in Chrome.

Hi,

The CSS code above is already supported on all browser, and it should be working in IE and Edge too.

Can you please to put back the code and let me investigate what is not working?

Regards,

Thanks Awan. I am currently unable to gain permission from client to do that so I have created a new site on my local host to test the code on a fresh install. I get the same errors so I have uploaded some screenshots so you can see how it appears in Edge. (In Chrome, with my code, all the site is black background with white font.)

On the test site I changed background colour to black in the customizer (On the live site I also changed the body font to white). The code I am using to change the white boxes that remain is as follows but as stated previously it isn’t working in Edge -

/NEW COLOUR SCHEME/

/title and title box colours/
.hentry {
background-color: #0000;
}
h1, h2, h3, h4, h5, h6 {
color: #ffff;
}

/on post pages the colour of the related posts background and font colour/
.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation {
margin: 0 0 40px;
overflow: hidden;
background-color: #000;
}
.site-main .post-navigation a {
color: #fff;
}

/sidebar widget area background colour/
.widget-area .widget {
background-color: #000;
}
/widget font colour/
.widget-area .widget, .widget-area .widget a {
color: #ffff;
}
/widget title background colour/
.widget-area .widget-title span {
background: #000;

}

To add to this sadly it would appear, since I posted my reply earlier, and despite my best endeavours, my client has changed Themes himself! Despite this I would still like to know if there is a solution.

Thanks so much.

Ah, it’s alright.
Actually, yesterday I was trying to implement your code on the first post above in IE and Edge using browser developer tools and the code is working.

That’s why I am a bit curious and ask you to add the code back in order to check directly to your site.

Usually, when it’s not working, you might need to add an !important rule to the code like this:

.widget-area .widget {
     background-color: #000 !important;
}

Or, you need to put more detail for the selector name like this:

.page-id-123 #secondary .widget-area .widget {
     background-color: #000;
}

Regards,

Hi Awan

Thanks again. I have added both of your rules to my code on two locally hosted sites and it makes no difference at all. I can still see white boxes everywhere and grey text in the sidebar when viewed in Edge. I have cleared my cache but no luck. Is there anything else I could try?

Thanks

Bibs

Hmm… Tha’s weird. Can you upload it to the server and let me test it directly?

Hi again

How do you want me to do that?

Just to reiterate, I am working on a locally hosted test site. I have no plugins added other than Athemes toolbox. No themes other than Talon and default.

CSS code is as follows -

/NEW COLOUR SCHEME/

/title and title box colours/
.hentry {
background-color: #0000 !important;
}
h1, h2, h3, h4, h5, h6 {
color: #ffff !important;
}

/on post pages the colour of the related posts background and font colour/
.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation {
margin: 0 0 40px;
overflow: hidden;
background-color: #000 !important;
}
.site-main .post-navigation a {
color: #fff !important;
}
.page-id-61 #secondary .widget-area .widget {
background-color: #000 !important;
}
/sidebar widget area background colour/
.widget-area .widget {
background-color: #000 !important;
}
/widget font colour/
.widget-area .widget, .widget-area .widget a {
color: #ffff !important;
}
/widget title background colour/
.widget-area .widget-title span {
background: #000 !important;

}

I have also tried for the blog page -

.page-id-158 #secondary .widget-area .widget {
background-color: #000;
}

Still all white boxes on Edge but all looks black on Chrome.

Thanks again

Bibs

Hmm okay, let’s try these new code:

.widget-area .widget, .blog .content-area article {
    background: black;
    color: white;
}
.widget-area .widget a, .blog .content-area article a, .blog .content-area article .entry-title a, .blog .content-area article .entry-date {
    color: white;
}
.widget-area .widget-title span{
	background: transparent;
	color: white;
}

Hope now it’s working.

Regards,

Hi, YES!! That is working on the blog page and sidebars in Edge but now the white boxes are showing in the content area on pages and post, in both chrome and Edge. Also on the related posts section at the bottom of each post and the comments area.

I have worked with a different theme and in the customizer you can change the “content background colour” and there are no white areas. I am wondering if Talon Pro would do the same without any code?

Thanks again

Bibs

Hmm… that’s weird. My code should be working correctly.
Here is the screenshot from my localhost using the code:

Is it possible for you to upload your site to a server and let me help you resolved the issue?

Regards,