WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Edit 'more tag' (9 posts)

  1. themonster
    Member
    Posted 1 year 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 1 year 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 1 year ago #

    Change it how?

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

    <?php _e('Continue Reading', 'origami') ?>
  4. themonster
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

    @cubecolour thank you so much it worked perfectly

  9. Chris Cane
    Member
    Posted 10 months ago #

    I was able to do this using the custom CSS section on my Cyber Chimps website http://nobackpainanymore.com/

    http://nobackpainanymore.com/our-blog/ to see the effect. I added

    /* Make more-tag more visible */
    .more-link {font-size: 16px;color: Red;font-weight: bold;font-style: italic;}

    I used Firefox "inspect element" to find the CSS name for the more-tag.

Topic Closed

This topic has been closed to new replies.

About this Topic