Hi there, SO team.
I’m struggling with an apparently easy-to-solve issue that turned to be a real headache. Unfortunately, I cannot provide you with an url, as i’m working locally, so i’ll try to be as clear as possible.
Well, I’m using a child theme of Suffusion 4.4.9. theme, Firefox 47.0 and the latest version of SO PB and SO Widget Bundle.
The point: I want to change the color of a hover-button created using the Widgets Bundle Siteorigin Button. The idea is this button to look the same as the social media buttons (WB SO social media buttons), which are a circle with hover effect, wire styled, using my web main colors (black for background and gold #ad9847 for fonts and icons). The icons look then a golden border with a golden social network icon inside, over a black background. When hovering, the full circle (border and background) turns into gold and the icon into the social network corporate color. The idea for the new button is to change my web colors when hovering: full circle gold and icon black.
Social media buttons (s.m.b.) are placed in both a widget area above the header and a widget area above the footer. They look and work correctly in both places. I want also to place a contact button (telephone icon) beside the social media buttons in the widget area above the footer.
After styling it in its own button widget styling area (icon, color #ad9847, design and layout), it didn’t look like a circle and, despite the colors looked initially correct (a golden border, circle background black and a golden telephone), the hover effect resulted in desapearing the telephone icon (the whole icon circular area turned into gold color, but the icon seemed to stay golden as well, instead of turning into black), so i went into css.
First, i noticed that there is an ad-hoc css file generated for each different button customization made (such as sow-button-wire-9a1f065ddbc9.css), for the case this particular css file code is:
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base {
zoom: 1;
}
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base:before {
content: '';
display: block;
}
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base:after {
content: '';
display: table;
clear: both;
}
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base a {
font-size: 1.45em;
padding: 0.5em 1em;
background: transparent;
border: 2px solid #ad9847;
color: #ad9847 !important;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
border-radius: 1.5em;
text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base a .sow-icon-image,
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base a [class^="sow-icon-"] {
margin: 0;
}
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base a:visited,
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base a:active,
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base a:hover {
color: #ad9847 !important;
}
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base a.ow-button-hover:hover {
background: #ad9847;
color: #FFFFFF !important;
}So i did the following changes (within the Suffusion theme custom css area), addressing the corresponding css file:
– To get the circle shape and the same size and position in the widget area above footer as those of the s.m.b., i changed some parameters, and it worked fine:
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base a {
font-size: 1.5em !important;
padding: 0.5em 0.5em !important;
margin: 0.3em 0.15em 0.3em 0.15em;
}
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base .sow-icon-fontawesome {
width: 1em;
height: 1em;
display: inline-block;
}– But to adjust the color when hovering, nothing worked. I tried to force it through css, by adding this code within the custom css area:
.so-widget-sow-button-wire-9a1f065ddbc9 .ow-button-base a.ow-button-hover:hover {
background: #ad9847;
color: #000000 !important;
}It didn’t worked. Any other tries were also unsuccessful.
So i tried another approach. I deleted the widget, cleaned the previous button-styled ad-hoc generated css files (the ones with the combination of letters and numbers, as shown above), cleaned the cache, and then reinstalled the button widget again, but this time i didn’t styled any color into the widget styling area (i did it just for design and layout parameters), so the button took the default wire style color values set for this button widget: blue #41a9d5 for icon and button, and white #FFFFFF for the icon when hovering, hover effect functioning properly this time. Its generated css file is:
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base {
zoom: 1;
}
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base:before {
content: '';
display: block;
}
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base:after {
content: '';
display: table;
clear: both;
}
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a {
font-size: 1.45em;
padding: 0.5em 1em;
background: transparent;
border: 2px solid #41a9d5;
color: #41a9d5 !important;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
border-radius: 1.5em;
text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a .sow-icon-image,
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a [class^="sow-icon-"] {
margin: 0;
}
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a:visited,
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a:active,
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a:hover {
color: #41a9d5 !important;
}
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a.ow-button-hover:hover {
background: #41a9d5;
color: #FFFFFF !important;
}Then i did the whole customization through css, adding the code above used for the other customization attemp, for both the circular shape, size and position, and the colors and hovering colors (obviously, addressing the corresponding css file, that’s .so-widget-sow-button-wire-4abbd6241bd0), and also adding the rest of the colors gold #ad9847 and black #000000 code needed:
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a {
font-size: 1.5em !important;
padding: 0.5em 0.5em !important;
margin: 0.3em 0.15em 0.3em 0.15em;
}
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base .sow-icon-fontawesome {
width: 1em;
height: 1em;
display: inline-block;
}
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a {
border: 2px solid #ad9847;
color: #ad9847 !important;
}
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a:visited,
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a:active,
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a:hover {
color: #ad9847 !important;
}
.so-widget-sow-button-wire-4abbd6241bd0 .ow-button-base a.ow-button-hover:hover {
background: #ad9847;
color: #000000 !important;
}Again, the shape, size and position changes worked well, but the color changes failed again, even worse: they remained blue and white, despite whatever the chages and combinations i made, hover effect working properly with this default color combination. I even tried modifying the style.css file in the child theme, same results.
Summarizing, color customization in the widget styling area results in no icon color change when hovering (just the full circle changes), color customization through css customization results in hover effect working well but no changes at all regarding color selection, keeping the default blue and white color combination.
Oddly, i tried this button widget in other area of the page, outside the above footer area, with css full customization (widget styling area customization resulted the same), and it worked perfectly, both shaping and color/color hovering. My custom css overrode the default color values (blue and white), which is not happening with the button placed in the widget area above footer.
Probably the solution is an easy one in front of my nose, and probably you’ll need more info or code. Please tell me whatever you may need, considering that i cannot provide you with an url :-( .
Thanks in advance.