Home>Support>Change the “Continue reading” button for Post excerpts

Change the “Continue reading” button for Post excerpts

By touchstone, 9 years ago. Last reply by Andrew Misplon, 9 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 11 months ago touchstone

    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. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 11 months ago touchstone

    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. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    For sure, try:

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

    Let us know how that goes.

  5. 9 years, 11 months ago touchstone

    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. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 11 months ago touchstone

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

    Thank you again for the help.

  8. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More