The look of the call-to-action button (see the yellow box here – https://jazzjournal.co.uk/2020/02/02/chris-barber-memories-of-my-trip/ – with the text ‘Click here for information on how to buy Chris Barber: Memories Of My Trip’) has changed since I updated from 9.2.2 to 10.3. Can you tell me how to change font and hover colour? Text is too bold and I don’t want the box to turn black on hover, obscuring the text. I have checked the settings available in the post but none seems to deal with this. Is there something in Theme Panel?
Thanks
Mark Gilbert
Hi,
This can be done only with custom css, because the Gutenberg editor do not have an option for it -> https://github.com/WordPress/gutenberg/issues/4543
-> https://i.imgur.com/kUabS9J.png
.post .wp-block-button.td_btn_large .wp-block-button__link {
font-weight: 500;
}
.post .wp-block-button.td_btn_large a:hover{
background-color: #f2e85b!important;
}
The code need to be set in theme panel> custom code> custom css.
Hope this will help you!
Thanks.
Ok – thanks
I pasted this (using different colour code – #dff1ed) in theme panel> custom code> custom css but still the hover colour is black:
.post .wp-block-button.td_btn_large .wp-block-button__link {
font-weight: 500;
}
.post .wp-block-button.td_btn_large a:hover{
background-color: #dff1ed!important;
}
Hi,
I can not find the code in source page, did you removed the code ? or maybe you are using some cache plugins.
The code should work just fine -> https://i.imgur.com/7zQ8nhr.png
Thank you!
I removed the code. I’ll put it back – please take a look in 10 minutes.
Thanks
I have inserted this code at theme panel> custom code> custom css and saved. Still on hover over the yellow button it goes black, not the grey of #e6e6e6.
.post .wp-block-button.td_btn_large .wp-block-button__link {
font-weight: 500;
}
.post .wp-block-button.td_btn_large a:hover{
background-color: #e6e6e6!important;
}
For example, in this article: https://jazzjournal.co.uk/2020/03/04/harrison2-trout-in-swimwear/
Hi,
Indeed the code will not apply on this post, because the button style is different and you need a different css lass to apply on it, for this you can use this custom css
.post .wp-block-button.td_btn_large .wp-block-button__link {
font-weight: 500;
}
.post .wp-block-button.td_btn_large a:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background-color: #dff1ed!important;
}
Thank you!
I will try this, but I notice with the previous addition the added code is now showing at the base of the website. See here: https://drive.google.com/file/d/1dsZyOjWBPU4wz-jAAd0lBF0gMZFJND2G/view?usp=sharing
Ignore the last message – I just pasted it in Custom HTML by mistake!
This has worked fine but I see warnings in custom css field next to this code: “Don’t use adjoining classes” and “use of !important”.
Does this matter? Is it a problem?
Thanks
Hi,
Do not worry, these warnings will not affect the website, only when is look like this is a problem -> https://i.imgur.com/cAz8QzE.png
Thank you!
