-
Posts
-
Hi,
I would like to change my social media header so that the social media hover colours (coded into the CSS for each icon) become the actual colours for the background of each icon and the icons are white.
Website: http://etool.net.au/
I’m using firebug, but can only see how to change the colour of the entire header. Is is possible to change just these backgrounds individually?
Also I would like to create boxes of colour in my footer for each footer widget. I’ve changed the background to one solid colour, but would like to have a background colour and then 3 different colours for the footer widgets. Is this possible to do?
Thanks, Siobhan
Hi,
You can change the icon color of the social icons with this
#top .social_bookmarks_rss a{color:#ffa133;}
#top .social_bookmarks_facebook a{color:#37589b;}
#top .social_bookmarks_twitter a{color:#46d4fe;}You can find the background color for each social icons on css > layout.css, find this code
#top .social_bookmarks_rss:hover a{color:#fff; background-color:#ffa133; }
#top .social_bookmarks_facebook:hover a{color:#fff; background-color:#37589b; }
#top .social_bookmarks_twitter:hover a{color:#fff; background-color:#46d4fe; }
#top .social_bookmarks_mail:hover a{color:#fff; background-color:#9fae37; }
#top .social_bookmarks_dribbble:hover a{color:#fff; background-color:#e44885; }
#top .social_bookmarks_linkedin:hover a{color:#fff; background-color:#419cca; }
#top .social_bookmarks_search:hover a{color:#fff; background-color:#222222; }
#top .social_bookmarks_gplus:hover a{color:#fff; background-color:#de5a49; }
#top .social_bookmarks_behance:hover a{color:#fff; background-color:#008cfa; }
#top .social_bookmarks_flickr:hover a{color:#fff; background-color:#ff0086; }
#top .social_bookmarks_forrst:hover a{color:#fff; background-color:#234317; }
#top .social_bookmarks_myspace:hover a{color:#fff; background-color:#000000; }
#top .social_bookmarks_tumblr:hover a{color:#fff; background-color:#345574; }
#top .social_bookmarks_vimeo:hover a{color:#fff; background-color:#31baff; }
#top .social_bookmarks_youtube:hover a{color:#fff; background-color:#a72b1d; }
#top .social_bookmarks_pinterest:hover a{color:#fff; background-color:#cb2027; }
#top .social_bookmarks_skype:hover a{color:#fff; background-color:#12a5f4; }
#top .social_bookmarks_instagram:hover a{color:#fff; background-color:#a67658; }For the footer widget background, you can use this. Assuming you have 3 column footer.
#footer .flex_column.av_one_third {
background: red;
}
#footer .flex_column.av_one_third:nth-child(2) {
background: blue;
}
#footer .flex_column.av_one_third:nth-child(3) {
background: green;
}You can use av_one_fourth for 4 columns and av_one_fifth for 5 columns.
Regards,
Ismael
Hi Ismael,
Thanks a lot for your response.
I don’t think I explained myself very well, sorry! I already have this CSS for the social media icons in the header –
}
#top .social_bookmarks_facebook:hover a{color:#fff; background-color:#006666; }
#top .social_bookmarks_twitter:hover a{color:#fff; background-color:#669966; }
#top .social_bookmarks_linkedin:hover a{color:#fff; background-color:#99cc33; }
#top .social_bookmarks_gplus:hover a{color:#fff; background-color:#eadd12; }
#top .social_bookmarks_vimeo:hover a{color:#fff; background-color:#cccc00; }
}
What I would like to do is have the icons stay white and backgrounds the above colours at all times, not just when you hover over them. But I would like to keep the rest of the header bar the current grey. Can I just take the hover word out of the coding?
Thanks for the footer code, I’ve added it in as you can see here http://etool.net.au/
I would like the three boxes to join up so that there aren’t any grey spaces in between them, just grey on either side. I played around with the padding, but it just made the footer longer and didn’t bring them together. Could you advise how to achieve this please?
Also if I wanted to use an image for the background instead of a colour for one of the boxes, what CSS would I add?
Thanks, Siobhan
Hi Siobhan,
Unfortunately joining the footer widget sections isn’t easily doable. Since its using the grid and grid margins for the layout there you would need to modify those values and then do the same for all responsive changes as well (which gets a bit recursive and tends to add a lot of bug fixes).
For the social icons, you can just remove the :hover from each yes. Make sure to remove that second bracket under that css block as its extra and isn’t required but may cause issues.
Regards,
Devin
Hi Devin,
Thanks for the advice.
I’ve taken the hover out and it looks just how I want.
For the footer, could I add a border around the widget boxes instead of a full colour and then it wouldn’t look as odd/blocky?
Current coding for this section is as folows –
#footer .flex_column.av_one_third:nth-child(2) {
background: #99cc33;
padding: 10px 10px 10px 10px;
}
#footer .flex_column.av_one_third:nth-child(3) {
background: #eadd12;
padding: 10px 10px 10px 10px;
}
Thanks, Siobhan
Hi Devin,
I’ve also just changed the footer from 3 to 4 columns, added a new text widget and it is showing underneath the first footer widget.
I took all the widgets out, changed it back to 3 columns, refreshed, changed it to 4 columns, refreshed and put all the widgets back in and it’s still the same. I tried taking out the 4th column widget and dummy text (archive) was showing in it’s place but still underneath the 1st widget. Any ideas what the issue might be?
Any help would be much appreciated!
Thanks, Siobhan
You could do something like:
#footer .container .flex_column.av_one_fourth {
border: 1px solid red;
}But they use margins for spacing so the border doesn’t have any true space around the content.
For the 3 columns vs 4 columns, the only thing I can think is that there is or was something interfering with the grid for one third but when I did a quick edit of your page with dev tools turning the footer columns into one_third columns I didn’t see any issues or conflicting css.
- The topic ‘Individual Header & Footer Colour Boxes’ is closed to new replies.