Home>Support>Change the “Continue reading” to menu style

Change the “Continue reading” to menu style

By Alexander Hecht, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hello,

I would like to change the Continue Reading button that is placed at the end of a blog excerpt.

I found this: https://siteorigin.com/thread/change-the-continue-reading-button-for-post-excerpts/

Is it possible to make this button look like the menu?

I mean no rounded corners, background like the menu, then hover with the same color as the menu.

I couldn’t manage to get the code myself, it would be nice if you have an idea. I can fill in the color codes afterwards myself.

Thanks

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 10 months ago Daniel
    Hi, I Work Here

    Hi Alexander

    Do you have a public URL where we can take a look at this? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

    Please send a direct link to the page in question.

    Looking forward to hearing from you.

  2. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Alexander Hecht

    It’ll look something like this:

    /* Change the Continue Reading Button */

article.post .more-link, article.page .more-link {
  padding: 4px 10px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: red;
  filter: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  color: #fff;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

article.post .more-link:hover, article.page .more-link:hover {
background: blue;
color: black;
}

    Insert under Appearance > Custom CSS. The button comes first then the hover styles.

    Hope that helps. Edit as required.

  3. 10 years, 10 months ago Alexander Hecht

    Thanks Andrew! That works perfectly. Is there a way to change the text to “Read more”?

  4. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure, glad that helped. Changing the text would take a bit of effort. You’d need to use a child theme and copy content-single.php and content.php into the child theme. Then within those two files you’d need to change the string Continue reading. Sorry there isn’t an easier way.

  5. 10 years, 10 months ago Alexander Hecht

    Thanks. I already have a child theme with these phps, so no big effort.

  6. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Super, let me know if you need a further hand there.

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