Tagged: color change, CSS, hover, social sharing
- This topic has 7 replies, 2 voices, and was last updated 6 years, 11 months ago by
mila_support.
- AuthorPosts
- March 21, 2016 at 23:36 #7980
AnonymousInactiveHi there. Working on this page: http://www.situationaldesign.com/?p=513
I figured out how to change the background color for the social buttons, but the hover code I’m using just keeps defaulting to the originally set colors. Here’s what I’ve been using:
.supsystic-social-sharing[data-overlay=”on”] a.sharer-flat.facebook:hover {
background-color: #68686C !important;
}
.supsystic-social-sharing[data-overlay=”on”] a.sharer-flat.pinterest:hover {
background-color: #753E4C !important;
}
.supsystic-social-sharing[data-overlay=”on”] a.sharer-flat.mail:hover {
background-color: #292932 !important;
}
.supsystic-social-sharing[data-overlay=”on”] a.sharer-flat.twitter:hover {
background-color: #539CA8 !important;
}What am I missing?
Thanks!
March 23, 2016 at 19:40 #7994
mila_supportMemberHello!
Try to replace “background-color” property with “color”. It will look like this –.supsystic-social-sharing[data-overlay=”on”] a.sharer-flat.facebook:hover { color: #68686C !important; } .supsystic-social-sharing[data-overlay=”on”] a.sharer-flat.pinterest:hover { color: #753E4C !important; } .supsystic-social-sharing[data-overlay=”on”] a.sharer-flat.mail:hover { color: #292932 !important; } .supsystic-social-sharing[data-overlay=”on”] a.sharer-flat.twitter:hover { color: #539CA8 !important; }March 27, 2016 at 23:35 #8042
AnonymousInactiveThanks for your help…. but it didn’t work, I’m afraid. Here’s the code I’m using to change the main background color (this code definitely works, perhaps that might help?):
.supsystic-social-sharing[data-overlay=”on”] .twitter {
background-color: #424450 !important;
}
.supsystic-social-sharing[data-overlay=”on”] .facebook {
background-color: #424450 !important;
}
.supsystic-social-sharing[data-overlay=”on”] .pinterest{
background-color: #424450 !important;
}
.supsystic-social-sharing[data-overlay=”on”] .mail {
background-color: #424450 !important;
}March 30, 2016 at 14:24 #8078
mila_supportMemberHello!
Please tell me you want to change the background color as well as hovering color?March 30, 2016 at 21:33 #8095
AnonymousInactiveYes. I want to change the standing background color of all four buttons to all grey. The code I posted works perfect for that. I then want the buttons to hover in four different colors as outlined above. It’s the hover code that just won’t work no matter what I try.
March 31, 2016 at 13:49 #8101
mila_supportMemberPlease try this code to change the hover color:
.supsystic-social-sharing[data-overlay="on"] .pinterest:hoverand then you need to write the color that you want. And tell me did it work?March 31, 2016 at 21:38 #8113
AnonymousInactiveSadly nope. Here’s what I tried:
.supsystic-social-sharing[data-overlay=”on”] .facebook:hover {
color: #68686C !important;
}
.supsystic-social-sharing[data-overlay=”on”] .pinterest:hover {
color: #753E4C !important;
}
.supsystic-social-sharing[data-overlay=”on”] .mail:hover {
color: #292932 !important;
}
.supsystic-social-sharing[data-overlay=”on”] .twitter:hover {
color: #539CA8 !important;
}No go.
April 1, 2016 at 13:59 #8119
mila_supportMemberHello!
Please contact us through the Internal Support. Write there what exactly, where and to what colors you want to change. Also we need the access to your WordPress admin area. Our developer will help you to change the colors.
Please be careful! Do not write your WP credentials here. Send them through the Internal Support. - AuthorPosts
- You must be logged in to reply to this topic.