Changing the color of the button

Support Area Forums Kerygma Changing the color of the button

Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://ievaladares.org/wp
  • Author
    Posts
  • #26909
    Avatar photoAna M.
    Participant

    Hello,

    Can you tell me how to change the background color (hover) of the button ‘See more’ on the widget “Series”?

    Thanks!

    #26914
    Bill Robbins
    Moderator

    Hello Ana,

    You can do that. This is the best way to do that:

    1. Go to the Appearance section in your WordPress dashboard and click on Customize.
    2. On the left hand side you’ll see several section. Click on the one for Buttons.
    3. In this section you can select your button colors including the hover ones. As you make changes they will appear in the live preview on your right.
    4. Once you have the color you’re looking for, save your changes and you’re done.

    If you run into any questions or trouble, let me know.

    Thanks,
    Bill

    #26931
    Avatar photoAna M.
    Participant

    Hello Bill,

    Thank you for the quick reply. My problem is that I don’t want to change the color of the buttons on the hero section, just the ones on the “Series” widget and on the sidebar. I’ve tried pasting some of the code:

    
    a:hover.button,
    input:hover.button,
    input:hover[type="button"],
    input:hover[type="submit"] {
    	background-color: #505050;
    }
    

    But it didn’t work. Can you tell me what I’m doing wrong?

    Thanks again.

    #26932
    Bill Robbins
    Moderator

    Hello Ana,

    That spot in the customizer changes buttons globally. You can change the hero section buttons back on a page by page basis.

    If you only want to change the button in that specific widget, you can do this:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      .current-series-widget a:hover.button {
      	color: #cccccc;
      	background-color: #000000;
      }
      
    3. Change the #cccccc to the text color you’d like to have and the #000000 to the background color you’d like to have for the hover state.
    4. Update your settings.

    If you need to change the default state, you can do that with this CSS:

    
    .current-series-widget a.button,
    .current-series-widget a:visited.button {
    	color: #ffffff;
    	background-color: #272727;
    }
    

    Let me know if you need help there,
    Bill

    #27036
    Avatar photoAna M.
    Participant

    Hi Bill,

    Of courseā€”I hadn’t realized I could change the color of the hero section buttons individually. I’m sorry for wasting your time! You’ve been very helpful.

    Thanks,
    Ana

    #27037
    Bill Robbins
    Moderator

    Ana,

    I’m always happy to help. If you need anything else, just let me know.

    Have a great week,
    Bill

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Changing the color of the button’ is closed to new replies.