Archived topic

CSS code for sitebar widget

6 replies · Started by Robin on November 12, 2021

Viewing posts 1–7 of 7

November 12, 2021 at 10:55 am #2001919

Hi!

Is it possible, with CSS code, to give a bit of color to the top line of the widgets in my right side bar?

This is my website -> https://www.hardloopbaas.nl/

I am looking to create something like on this website -> https://www.hardloopzone.nl/loopband-voor-thuis/

In the widgets on the right side bar you can see a small light blue line on the top of the widget box.

Hopefully this is possible and someone can help.

Thanks in advance!

Kind regards,

Robin

November 12, 2021 at 11:53 am #2001970

Hi Robin,

Try this CSS:

.sidebar .widget {
    border-top: 6px solid #09c;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

November 12, 2021 at 12:33 pm #2002020

Hi Leo,

Thanks for your reply!
Unfortunately it doesn't work :(.

I added it via customize > extra CSS. Should be the right way?

November 12, 2021 at 1:02 pm #2002036

Hi Leo,

It worked! Thanks :)
For some reason I had to place it further up in the 'Extra CSS' column.
I would like to give the line the same color as the blue in my logo.
The blue in my logo is color #0366d6. Do you know what color that is for CSS code?

Thanks :)

November 12, 2021 at 1:07 pm #2002042

For some reason I had to place it further up in the ‘Extra CSS’ column.

That means you have some syntax error in your previous CSS which stops the code below from working.

I would like to give the line the same color as the blue in my logo.
The blue in my logo is color #0366d6. Do you know what color that is for CSS code?

You just have to replace #09c in my code.

November 12, 2021 at 1:26 pm #2002058

Ah, it is that easy! I thought colors always had 6 numbers after the #.
I was confused.

Thanks a lot! It worked :)

November 12, 2021 at 2:42 pm #2002107

No problem :)

This archived topic is closed to new replies.

Start building better websites today.