Replace "Read More" button

  • conuaf

    #4268

    How do I replace the “Continue reading” button with just a plain “Continue Reading” text link?

    Mod

    Kenneth John Odle

    #27753

    There has been a lot of talk on this forum about replacing the text for the “Continue reading” button, but this is the first time I’ve seen this.

    That entire block button is created using CSS. (You have been reading up that, right?)

    You’ll might want to change it from block to an inline display using this custom CSS:

    a.more-link, a.more-link span {
    display: inline;
    margin: 10px 0 5px;
    }

    (You can adjust those margins, too.)

    The rest of the code from the stylesheet is

    .block-button,
    .block-button:visited,
    .Button,
    .button,
    #commentform #submit {
    background: url(images/bg-block-button.png) left bottom repeat-x #1C5FA5;
    background: -moz-linear-gradient(#2982C5, #1C5FA5);
    background: -webkit-linear-gradient(#2982C5, #1C5FA5);
    background: linear-gradient(#2982C5, #1C5FA5);

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    -moz-box-shadow: 0 0 5px #555;
    -webkit-box-shadow: 0 0 5px #555;
    box-shadow: 0 0 5px #555;

    border: 1px solid #1C5FA5;
    color: #fff;
    cursor: pointer;
    display: block;
    float: right;
    font: bold 12px arial;
    margin: 10px 5px 5px;
    padding: 5px 15px 6px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 0 #16497E;
    }

    Undo any changes you’ve made from Graphene’s display options (“block buttons” in the “colours” options), and then add something that undoes everything in the above bit of code, like this:

    .block-button:hover,
    .button:hover,
    #commentform #submit:hover {
    background: none;
    border:none;
    color: #000;
    cursor: pointer;

    etc.

    Good luck and let us know if you get stuck!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.