Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #31210
    Wendy
    Guest

    Hi. I’m using the BoldGrid suite of plugins with the Hydra theme on a new site. My selected 3-colour palette works fine for the site layout but given that links are also driven by this palette, this isn’t so great so I would like to specify different colours for all link pseudoclasses in the custom CSS. I have tried the generic forms, but they make no difference. Please can you give me the correct syntax to do this?

    #31214
    Joseph W
    Keymaster

    Hi Wendy!

    The selector that targets links in your page content and applies your palette colors to them starts with the palette-primary class that is applied to the body element and you should be able to repurpose that selector to make the necessary color adjustments. Here is the snippet you can use to get started changing the global color setting for your links:

    .palette-primary a {
        color: #888888;
    }

    You can also add the !important designation after the color hex to ensure that all of the link colors are changed, but the selector used in that snippet should be using the proper hierarchy so that won’t be necessary.

    Hopefully that code works as expected for you and please let us know if there is anything else that we can do to help!

    #31219
    Wendy
    Guest

    That worked. Thank you! Though the !importanyt WAS necessary. It hasn’t affected the social media menu though. Can you give me the class hierarchy for that please? I couldn’t quite work out what it should be from inspecting the element.

    #31224
    Joseph W
    Keymaster

    Hi Wendy!

    The social media icons are handled with the Font Awesome icon library and the color assignment on them is applied to the icon itself instead of the link tag like everything else. We can add another selector to the previous rule to make sure the color changes work on the social media icons.

    .palette-primary a,
    .palette-primary a .fa {
        color: #888888 !important;
    }
    #31226
    Wendy
    Guest

    Fabulous! Thank you! And one last one … the buttons? Though presuming that gets more complicated because of the number of different options?

    #31229
    Jesse Owens
    Keymaster

    Hi Wendy-

    That code should have changed your button text color as well. If you’re after the border and hover background color, here’s how you can do those.

    .palette-primary .button-primary {
    	border: 1px solid #bbbbbb;
    }
    .palette-primary .button-primary:hover {
    	background-color: #bbbbbb;
    	border: 1px solid #bbbbbb;
    }
    
    • This reply was modified 1 year, 10 months ago by Jesse Owens. Reason: fix code typo
    #31253
    Wendy
    Guest

    Yes it did but the colours are not ideal for all the button combinations so I want to be able to play with that. Many thanks! You guys rock!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Custom CSS to change global link colours’ is closed to new replies.