[Solved] Styling the “read more” in wordpress. Won’t work!

[Ranger]

Hey, despite my long description of the problem, I think this should be a simple issue to fix.

I’ve tried and tried and searched and searched, so now I come to the CSS tricks forum…
I’m simply trying to stylize the “read more” (or whatever, I’ve changed it to “Read On…” link in my wordpress theme.
I’ve successfully changed the text to read what I want, but I cannot for the life of me find a way to stylize it with CSS.
I’ve tried:
defining the “more-link” class in my .css.

.more-link {

font-family: "American Typewriter";

color: green;

padding-left: 50px;

background: black;

}

supposedly “more-link” is a class already created by wordpress that I should be able to customize. and when I look at the element with Firebug it shows the element as a link with the class of “more-link”

Read On...

but the link’s style will not change. it only uses the defined link style used by all other links.
I’ve also tried adding a span tag to the link, as in

Read On...');?>

and then try to style that class in Css…

.more { font-family: "American Typewriter";

color: green;

padding-left: 50px;

background: black; }

but to no avail. I cannot override the global link styles. and i’ve tried adding stuff to the class name in css like: “a.more-link” or “more-link a”, “a.more” “span.more” “span.more a” etc.. and every combination i could think of.

my blog is… Ryan Gregson Web-Log
if you can help me with this little but frustrating problem, that would be great, thanks!

[TheDoc]

Quick tip: If you are using id’s on your divs, there should only be one of them. If there are multiple divs that need to be styled the same, they should be classes, not id’s.

For example, you have multiple div=”post-meta”.

Now onto the problem at hand! I’m afraid I can’t replicate your problem. If I paste that exact code into your CSS file via Firebug, it works perfectly fine for me.

Also, your header background and your content backgrounds don’t lineup. To change this you’ll need to do two things.

Locate #topthing in your CSS file and:

1) Remove the width of 1350px
2) Change the background to: background: url(images/topback4.png) top center no-repeat;

Then it will line up properly.

[Ranger]

yeah, the post-meta thing was next on my list to correct. (I corrected it just now) that’s left over from a previous design, when i knew even less then i do now. And thanks for the alignment tip!
but, unfortunately, that leaves me with my original problem. Anybody have any ideas?
also, Doc, when you say you copied that exact code into my CSS, what code exactly are you referring to? maybe it’ll help if I know exactly what should work.
thanks for your help thus far.

[Ranger]

Found it! It was a damned missing bracket in my CSS! thanks for the help, Doc.

[TheDoc]

“And thanks for the alignment tip! but, unfortunately, that leaves me with my original problem. Anybody have any ideas?”

What original problem are you referring to?

[Ranger]

“the problem at hand!” as you referred to it. the problem with the read more link not styling. but no worries, it’s fixed now! (except, now i can’t seem to get it to not overlap the previous text, but that’s another story.) Thanks again for your help.

[Author]

Posts