Styling widgets

Support
#1

Hi I am trying to style a widget.
I have used:
.widget ul li a, .widget ol li a {
font-size: 12px;
color: hsl(196, 100%, 37%);
text-transform: uppercase;
text-decoration-style: dotted;
}
to style the text etc., but I am trying to put a background colour into the whole column. When I do so, the edge around the widgets gets filled in, but not the widget itself.
Is there a trick to getting the background colour of the widget the same colour as the column background please?

Thanks

A

#2

Hello Alex,

Thanks for writing in!

The css code above will only style the links specially in the recent post, WP Menu or the Category widget. You will need this code instead:

.widget {
  background-color: #e5e5e5;  
}

.widget ul li a, 
.widget ol li a {
  font-size: 12px;
  color: hsl(196, 100%, 37%);
  text-transform: uppercase;
  text-decoration-style: dotted;
}

We would love to know if this has worked for you. Thank you.

#3

Hi
Thanks for your help

Unfortunately, that didn’t seem to make any difference.
the url is https://staging.modburyteam.org/template if you needed to have a look

Thanks

Alex

#4

Hello Alex,

There are default CSS that comes with the stack that sets a background color to the widget are and to the list items that is why their background color do not blend with the column’s background.

Please update the code previously suggested to:

.cs-content .widget {
    background-color: transparent !important;
}

.cs-content .widget ul li, 
.cs-content .widget ol li {
    background-color: transparent;
    border: 0;
}

Hope this helps.

#5

Hi Jade and very many thanks for your help

I have the code now as follows, which is working Ok (I assume that the code is right).

.cs-content .widget {
background-color: transparent !important;
}

.cs-content .widget ul li,
.cs-content .widget ol li {
font-size: 12px;
background-color: transparent;
border: 0;
text-transform: uppercase;
text-decoration-style: dotted;
}

.cs-content .widget a:link {
color: rgb(41, 112, 74);
}

.cs-content .widget a:visited {
color: rgb(41, 112, 74);
}

.cs-content .widget a:hover {
color: rgba(0, 0, 0, 2);
}

One final issue is that on hover, I would like to change the background color for that item - I did try to add a background color in the a:hover, but of course that only changed the background color of the text. Where would I add the relevant code to get the whole cell to change colour?

Thanks

#6

Hello Alex,

Please try:


.cs-content .widget ul li:hover,
.cs-content .widget ol li:hover {
    background-color: #efefef;
}

Please change the value of the background color above.

Hope this helps.

#7

Brilliant - very many thanks again for your excellent support - first class !!

Alex

#8

You’re always welcome, Alex! :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.