This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Change the “Continue reading” button for Post excerpts

Resolved 8 replies premiumthemetheme-vantage
touchstone
11 years ago · Last reply by Andrew Misplon 11 years ago

I would like to change the Continue Reading button that is placed at the end of a blog excerpt, to simple hyper-linked text, or change the button appearance. The default button does not go well with the overall look of the site. Thanks for your help.

URL: http://touchstonecf.org/blog/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

8
  1. touchstone 11 years, 4 months ago

    A related question… I would also like to change the appearance of the “Post Comment” button to be something more consistent with the site design. Thanks.

  2. Andrew Misplon Staff 11 years, 4 months ago

    Hi touchstone

    Give the following a try under Appearance > Custom CSS:

    /* Vantage Convert Read More Button To A Link */

article.post .more-link, article.page .more-link {
float: right;
text-decoration: underline;
padding: 4px 10px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
background: none;
filter: none;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none;
font-size: 11px;
font-weight: normal;
color: #248cc8;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

    Here is the selector for the post comment button. It can be edited by inserting int Appearance > Custom CSS and changing as required:

    input[type="button"], input[type="reset"], input[type="submit"] {
padding: 12px 20px;
border-top: solid 1px #d2d2d2;
border-left: solid 1px #c3c3c3;
border-right: solid 1px #c3c3c3;
border-bottom: solid 1px #9f9f9f;
background: #ffffff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff));
background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff);
background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%);
background: -o-linear-gradient(#ffffff, #dfdfdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
font-weight: bold;
color: #646464;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
width: auto;
text-decoration: none;
cursor: pointer;
-webkit-appearance: button;
line-height: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

    Hope that helps.

  3. touchstone 11 years, 4 months ago

    Thank you! That is a huge help.

    Is it possible for the text to have the same hover color effect that normal hyperlinks have?

  4. Andrew Misplon Staff 11 years, 4 months ago

    For sure, try:

    article.post .more-link, article.page .more-link:hover {
color: #f47e3c
}

    Let us know how that goes.

  5. touchstone 11 years, 4 months ago

    Andrew,

    Thank you again for your help. You have been so helpful, I hate to bring this up, but…

    This last bit of code you gave me isn’t quite what I am looking for. This changes the color of the link to the same color as my hover color. But, what I am hoping to be able to do is have the link the same color as the links on the rest of the site, and then to change to the hover color on a mouse-over event, like what happens with normal text hyperlinks. In other words, the link is blue, and then switches to orange when the mouse cursor hovers over it.

    Jeff

  6. Andrew Misplon Staff 11 years, 4 months ago

    Sorry about that, please try:

    article.post .more-link:hover, article.page .more-link:hover {
color: #f47e3c
}

    The excerpt option you’re running now is also another way you could go.

  7. touchstone 11 years, 4 months ago

    Bingo! Perfect. That is what I was looking for. :-)

    Thank you again for the help.

  8. Andrew Misplon Staff 11 years, 4 months ago

    Super, glad that helped.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread