Edit 'more tag'

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator cubecolour

    (@numeeja)

    13 years, 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

    Moderator keesiemeijer

    (@keesiemeijer)

    13 years, 9 months ago

    Change it how?

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

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

    Thread Starter themonster

    (@themonster)

    13 years, 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…

    Moderator cubecolour

    (@numeeja)

    13 years, 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

    Thread Starter themonster

    (@themonster)

    13 years, 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

    Moderator cubecolour

    (@numeeja)

    13 years, 9 months ago

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

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

    (@themonster)

    13 years, 9 months ago

    @cubecolour thank you so much it worked perfectly

    Chris Cane

    (@chriscane)

    12 years, 11 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.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Edit 'more tag'’ is closed to new replies.