Premium Theme Support › Pro Theme Design › Beacon

Change colour of all buttons in my posts

  • Author
    Posts
  • #158107
    leonazombie
    Member

    Hi Ben, long time no see! We’ve just switched our shop to this template but need a code before I pull my hair out…..please! In every post you will see there is a button which is a link to each of our eBay shop listings. Unfortunately this theme seems to have a default button colour of dark orangey brown which is really not great with our blue theme. Is there a code to change all of the buttons in all of the posts to another colour, or do I have to change them all manually? Please tell me I haven’t got to go through them all, please come up with a magical code! You’ll see I found a code for the ‘older posts’ button, would I need to delete that code? Many thanks in advance :)
    Leona

    The blog I need help with is: (visible only to logged in users)

    #158168
    binarymoon
    Theme Author

    Hi Leona – welcome back! :)

    The following css will make the buttons a darker blue. This will only work for the buttons using this shade of blue. If you use other colours we may need to add some more css, although the changes would be similar:

    .wp-block-button__link.has-vivid-cyan-blue-background-color:hover {
    background:#0066bb;
}

    Thanks – Ben

    #158211
    leonazombie
    Member
    Original poster

    Nope that;s not it. If you look at one of my older posts you’ll see the button is this yucky orange colour. The newer posts already have a blue button as I did those yesterday. The code you gave me made the button change blue on hover, which in nice but not what I wanted. Is there a code to change the older posts buttons? Also the ‘Follow Blog Via Email’ Button has this yucky orange on hover can we change that to blue too please?
    Thanks
    Leona

    #158215
    leonazombie
    Member
    Original poster

    I should add that I was using a different template when I did all these posts. I switched to Beacon a few days ago and then all the buttons went orange, they was black or blue.

    #158216
    leonazombie
    Member
    Original poster

    I’ve just got a code off a ‘Happiness Engineer’, after a dig that this tiny ask of mine is beyond what their service offers and I should learn CSS for myself via a website like they did before they got their job……..
    The code they gave changes all buttons to blue with another blue on hover, which is great, but the button text is white and I’d prefer it to be black. Here’s the code, is there any way we can make the text black? I’m asking you because I had to get off the chat session quick before I punched my computer screen!

    .wp-block-button__link {
    background-color: #89b8ea;
    }

    .wp-block-button__link:hover {
    background-color: #8ce5fc;
    }

    Sorry to ask, thanks. Leona :)

    #158252
    binarymoon
    Theme Author

    Ah ha – looks good :)

    #158261
    leonazombie
    Member
    Original poster

    And the code I asked for?

    #158277
    binarymoon
    Theme Author

    Missed that bit, sorry. :)

    .wp-block-button__link {
background-color: #89b8ea;
color: #000000;
}

.wp-block-button__link:hover {
background-color: #8ce5fc;
color: #000000;
}

    Ben

    #158290
    leonazombie
    Member
    Original poster

    That didn’t work. :(

    #158350
    binarymoon
    Theme Author

    I just tested it on your site again and it works fine. Make sure there’s a ; at the end of each line or following lines may not work.

    If you can add the code to your custom styles and leave it there then I will be able to work out why it’s not working as expected.

    Ben

    #158414
    leonazombie
    Member
    Original poster

    Hi, I’ve added the code but the older posts still have white text on the buttons, but I’m done caring about this any more, it will do. Thanks anyway.

    #158487
    binarymoon
    Theme Author

    Hi Leona – it looks like some of the content, the older ones in particular, have got a colour that’s been assigned in the editor which is why they are white.

    If you edit the posts and remove the custom colour they will display as intended.

    Alternatively, if you want all buttons to be these colours, then you could change the css to:

    .wp-block-button__link {
background-color: #89b8ea !important;
color: #000000 !important;
}

.wp-block-button__link:hover {
background-color: #8ce5fc !important;
color: #000000 !important;
}

    Note that this will override any changes you make in the editor. The buttons will always be these colours.

    Thanks – Ben

    #158567
    leonazombie
    Member
    Original poster

    Yay! That’s great, thank you Ben :)

  • The topic ‘Change colour of all buttons in my posts’ is closed to new replies.