Background color in top widget areas

[canoot65]

I have set the background color for top widget areas like the overall background, but there is “another” background which I’m not able to change. You can see it here: http://www.nordoy.net/oyablikk2-fotoalbum/wppaspec/oc1/lnnb/cv0/ab1/pt13

What I want, is to have the color of the “box” like the other background, so that only the text is visible.

[Gillian]

Do you want to change the dark grey background or the light grey background?

Also, a link to your site is always preferable to a picture so we can help you more easily.

[canoot65]

Something “terrible” has happened to my website, a lot of settings have been changed, and I don’t know how or why.

I have to try to fix the mess and come back later.

Thank you for responding anyway.

[canoot65]

Hello again, luckily I managed to restore my site.

I want to change the background color of the text bar above the picture (I want the use the same dark color as the overall background so that only the text will be visible). http://www.nordoy.net/oyablikk2-fotoalbum/?occur=1&lang=nb&cover=0&album=1&photo=10

Also, is there a way to shrink the distance (padding?) between the picture and text bar, and the text bar and the top (edge)?

[scrambler]

If you inspect the page with your browser developer tools, you will see the widget had the ID text-13

SO you can style its background and text color by adding the rule below in Main Options > FOnts & Custom > Custom CSS Rule b0x

#text-13 {brackground-color:grey;color:white;}

The space above the bar comes for the 20px top margin set on widgets in Main options > Sidebar & Layout > Individual widgets > Margin boxes

if you only want to change it for that widget, add the rule in the one mentioned above

#text-13 {brackground-color:grey;color:white;margin-top:10px;}

The space below is in the container that seems to be generated by a plugin and has a very complicated content, so you may want to check what options are available there.

[canoot65]

Thank you so much, that’s exactly what I wanted!

One more thing, the text in the middle (above the picture) and to the right are links, but there are no “signs” that they are links – no hover color, for example (even if hover color is set under Individual Widgets). Is there something I can do about it?

I really appreciate your help!

[scrambler]

First the space above the image comes from a 38px inline style margin on the image itself

For the link color, this is because you added the color as inline style to your link, which takes precedence over the hover color.

Instead of using inline style color on your link, use the rule below like for the widget  background color

#text-13 a {color:#999999;}

[canoot65]

Thanks a lot! – everything is ok now – “except” – there is still no hover color on the links. Is there another CSS rule to fix it?

[scrambler]

My bad, the rule we are adding to change the color of the widget text also overrides the default, so you do need to add a rule for the hover too

#text-13 a:hover {color:#ff6363;}

[canoot65]

Perfect! Thank you very much!

[Author]

Posts