• Resolved Mike Hindle

    (@mikehindle)


    Hi all. Sorry, no live site as yet but hopefully this makes sense…

    I’m seeing some sort of dots around my buttons when they are clicked on.

    Can these be removed?

    I also need to change the hover colour of just two individual buttons. Is there some CSS I can use to do this?

    Any help would be much appreciated, thank you.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter Mike Hindle

    (@mikehindle)

    The site is now live, here’s the link if needed. Cheers 🙂

    https://leafletlion.uk/

    Moderator Felipe Santos

    (@foosantos)

    Hi Mike,

    I’m seeing some sort of dots around my buttons when they are clicked on. Can these be removed?

    Yes, for future reference, this is the “focus” state. 🙂

    Here’s the CSS for removing that:

    .wp-element-button:focus, .wp-block-button__link:focus {
        outline-style: inherit;
    }

    I also need to change the hover colour of just two individual buttons. Is there some CSS I can use to do this?

    The best way for that might be to add specific classes to these elements. Can you share the buttons you’re referring to so I can provide some recommendations?

    Thread Starter Mike Hindle

    (@mikehindle)

    Hi Felipe. Again, worked perfectly so thank you.

    Regarding the buttons, it’s just the two that are in the hero section of the home/leaflet distribution page and the leaflet printing page. As they are on a dark background and when you hover over them they go dark.

    I’d just like to change the hover background to something like a #EAEDEB background with #22382B text.

    Moderator Felipe Santos

    (@foosantos)

    Hi again!

    Happy that it helped!

    Regarding the buttons, it’s just the two that are in the hero section of the home/leaflet distribution page and the leaflet printing page. As they are on a dark background and when you hover over them they go dark.

    As both buttons would have the same colors, can you add a CSS class on these two buttons, so this will make things easier if you need to apply the same in the future?

    You can select the block and add it in Advanced > Additional CSS classes:

    https://d.pr/i/ubZwjN
    Full Size: https://d.pr/i/ubZwjN

    In this case, I added “mycustombutton”, but can add something more descriptive (like “button-dark-background”). Then, you can try something like that:

    .mycustombutton .wp-block-button.is-style-outline .wp-block-button__link {
    
    color: #22382B;
    background-color: #EAEDEB;
    
    }

    It is possible that this won’t work, but let me know once you add the CSS class and the name of the class, so I can check further.

    Thread Starter Mike Hindle

    (@mikehindle)

    Thank you, Felipe.

    I’ve added everything as instructed but it’s not affecting anything as yet.

    Just to confirm as well it’s only the hover colour that I need to change. Any other info you need from me just shout and thank you again for your help with this…

    Moderator Felipe Santos

    (@foosantos)

    Hi @mikehindle, can you confirm the class that you added there? This way, I can check the HTML for your site and find the CSS for it.

    Thread Starter Mike Hindle

    (@mikehindle)

    Hi Felipe. I added ads per your example, so using mycustombutton.

    Hope that helps and any other info you need just let me know…

    Moderator Felipe Santos

    (@foosantos)

    @mikehindle Can you try that below?

    .mycustombutton a:hover {
    
    color: #22382B !important;
    background-color: #EAEDEB !important;
    
    }
    Thread Starter Mike Hindle

    (@mikehindle)

    Perfect! It’s now working, thank you, Felipe. Really appreciate your help.

    Moderator Felipe Santos

    (@foosantos)

    Yay, my pleasure!

    PS: If you would like to give a review for the theme, it is always appreciated! You can see more here: https://wordpress.org/support/theme/twentytwentyfour/reviews/?view=all#new-post

    Thread Starter Mike Hindle

    (@mikehindle)

    Of course. Done!

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.