[Resolved] CSS code for sitebar widget

[Robin]

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

[Leo]

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 🙂

[Robin]

Hi Leo,

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

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

[Robin]

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 🙂

[Leo]

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.

[Robin]

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

Thanks a lot! It worked 🙂

[Leo]

No problem 🙂

[Author]

Posts