-
Posts
-
Hi,
Just creating a site using Enfold – love it.
Just a quick couple of questions that I haven’t been able to find complete answers for on your forum.
1. I have changed the color of the top bar to black and shifted the social icons to the right. What I would like to do is change the ‘normal’ color of the icons – i.e. what they look like when you go to the page and don’t put your mouse to them – to the individual colors that show now in hover state eg twitter blue, facebook blue, email green etc so that there is a pop of colors in that right hand corner. I’d then like to change the hover state to either a slightly brighter or maybe lighter version.
2. How do I change the css so that the icon list icons are the same colour as the icon box icons instead of the dull grey color they are by default?
3. Also, can I change the color of the individual icon list icons so that they match the color of the social icon ones. EG make Twitter twitter blue, facebook facebook blue etc?
Hi,
1.) To change the social icons color:
#top .social_bookmarks li a {
color: white;
}2.) Icon list color, you can use this
.avia-icon-list .iconlist_icon {
background-color: red;
}3.) Can you give us a screenshot of what you want to do?
Regards,
Ismael
Hi Ismael,
Thanks for your response. A couple of issues remain unresolved.
1) Change the social icons colour. That code worked. But I think I misphrased my question. What I wanted to know was how to change the background colour of the social icons. By changing the colour of the top header I realised that the background of the social icons must be transparent. How do I change the background to a particular colour? What I would like to do is set the background to be the colour that is currently displayed in hover mode. I found this code amongst the forum posts:
.social_bookmarks .rss:hover {
background-color: #FFA133;
}
.social_bookmarks .facebook:hover {
background-color: #37589B;
}
.social_bookmarks .twitter:hover {
background-color: #46D4FE;
}
.social_bookmarks .mail:hover {
background-color: #9FAE37;
}
.social_bookmarks .dribbble:hover {
background-color: #E44885;
}
.social_bookmarks .linkedin:hover {
background-color: #419CCA;
}
.social_bookmarks .search:hover {
background-color: #222222;
}
.social_bookmarks .gplus:hover {
background-color: #DE5A49;
}
#top .social_bookmarks li:hover a {
background: url(“../images/layout/icon-social-reflect.png”) no-repeat scroll 0 top transparent;
}
So I have all the colour numbers I need. Just need to know what I need to do make the current hover colours the ‘normal’ background colour.
2. Changing the icon colour in icon lists.
I had already found and tried the code you suggested elsewhere on the support forum and it doesn’t work. The icons in the icon list remain grey after I put the code in Quick CSS. Again I may have misphrased it. What I want to change the colour of is the circle surrounding the icon in an icon list, which I guess, again, is regarded as a background colour. So where the icons are surround by a grey background by default, I’d like them to match the colour of the icon background used in the icon box with my chosen theme style (ie Boxed Blue)
3. This is a kind of variation of the second question in that I’d like to change the individual background colour of the social icons used in an icon list, so that twitter is twitter blue, Facebook facebook blue, flickr pink, instagram brown, email green etc etc. At the moment they are all #d0d0d0 I’ve added it as an image at the bottom of this page (www.mytribetravels.com) so you can see what I’m trying to do.
5. While you’re there, I seem to be getting a strange single pixel white line underneath the main image at the top. It’s a full-width easy slider and the same issue arises every time I use a full-width easy slider ie. twice on this page (http://mytribetravels.com/about/)
Cheers
Peter
Hi Peter,
You can just remove the pseudo class :hover from the above and change the css class names to this format:
#top #header .social_bookmarks_skype a {
background-color: #37589B;
}2) The icon boxes right now aren’t customizable except with direct css or site wide css. So you could do:
#top .avia-icon-list .iconlist_icon {
background-color: red; /*background*/
}
#top .avia-icon-list .iconlist_icon {
border-color: blue; /*border*/
}3) I think this is answered with the first bit of css above.
5) That link shows as a 404 error but if you make a new topic just for that with an example in the topic we’ll be able to fix it directly.
Regards,
Devin
- The topic ‘changing color of social icons in top header’ is closed to new replies.