WordPress.org

1. themonster
   Member
   Posted 9 months ago #
   

   Hi, the "continue reading" tag on my blog is too unobtrusive and people aren't clicking through to posts. Is there anyway to change how the more tag appears on my home page?

   http://www.thebaroquenessmonster.com

   Thanks

2. cubecolour
   ɹoʇɐɹǝpoɯ
   Posted 9 months ago #
   

   It looks like you have a couple of options:

   1. Include an excerpt of the post text to entice people to read the full post.

   2. Make the [ continue reading ] button stand out to make it impossible to not notice it

   To do this you can look in your stylesheet for

   /* =Content
   -------------------------------------------------------------- */

   and above that paste:

   @-moz-keyframes noticeme {
   	from { background-position:top left; }
   	to {background-position:top right; }
   }
   @-webkit-keyframes noticeme {
   	from { background-position:top left; }
   	to { background-position:top right; }
   }
   @-o-keyframes noticeme {
   	from { background-position:top left; }
   	to { background-position:top right; }
   }
   @-ms-keyframes noticeme {
   	from { background-position:top left; }
   	to { background-position:top right; }
   }
   @-khtml-keyframes noticeme {
   	from { background-position:top left; }
   	to { background-position:top right; }
   }
   @keyframes noticeme {
   	from { background-position:top left; }
   	to { background-position:top right; }
   }
   
   .post .below-content .read-more a {
   	color: #fff;
   	background-image:-webkit-linear-gradient( left, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red );
   	background-image:-moz-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
   	background-image:-o-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
   	background-image:-ms-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
   	background-image:-khtml-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
   	background-image:linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
   	-moz-animation:noticeme 2.5s forwards linear infinite;
   	-webkit-animation:noticeme 2.5s forwards linear infinite;
   	-o-animation:noticeme 2.5s forwards linear infinite;
   	-khtml-animation:noticeme 2.5s forwards linear infinite;
   	-ms-animation:noticeme 2.5s forwards linear infinite;
   	-lynx-animation:noticeme 2.5s forwards linear infinite;
   	animation:noticeme 2.5s forwards linear infinite;
   	background-size:50% auto;
   	padding: 4px 10px;
   	-webkit-border-radius: 3px;
   	-moz-border-radius: 3px;
   	border-radius: 3px;
   	text-shadow: 0px 1px 0px #000;
   	filter: dropshadow(color=#000, offx=0, offy=1);
   	font-weight: bold;
   	text-transform: uppercase;
   }

   Then the button will be impossible to ignore

3. keesiemeijer
   moderator
   Posted 9 months ago #
   

   Change it how?

   You can change it in your theme's loop.php:
   

   <?php _e('Continue Reading', 'origami') ?>

4. themonster
   Member
   Posted 9 months ago #
   

   @cubecolour

   haha I like what you were thinking... but can't I just center it and make it 4x larger? I want it to still match my theme...

5. cubecolour
   ɹoʇɐɹǝpoɯ
   Posted 9 months ago #
   

   mmm - might be a bit over the top doing that as well ;o)

   Try adding

   text-align: center;
   	font-size: 38px;
   	margin: 10px 200px;

   before the closing brace of the css I posted

6. themonster
   Member
   Posted 9 months ago #
   

   @cubecolour I think I'm doing something wrong because it didn't work (also without the rainbow) I just was the text to be more noticeable, but still fit my theme... here's the link to my pastebin

7. cubecolour
   ɹoʇɐɹǝpoɯ
   Posted 9 months ago #
   

   To just make it bigger, add this before the =Content block:

   .post .below-content .read-more a {
   font-size: 22px;
   }

8. themonster
   Member
   Posted 9 months ago #
   

   @cubecolour thank you so much it worked perfectly

Reply

You must log in to post.