[Resolved] Styling Post Excerpt Read More Button

[troyw]

Hey team,
I am trying to style the Post Excerpt Read More Button, but don’t seem to be getting anywhere. I have added the following CSS, but nothing is happening. Basically, I just want them to look and act like all the other buttons on the website. I though I would start with this CSS to see if it would work, but it doesn’t.

.read-more.button{
	border-radius: 30px;
	margin: 10px 0px;
	box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
}

As you can see, nothing happens. How can I get the buttons to look the same?

Thanks

[Fernando]

Hi Troyw,

To confirm, are you referring to this?: https://share.getcloudapp.com/JruOgK9R

If yes, for your code to work, you’ll need to tweak your CSS selector into something like this:

.wp-block-latest-posts__post-excerpt .read-more-container a{
	border-radius: 30px;
	margin: 10px 0px;
	box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
}

Kindly let us know how it goes. 🙂

[troyw]

That’s perfect, thank you.
Please may I ask, where did you find this part of the CSS?

.wp-block-latest-posts__post-excerpt .read-more-container a

I ask because I need to change the colour of an H4 on an Event Shortcode on the Home Page. I think I know the CSS, just don’t know how to target them?
Thanks

[Fernando]

You’re welcome Troyw!

The best process to do this is to inspect the target element and study the HTML structure of it and other target elements if any.

Look for classes you may target to select the specific Elements to change independently.

Isolate the target elements through appropriate tags, classes or ids which is what I did for .wp-block-latest-posts__post-excerpt .read-more-container a

Here is something which might help: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Take note of specificity as well: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Hope this answers your inquiry. 🙂

[troyw]

Thanks Fernando,

I have gone through the links you sent and tried everything I can, but cannot identify the correct selectors. Here’s the closest I feel I have got.

.mec-skin-carousel-events-container .mec-event-carousel-title [id="mec_skin_events_5106"] h4 {
color : #ffffff;
}

I know it’s not your Plugin so if you can’t help, I understand, but if it is something simple I have missed, please let me now.
Thanks anyway

[Fernando]

Hi Troyw,

This specific code is taking precedence over the color for your h4: https://share.getcloudapp.com/ApuJGoQO

Try reaching out to the plugin’s support with regards to this.

Otherwise, here is a code you may try:

.mec-skin-carousel-events-container h4.mec-event-carousel-title a  {
color: #ffffff !important;
}

Hope this helps! 🙂

[troyw]

Hey Fernando,
Yes, I tried that one too and no luck. At least I now know I am on the right track.

Sadly the said plugin developers offer little to no support (despite the high cost of their plugin), so I am on my own with this one. I will keep fiddling with the CSS. Eventually I will find the right combination of selectors, I’m sure.
Thanks for your help anyway :))

[Fernando]

You’re welcome Troyw.

I see. Can you try removing the space here color :?

Try this instead:

.mec-skin-carousel-events-container h4.mec-event-carousel-title a.mec-color-hover  {
color: #ffffff !important;
}

[troyw]

Yes, you got it!
I know you didn’t have to do that, so thanks very, very much Fernando. I did look at that a.mec-color-hover bit, but thought it was for the hover color.

Thanks again, your awesome!

[Fernando]

You’re welcome Troyw! Glad that worked! 🙂

[Author]

Posts