This WordPress Wednesdays entry is a re-post from Matthew’s old blog as we resurrect them here at GeekRev.
We are back with WordPress Wednesdays and we have a very small but beneficial CSS trick for you to use.
In most WordPress themes including Standard Theme, used here, the “more” tag is used often on the main page of the site. What is the more tag? Within WordPress there is a button on the toolbar that allows you to “cut” your post into two pieces. So what is the point? Well the point of the “more” tag is to allow an excerpt to show on the main page and to encourage your readers who hit the main page to “continue reading” your post by click on the “more” link! If you are reading this now on the home page, you should see the more tag right….now!
Here at GR we utilize the more tag basically because of the theme layout and foundation. The standard “more” tag wasn’t something that I thought stood out enough and it was in a different spot each post. With that said I needed to tinker just a bit to figure out how to make it stand out just a tad more.
Below is the code that is necessary to enter into the style.css or the custom.css if you use Standard Theme. The code below is something that you should type in to familiarize yourself with the code for a standard CSS item.
[CSS].more-link {
color:#666666 !important;
float:right;
font-family:Georgia,”Times New Roman”,Times,serif;
font-size:12px;
font-weight:bold;
text-align:right;
padding:10px;
}[/CSS]
So what do you all think? I am a very retentive coder and like things to be lined up exactly and set apart when necessary. This was something that was a necessity when I purchased Standard Theme.
If you all try it, let me know what you think. As always there is room for wiggling in CSS so if you want to change some items, do let me know how you did it!
Matthew, does standard theme have a way to use excerpts on the front page automatically? or do I have to use the excerpt field on the post page?
It does not do it automagically, there are plugins out there that can do it for you though. I think it’s called advanced excerpt.
As for Standard Theme though you need to remember to use the <--more--> tag where you want it for the excerpt to show.
well that’s almost automagically :-D thanks bud
No problem brother, glad I could help out!
Ive had issues with advanced excerpt, although I can’t remember what the problem was now. I use one that’s built into my theme right now, but I hate how it wipes out all the formatting of the inside post and just presents it as a blob of text.
FYI – If you;re using the WYSIWYG editor to make your posts, you can use the page-break icon to insert the break instead of using the excerpt box.
Alt Shift T is the shortcut about which this tip is on. It looks like a dotted line on the right side of the toolbar. This is obviously for Standard Theme users.
Love it. Looks great.
Thanks man, did you decide to spice it up on your Standard Theme?
Sure did. I really like the look of it.
Good stuff, glad you like it, I am very picky about small details like that. Plan on sharing more in the coming weeks!
I am going to give this a spin once I have some more time.
I am indeed a lover of the more tag and want to customize it some more.
Check mine out :-D
Looks great man, try and center it horizontally if you can.
within the rounded box itself or the post?
the rounded box itself not the post.
I tried some more… ellipses makes it hard…
Try this- padding:8px 6px 6px 18px;