changing button colors on q*a lite in blogmu theme

I am using blog mu theme(I LOVE IT) and have configured everything that I can see to do - I installed Q&A lite and have gone thru the settings to configure it. Built my page and tested it. It works great but the buttons are clashing terribly with my configured link colors. I don't really want to change them.

I have "my custom css" plugin, would it be possible to send me a code snippet to change the background and hover button colors?

Here is page in question: http://theworkoutexchange.com/questions/ask/

Thanks in advance! @iempoweru Linda

  • Michelle Shull

    Hey there, Linda!

    I'd love to! I need two things from you first, however.

    1. What colors do you want? If you've got the hex codes (ala #000000) that's fabulous.
    2. You've got the Q&A page protected with Protected Content, so I can't actually see it. Would you be willing to enable support access so I can see what you see? If this is ok, just grant me temporary admin access to your site by clicking "Grant Access" button in the WPMU DEV Dashboard Settings from the following path and reply on this thread after granting it?

    Admin -> WPMU DEV -> Support -> Support Access Tab

    If you have not installed WPMU DEV Dashboard plugin yet, kindly do that here : https://premium.wpmudev.org/project/wpmu-dev-dashboard/ and then allow access as per the above process.

    Thanks, Linda! We'll make it look super snazzy.

  • iempoweru

    What a bummer for you! Sorry to waste your time, I moved on to configuring membership while I waited, not realizing that I was blocking you out! I disabled the membership plugin, which should give you access. I will grant you access as well after I send this off. I want to experiment with colors, so once you send it to me, I can insert my own hex codes. Thank you so much for your quick reply! @iempoweru Linda

  • Michelle Shull

    Hey Linda!

    No bummer, no waste! Thanks for enabling support access, but it looks like I don't need it. Here are the CSS elements you'll need to change the hex codes for:

    /*button background color (currently gray)*/
    
    #qa-menu li {
    background-color: #777;
    }
    
    /*button text color (currently red)*/
    
    #post-navigator a {
    color: #FFF !important;
    background: #FF0818 !important;
    border: 1px solid #FF0818 !important;
    }
    
    /*button text color hover (currently black)*/
    
    #post-navigator a:hover {
    color: #FFF !important;
    background: #000 !important;
    border: 1px solid #000 !important;
    }
    
    /*Ask button (currently blue)*/
    
    #qa-menu #qa-current-url {
    background-color: #21759B;
    }

    I added comments to label each part. You'll notice some of the parameters have an "!important" tag, make sure to leave that in your custom CSS, or it will default to the original. Otherwise, just replace these color codes with your own, and you should be looking great in no time.

    Have fun!

  • iempoweru

    Thanks again for your help. Ok, I tried it multiple times, must be doing something wrong. The only thing I could get to change was the blue in the ask button.

    Could you add the colors to the code above and I will tranfer it over, sorry.

    Button background: #660198
    Link color: #14F7FF
    Hover #ffffff

    Ask button background: #660198
    Link color: #14F7FF
    Hover: #ffffff

    Thanks again! @iempoweru Linda

  • Tyler Postle

    Hey Linda,

    Hope you're doing well today!

    Try this out

    /*button background color (currently gray)*/
    
    #qa-menu li {
    background-color: #660198;
    color: #14F7FF;
    }
    
    #qa-menu li:hover {
    background-color: #ffffff;
    }
    
    /*button text color (currently red)*/
    
    #post-navigator a {
    color: #FFF !important;
    background: #FF0818 !important;
    border: 1px solid #FF0818 !important;
    }
    
    /*button text color hover (currently black)*/
    
    #post-navigator a:hover {
    color: #FFF !important;
    background: #000 !important;
    border: 1px solid #000 !important;
    }
    
    /*Ask button (currently blue)*/
    
    #qa-menu #qa-current-url {
    background-color: #21759B;
    color: #14F7FF;
    }
    
    #qa-menu #qa-current-url:hover {
    background-color: #ffffff;
    }

    Let us know if that does the trick.

    All the best,
    Tyler

    PS. Happy New Year!