Change link and button colour

  • Resolved oliviamarchi1

    (@oliviamarchi1)


    6 years, 11 months ago

    Hello!

    I want to change all links and buttons colours from the default orange to yellow.

    I found the following code and added it to Additional CSS:

    a:link {color:#EFB82B;}

    It did change all the links like I wanted but it didn’t change the button on my contact form and it messed the three yellow buttons (yellow background, white text) on my homepage: instead of them being yellow with white text, they’re all yellow and on hover the original settings appear (yellow background, white font and orange highlight around it on hover).

    I’d like to still make all the links yellow and keep the buttons with the yellow background and white text and with a purple (#871952) highlight around on hover, including the button on the contact form.

    Is this possible?

    Thanks very much!

    Olívia

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter oliviamarchi1

    (@oliviamarchi1)

    6 years, 11 months ago

    Hi!

    I managed to change the Contact From 7 send button’s colour with this code and it worked:

    input.wpcf7-form-control.wpcf7-submit:hover {
    border-color: #871952;
    color: white;
    }
    input.wpcf7-form-control.wpcf7-submit {
    background-color: #EFB82B;
    border-color: #EFB82B;
    color: white;
    }

    Still need help with the links (on all pages) and buttons on homepage though. I also forgot to mention that I don’t wish to change the menu colours and portfolio titles/hover, which are working fine with these bits of code:

    .main-navigation li:hover > a,
    .current_page_item a,
    .current-menu-item a {
    color: #EFB82B;
    }

    .page-template-portfolio-page-php .jetpack-portfolio:hover a, .project-navigation-wrapper .jetpack-portfolio:hover a, .page-template-portfolio-template-php .jetpack-portfolio:hover a, body[class*=jetpack-portfolio].archive .jetpack-portfolio:hover a {
    color: #EFB82B;
    }

    Thanks a lots again!

    Olívia

    Gemma Evans

    (@gemmaevans)

    6 years, 11 months ago

    Hi Olívia,

    Just to make sure I’ve got this right:

    Links and buttons changed successfully

    • Contact form

    Links and buttons to keep as they are

    • Menu
    • Portfolio titles

    Links and buttons that need changing

    • Homepage
    • Posts, pages and all other site areas

    Let me know if anything I’ve written is incorrect and we can go from there 🙂

    • This reply was modified 6 years, 11 months ago by Gemma Evans.
    Thread Starter oliviamarchi1

    (@oliviamarchi1)

    6 years, 11 months ago

    Hi Gemma!

    That’s it, exactly 🙂
    Please let me know if you need any more info.

    Thanks!!

    Olívia

    Gemma Evans

    (@gemmaevans)

    6 years, 11 months ago

    Hi Olívia,

    Thanks! Since you’ve already started working on the CSS, could you start by changing the global link and buttons colours — this means the same colours will be applied to all links and buttons across the whole site.

    I can then help you with CSS for any areas that need to be different. Working this way will be more efficient than writing creating separate styles for every area of the site, as we’ll only be making changes to areas that need a different colour scheme.

    Let me know when you’ve done that and I can take another look.

    Thread Starter oliviamarchi1

    (@oliviamarchi1)

    6 years, 11 months ago

    Hi Gemma!

    Thanks too. I made the change to the links but this time I used this code:

    a {
    color: #DAA828;
    }

    a:hover {
    color: #871952;
    }

    Instead of the previous one:

    a:link {
    color:#EFB82B;
    }

    Now it’s working the way I expected for all global text links and it left the buttons alone.

    So this mostly solved the issue of changing the links color and the only thing I still want to customize further are the buttons on the homepage. I want to change the hover color from orange to yellow and I’m still figuring out whether CSS will be enough or if I’m to customize this directly into the plugin (I used Atomic Blocks to create the columns and inserted the standard built-in buttons. Maybe the link button of Atomic Block might let me customize them the way I want in a more straightforward way).

    Anyway thanks a lot for your time and attention and I’ll let you know how this goes with the buttons.

    🙂

    Gemma Evans

    (@gemmaevans)

    6 years, 11 months ago

    Hi @oliviamarchi1,

    Glad to hear your global links are sorted now.

    I still want to customize further are the buttons on the homepage. I want to change the hover color from orange to yellow

    Please try using this CSS for the homepage buttons:

    .home a.wp-block-button__link.has-text-color.has-white-color.has-background:hover 
    {
        background-color: #fcf923 !important;
    }

    #fcf923 can be changed to any shade of yellow you like 🙂

    Thread Starter oliviamarchi1

    (@oliviamarchi1)

    6 years, 11 months ago

    Hi Gemma!
    Problem solved. Thanks so much!
    Have a great weekend.
    Olívia

    • This reply was modified 6 years, 11 months ago by oliviamarchi1.
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Change link and button colour’ is closed to new replies.