[Resolved] button colors

[liz]

Hi,

I tried editing the button colors, but the customizer doesn’t seem to be working. Currently, the hover color is black which I dislike. I want to keep the button color in the magazine grid as is..no hover color effect. I also want to use the same button color in the standard and align sections under WP show posts. Thank you.Link to the website is in the private info field.

[Leo]

Hi Liza,

The buttons you are referring to are from WP Show Posts so the customizer options wouldn’t work.

Can you disable Autopimize for me to take a look?

Thanks 🙂

[liz]

hi,

Thanks. I have already disabled the Autoptimize plugin..

[Ying]

Hi Liza,

Can you go to customizer > additional CSS, see if you can find this CSS:

.page-hero a:hover {
    color: #0c0000;
}

If so, you can remove this CSS, so the button color will stay white.

I also want to use the same button color in the standard and align sections under WP show posts

Do you mean this part?
https://www.screencast.com/t/9DOpJ9hIrojb

If so, try add this CSS:

a.wp-show-posts-read-more {
    color: #ffffff;
    border-color: #ffffff;
    background-color: rgba(91,234,103,0.39);
}

But the section’s background color is white, the border color won’t be visible.

Let me know 🙂

[liz]

Hi,

Thank you, the problem I am having now is the hover color. Once you click the button, the background and the text turn black. Quite problematic as the text “read more” is not visible. If you may, I would just remove the hover effect.. Thanks.

[Ying]

Hi Liza,

Are you using WP SHOW POSTS PRO?

If so, you should be able to change the read more button color (including hover color) in the WP SHOW POST list without using CSS. The settings are in the Contentsection.

Let me know if you need further assistance 🙂

[liz]

Hi, Ying

I think I do… I put the code you provided, but the color for the text “read more” remained the same. How can I edit the button colors using wp post? Thank you.

[Ying]

If you are using WP show posts pro, you won’t need to use CSS, the colors can be adjusted within the plugin. Follow the screenshots below to see the color settings:

1. https://www.screencast.com/t/zNXiXp42eNtm
2. https://www.screencast.com/t/JPjnO5bEr

And remove this CSS from customizer > additional CSS, so it won’t override the settings you made in the plugin:

.page-hero a:hover {
    color: #0c0000;
}

[liz]

Hi, I only have the GP premium, not the pro. I placed the codes you provided last time, but the hover background color remains black as well as the text ” Read more” rendering them invisible on-screen..

[Elvin]

Hi there,

You can try this CSS:

a.wp-show-posts-read-more:focus, a.wp-show-posts-read-more:hover {
    background-color: red;
    color: white;
}

Change the color values to your preference. 🙂

Note: This CSS generally applies to ALL WPSP lists on your site (except the magazine grid). IF you want to apply this on specific lists only, let us know.

[liz]

Hi, Elvin..thank you so much =)

[Elvin]

No problem. 😀

[Author]

Posts