[Resolved] Styling Post Excerpt Read More Button

Home Forums Support [Resolved] Styling Post Excerpt Read More Button

Home Forums Support Styling Post Excerpt Read More Button

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2169168
    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

    #2169228
    Fernando
    Customer Support

    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. 🙂

    #2169232
    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

    #2169316
    Fernando
    Customer Support

    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. 🙂

    #2170556
    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

    #2170564
    Fernando
    Customer Support

    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! 🙂

    #2170573
    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 :))

    #2170585
    Fernando
    Customer Support

    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;
    }
    #2170633
    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!

    #2170669
    Fernando
    Customer Support

    You’re welcome Troyw! Glad that worked! 🙂

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