Build online communities, sell courses & memberships on WordPress Support Forums Themes OneSocial theme tut: change the buttons' color for better display

This question contains 7 replies, has 3 contibutors, and was last updated by  Michael Eisenwasser 3 years, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Question

    #65564
    @jeanpierre

    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.

    Answers

    #65567
    @jeanpierre

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

    #65708
    @vapvarun

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

    #65723
    @jeanpierre

    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.

    #65742
    @vapvarun

    Hi @jeanpierre
    You can use like this

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

    Regards
    Varun Dubey

    #65812
    @jeanpierre

    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

    #66238
    @vapvarun

    🙂

    #69649
    @michael

    @jeanpierre

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

    This should make it easier to override with CSS.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this question.