Community Forums › Forums › Archived Forums › Design Tips and Tricks › Change colour of grey lines (borders)?
- This topic has 8 replies, 2 voices, and was last updated 9 years, 11 months ago by saltire.
-
AuthorPosts
-
May 18, 2014 at 8:09 am #105725saltireMember
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/May 18, 2014 at 8:37 am #105733nutsandboltsMemberThe 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+May 18, 2014 at 9:12 am #105738saltireMemberHi, 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
May 18, 2014 at 9:27 am #105744nutsandboltsMemberYes, 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+May 18, 2014 at 9:59 am #105748saltireMemberThanks 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;
}May 18, 2014 at 10:10 am #105750nutsandboltsMemberOkay, 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+May 18, 2014 at 10:47 am #105753saltireMemberThat'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
May 18, 2014 at 10:59 am #105763nutsandboltsMemberTry 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+May 18, 2014 at 1:51 pm #105777saltireMemberHi,
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. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.