Sidebar header background colour css – Vigilance theme

sallyprosser · Member · Oct 20, 2013 at 11:44 am
Copy link

Add topic to favorites
Help appreciated for a css newbie. Have tried several options for other themes, and tried to identify correctly with firebug. I’d like to create a panel of background colour for my header titles in my side bar. Thanks in advance

The blog I need help with is: (visible only to logged in users)
justpi · Member · Oct 20, 2013 at 1:17 pm
Copy link
Try this and see if it’s close to what you’re looking for:
```
h2.widgettitle {
    background-color: #BDC4D6;
    border-bottom: 0 none;
    margin-top: 30px;
    padding: 3px 8px;
}
```
(BDC4D6 is the color of your header image.)
sallyprosser · Member · Oct 20, 2013 at 4:38 pm
Copy link
So, so kind – it worked perfectly …and yes that was the colour I was looking for. Thank you so much. Which tool did you use find out the colour of my header btw?
justpi · Member · Oct 20, 2013 at 5:52 pm
Copy link
You’re welcome!
I used Photoshop.
sallyprosser · Member · Oct 21, 2013 at 3:34 am
Copy link
I have Photoshop – must investigate further. Thanks again.
sallyprosser · Member · Oct 21, 2013 at 4:17 am
Copy link
One final question justpi – trying to increase the space between the first image in the sidebar and the navigation bar (so that the top of the first image in the sidebar is in line with the post title. Have tried a few things from the forums but nothing works.
justpi · Member · Oct 21, 2013 at 10:28 am
Copy link
(I take a screenshot, click on it using the eyedropper tool so that the color I want is adopted as my foreground color, then click on the foreground tool to see what hex it is.)

To increase the space above the topmost image you can add a top padding to the sidebar:
```
#sidebar {
padding-top: 12px;
}
```
or a top margin to that image widget:
```
#image-19 {
margin-top: 12px;
}
```
Play with the number till you get the result that looks best to you.
thesacredpath · Member · Oct 21, 2013 at 6:34 pm
Copy link
There is a Firefox add-on that has a color eye-dropper called Rainbow Color Tools you may wish to check out. You can use the “Inspector” to hover over elements, and when you click, it copies the color code for that element to your clipboard. I find it very useful and it also has a color picker, a library, and also a Website Analyzer which will pull all the colors used in a site out and display them.
justpi · Member · Oct 21, 2013 at 6:59 pm
Copy link
Ooo, lovely – thanks Rich!
thesacredpath · Member · Oct 21, 2013 at 7:08 pm
Copy link
@panos, you are most welcome. I started using it a little while ago. Wish they made one for Safari.
sallyprosser · Member · Oct 22, 2013 at 4:38 am
Copy link
Thanks @panos and thesacredpath. This worked perfectly.
I also found a useful Firefox add-on for identifying fonts easily – Whatfont. Works like a dream (in the same way as the colour tool add-on).
Really appreciated all your help with this – my site has a much cleaner look and I’m really happy.
thesacredpath · Member · Oct 22, 2013 at 4:21 pm
Copy link
You are welcome.

No items found.