This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.
The <!--more--> quicktag for WordPress is a common method to provide visitors with an author-defined break point that saves on real estate and encourages additional clicks.
In effect, this creates a quick and simple method to create a manual excerpt. But for some, <!--more--> leaves them wanting, err, more.
Reason being, the <!--more--> quicktag generates a text link by default in WordPress. Nothing wrong with that — but what if you want your “more” to leap off the page?
Which of these “more tag” candidates below catches your eye?
If you felt drawn by the [click to continue…] text instead of the button — well, no, you didn’t. Images are hot, it’s okay to admit it.
Let’s make your <!--more--> quicktag dance to a different tune!
More Link Using an Image Background
First, you need an image for your background. For that purpose, as in the example, a smooth gradient works well. Busy backgrounds can make the text of your button difficult to read.
Note that you can create an image that uses graphical text, but for our example, we did not. Why not?
First, we don’t need to “hide” the original text of the link using this method, and search engines prefer that you hide as little text as possible. Remember, you can change the default [click to continue…] text right in your Thesis interface, so your “more” quicktag can say whatever you want.
Second, there are many free or inexpensive “blank” buttons to be found. For those with limited skill or access to graphical programs, it’s easier to use a blank button and leave the “more tag” as a text layer above the image.
Here’s the button used in the earlier comparison of more tag formatting:
We left the default “more tag” text alone, but again, you can change yours as desired.
The image was uploaded to the Thesis /custom/images folder, and in our example, was named “more-tag-button.png” — and with our image uploaded, it comes down to a fairly simple bit of styling.
This was added to the custom.css file contents:
.custom .more-link {
color:#ffffff;
display:block;
width:153px;
height:28px;
background: url('images/more-tag-button.png') 0 0 no-repeat;
text-decoration:none;
text-indent:12px;
float:right;
padding-top:4px;
margin-top:30px;
clear:both;
}
The code here is easier than it looks. The important part is the selector, which tells the browser we’re targeting the <!--more--> quicktag. Also important is displaying this as a block element, and the width and height you’d need to adjust if your image background does not match these dimensions. The original font color was too dark, so it’s white (#ffffff) now.
The background simply says to use the <!--more--> quicktag image we created and uploaded to /custom/images earlier. To remove the underline on the link, text-decoration was modified. And for purposes of centering the text, the indent and padding-top satisfy this.
In our example, the desired look was to break away from the post or page contents, and to float — align — to the right of the section on its own line.
More Link Using only CSS — No Background Image
The image method is effective in nearly all browsers.
However, you can accomplish a very similar look in modern browsers — similar to the round-cornered example above — without an image.
With no image to upload, you can use pure CSS border-rounding to achieve a smooth “button” look in recent editions of Chrome, Safari, and Firefox.
The no-images version adds this to your custom.css file contents:
.custom a.more-link {
color:#ffffff;
background:#aa0000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
float:right;
padding:4px 10px;
text-decoration:none;
margin-top:30px;
}
.custom a.more-link:hover {
background:#cc0000;
}
The last line adds a hover state, lightly changing the “more” background of red to another shade of red, which provides user feedback.
Here’s to your own creative use of <!--more--> quicktag visual modifications!
Related resource — remove the #more anchor from the permalink.