• On front page of blog, we have excerpts for posts. Inside of each excerpt there is a “Keep Reading” button which displays on hover. Any suggestions on how to edit the styling of this button, such as changing its color, etc?

    It’s tricky to see css in Chrome using “inspect” because the button only appears on hover. Here is link to page:

    https://www.lifeleap.org/grow/

    Thanks for any suggestions.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi andrew55,
    that button is not printed by the theme.
    Also because “Keep reading” is not a string of the theme ??

    It might be put there by a plugin (as I guess you didn’t customize the WordPress readmore in your child-theme).

    With chrome “inspect” you can always expand the elements and reach the button.
    Anyway the selector you might need is .tc-g-cont .moretag

    Hope this helps,

    best regards.

    Thread Starter andrew55

    (@andrew55)

    Rocco,

    Thank you for the reply. The read more button was actually created in the functions.php file, so this explains why it was difficult for me to find. Must have done that a couple years back and forgot. I am able to edit it easily now.

    One more quick question: There seems to be a color transition (from lighter to darker) over excerpt during hover. I believe this is actually created by Customizr.

    I’ve been trying to edit css, but can’t get it right. Any suggestion on how to remove the transition so it’s just one solid color overlay during hover? Thanks.

    Provided, that you just want the excerpt not to fade out in the last line, you could try

    .mask .entry-summary {mask-image:none;}

    There may be much more sophisticated solutions, but it worked for me.

    ***EDIT:***
    Ups, it worked for me, because my excerpts are really short. If you just denied the mask image, as I did, the last line of your excerpt might just be cut horicontally. So you will have to alter the specifications of the mask (or text, line etc.)
    Sorry ;o)

    • This reply was modified 7 years, 5 months ago by rengeiw.
    Thread Starter andrew55

    (@andrew55)

    rengeiw,

    Thanks. That didn’t work for me but this did:

    .mask .entry-summary {
        mask-image: linear-gradient(top, #000000 100%, rgba(0, 0, 0, 0) 100%) !important;
        -webkit-mask-image: -webkit-linear-gradient(top, #000000 100%, rgba(0, 0, 0, 0) 100%) !important;
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘edit “keep reading” button in customizr’ is closed to new replies.