Change colour of grey lines (borders)?

[saltire]

Hi,

I have a number of grey lines which I would like to change the colour of, I'm not sure if they are widget borders. I've tried using Firebug but I'm still struggling to identify.

The lines are under the social media icons in the header widget under the title in the home top widget, recent post widget in the sidebar and the three footer widgets categories, archives and RSS feed.

If possible I would like to change the three footer widgets to three different colours.

Any help would be appreciated

http://thinkaboutscotland.com/

[nutsandbolts]

The lines are actually an image, seen here in your CSS:

.comment-respond h3, .entry-comments h3, .widget-title {
background: url(images/lines.png) bottom repeat-x;
font-family: 'Oswald', sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 1;
margin-bottom: 16px;
margin-bottom: 1.6rem;
padding-bottom: 16px;
padding-bottom: 1.6rem;
text-align: center;
text-transform: uppercase;
}

So to change them, you'd need to look at the image (lines.png) in your image folder and create a similar image for each of the footer widgets, then assign them like this:

.footer-widgets-1 .widget-title {
background: url(images/NEW-IMAGE-NAME.png) bottom repeat-x;
}

.footer-widgets-2 .widget-title {
background: url(images/OTHER-NEW-IMAGE-NAME.png) bottom repeat-x;
}

.footer-widgets-3 .widget-title {
background: url(images/THIRD-NEW-IMAGE-NAME.png) bottom repeat-x;
}

Hopefully that helps!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[saltire]

Hi, thanks for getting back to me on this. I've had a look at this and although I'm still fairly new to all this I think I could make the changes.

However I wonder if there is another way. Between the Home Bottom widgets the grey line is controlled by this code
.home-bottom .featured-content .entry {
border-bottom: 5px solid #E5E1DD;

Is it possible to change the the other image lines to this?

Thanks

[nutsandbolts]

Yes, you could use a border-bottom instead, so it would look more like this:

.footer-widgets-1 .widget-title {
border-bottom: 5px solid #E5E1DD;
}

And of course you could change the thickness and/or the color for each one.

Edited to add:

You'd probably have to tell each rule to remove the background, otherwise you might get both the image AND the border. So maybe this instead:

.footer-widgets-1 .widget-title {
border-bottom: 5px solid #E5E1DD;
background: none;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[saltire]

Thanks Andrea, I'm almost there. I have deleted the image lines and replaced with the new code and I have the different coloured lines in place.

The only problem I have is to make the spacing between the three footer widgets even.

This is the code I now have:
.footer-widgets-1 .widget-title {
border-bottom: 5px solid #003366;
margin-right: 36px;
}
.footer-widgets-2 .widget-title {
border-bottom: 5px solid #35aa7f;
margin-right: 36px;
}
.footer-widgets-3 .widget-title {
border-bottom: 5px solid #003366;
margin-right: 36px;
}

.footer-widgets-1,
.footer-widgets-2 {
float: left;
}

.footer-widgets-3 {
float: right;
}

[nutsandbolts]

Okay, try this...

Take out the following:

.footer-widgets-1, 
.footer-widgets-2, 
.footer-widgets-3 {
width: 332px;
}

and replace it with this:

.footer-widgets-1,
.footer-widgets-2 {
	width: 33%;
}

.footer-widgets-3 {
	width: 34%;
}

That seems to fix the spacing for me in Inspector.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[saltire]

That's perfect thanks. Not quite there with the other areas. for the header widget I have tried

.site-header .widget-area {
float:right;
width: site-header 480px;
}

.header-widget.widget-title {
border-bottom: 5px solid #003366;
}

But no line showing

[nutsandbolts]

Try using .site-header .widget-area .widget-title

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[saltire]

Hi,
I've made some of the changes I wanted, not all, but I'm happy with the result. So thanks again Andrea for your help I really appreciate you taking the time.

[Author]

Posts