Knowledgebase: Simple Customizations
Flexsitez - Using a custom image for "Continue Reading" link
Posted by Sarah on 24 March 2014 09:56 AM

Fun CSS time!

This tutorial will review some advanced css to customize your Flexsitez blog to use an image instead of text for the "Continue Reading" link.

Step 1: Upload an image to the media library no larger than 25px in height (any larger and it WILL be distorted) ,

Step 2: Edit the image link by navigating to "EDIT" of the recently uploaded image and the full FILE URL. Copy the full link - it should look like
http://www.mydomain.com/wp-content/uploads/2014/03/continue-reading.jpg

Step 3:  Add Custom CSS to your Flexsitez Admin - under Advanced Customization>Custom CSS. Copy and paste the following CSS

/*more link image*/
#content .morelink a,  .entry-content a.more-link {
background: #FFF url(/wp-content/uploads/2014/03/continue-reading.jpg) scroll left center no-repeat;
padding-left: 100px;
color: transparent;
}

NOTE: the actual URL of your image may be different so you will have to change the year, month and/or name.  If your blog is in a subfolder like "blog" the name of the subfolder needs to be included.

Save the CSS settings and take a look on the front! :)

(265 vote(s))
Helpful
Not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments: