How-to: Change “Continue Reading” Button to Different Color

Posted in: ,

To change the color of the “Continue Reading” button in the Blog page, add one of the following codes for your choice of color to the Custom CSS area in Site Options Panel. Appearance > Site Options > Styling Options > Custom CSS

(IMPORTANT: make sure to remove localhost:8888 and add your website’s URL to properly call the button image)

COFFEE:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-coffee.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-coffee.png) no-repeat scroll 0 0 transparent !important;}

CHERRY:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-cherry.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-cherry.png) no-repeat scroll 0 0 transparent !important;}

AUTUMN:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-autumn.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-autumn.png) no-repeat scroll 0 0 transparent !important;}

FIRE:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-fire.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-fire.png) no-repeat scroll 0 0 transparent !important;}

GOLDEN:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-golden.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-golden.png) no-repeat scroll 0 0 transparent !important;}

LIME-GREEN:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-limegreen.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-limegreen.png) no-repeat scroll 0 0 transparent !important;}

PURPLE:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-purple.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-purple.png) no-repeat scroll 0 0 transparent !important;}

PINK:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-pink.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-but...) no-repeat scroll 0 0 transparent !important;}

VIOLET:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-violet.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-but...) no-repeat scroll 0 0 transparent !important;}

PERIWINKLE:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-periwinkle.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-periwinkle.png) no-repeat scroll 0 0 transparent !important;}

TEAL:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-teal.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-teal.png) no-repeat scroll 0 0 transparent !important;}

FOREST-GREEN:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-forestgreen.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-forestgreen.png) no-repeat scroll 0 0 transparent !important;}

TEAL-GREY:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-tealgrey.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-tealgrey.png) no-repeat scroll 0 0 transparent !important;}

BLUE-GREY:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-bluegrey.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-bluegrey.png) no-repeat scroll 0 0 transparent !important;}

ROYAL-BLUE:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-royalblue.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-royalblue.png) no-repeat scroll 0 0 transparent !important;}

COOL-BLUE:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-coolblue.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-coolblue.png) no-repeat scroll 0 0 transparent !important;}

SKY-BLUE:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-skyblue.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-skyblue.png) no-repeat scroll 0 0 transparent !important;}

SILVER:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-silver.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-silver.png) no-repeat scroll 0 0 transparent !important;}

GREY:

.content_blog .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-grey.png) no-repeat scroll 100% -43px transparent !important;} 
.content_blog .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-grey.png) no-repeat scroll 0 0 transparent !important;}

You may also change the color of the button’s font. To do so, add the following code:

.content_blog .small_button span {color:#FFF !important;}

Change the color code as needed.


If you also need to change the button color in the “Latest from Blog” shortcodes, simply replace the .content_blog classes from any of the codes above and use .blog-posts-shortcode-outer-wrap  class instead.
Here’s an example:

.blog-posts-shortcode-outer-wrap .small_button {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-grey.png) no-repeat scroll 100% -43px transparent !important;} 
.blog-posts-shortcode-outer-wrap .small_button span {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/bg-buttons-sprite-grey.png) no-repeat scroll 0 0 transparent !important;}