tut: change the buttons' color for better display

[Jean-Pierre Michaud]

for the people willing to play with design and CSS, here is a little bit of code you can put in the OneSocial Theme Options >> Custom Codes >> CSS

see the screenshot for example of result. you can play with the colors as you wish.

/* generate background and border colors for these buttons - missing in theme */

.a2a_dd.addtoany_no_icon:before,
.helper-links .bb-helper-icon,
.sl-icon, .sl-icon:before,
.sl-count, .sl-count:before {
    background-color: #fffff1  !important;
}

/* add2any button */
.a2a_dd.addtoany_no_icon:before {
    border-color: blue !important;
}

/* bookmark button - member blog */
.helper-links .bb-helper-icon {
    border-color: orange !important;
}

/* recommendation bubbles */
.sl-icon, .sl-icon:before,
.sl-count, .sl-count:before {
    border-color: red !important;
}

PS: the demo theme was customized a lot, so yes, your version will not look like the one in the screenshot.

[Jean-Pierre Michaud]

btw, guys, it would be good to be able to add background-color to these buttons from the Customizer…

[Anonymous]

Hi @jeanpierre
Thanks for your input
I have also notified developer to consider these options in option panel
Regards
Varun Dubey

[Jean-Pierre Michaud]

we hardly can add hover effect to these buttons and the tags because of the CSS used to design them… having :before make it impossible to use :hover at will, so we lack that real effect we could have with simplier buttons. maybe a ajax inject of effect could do, but it’s not really useful.

[Anonymous]

Hi @jeanpierre
You can use like this

.a2a_dd.addtoany_no_icon:hover::after
.a2a_dd.addtoany_no_icon:hover::before

Regards
Varun Dubey

[Jean-Pierre Michaud]

damn, that’s why i was unable to work it out, i forgot the double “::” …. and i knew about it, i’m just blind… lol

[Anonymous]

🙂

[Anonymous]

@jeanpierre

We added hover effect into core theme now, in latest release 1.0.5.

This should make it easier to override with CSS.