How can I change the css of a post along with the theme?

January 14, 2009 5:32 AM

Using Wordpress, how can I call CSS for a post from a specific file, rather than having the CSS embedded within the post?

Situation: I write a post, and have some text highlighted in a certain colour that matches the theme (for example). When I change the theme, the colour of the text no longer matches.

Idea: use a .css file for each theme that contains the CSS for the posts, and call the necessary font colour/size etc from that, instead of having it within the post itself. Sort of like a theme for posts, instead of the whole site. When the theme changes, I can quickly change the post .css file to the correct one, and have the changes reflected in the posts when they are viewed.

Problem: I have no idea how to do this. I have a vague idea of how to create a .css file, and can probably work that out. What I want to know is what to put in the post html to ensure that the correct .css file is called, per theme. At the moment, I have [span style="color: #5a008c"] - obviously with different brackets. I want to be able to have ["path to file" "correct section" "whatever"] instead, that will give me the same results as above.

How do I do that? What syntax do I need to put in a posting to make it call the correct .css file?

posted by Solomon to computers & internet (3 comments total)

AFAIK, you can't import or call external stylesheets outside the head tags.

However, you can achieve this by creating your own custom stylesheet and adding it to your wordpress installation through a plugin, like this one. Then, you just need to apply the css class to your text through span tags.

For example, you could have a custom css stylesheet with:
.highlightedtext { color: #000; }

Then, when you're editing your post and want to highlight some text, just add
<span class=".highlightedtext">text<\span>
posted by Memo at 5:57 AM on January 14

Every WordPress theme does include its own style.css stylesheet. Anytime you change the theme, you will be referencing the new theme's style.css stylesheet. You can create new styles (or just edit existing ones) and put them in the style.css file; then, when formatting a post, use "span" or "div" tags to use any brand-new styles you've created. You can make any changes you want to the style.css file either manually or through the WordPress dashboard (see Editor under the Appearance section, if you're using WP 2.7).

If there's some other reason you want to create an additional stylesheet, you create a new custom.css file and call it in your header.php file within a "link" tag (after the other CSS links). Hope this helps!
posted by lgandme0717 at 7:03 AM on January 14

I agree with lgandme. You're really going about this the hard way. If you want special formatting on, say, the B tag when it appears in a post, just open the styles.css file for the theme, and add this to the bottom:
/* my fancy hack on this theme */
.post b {
color: #5a008c;
}
Do this for each theme you use, and you're all set.

If you always want to invoke the same custom stylesheet, regardless of theme (which I get the impression is not what you want), you could install the "header footer" plugin, which will inject your custom header code into all templates. This could include something like
<style type="text/css">
/* my fancy hack for all themes */
.post b {
color: #5a008c;
}
</style>
posted by adamrice at 8:47 AM on January 14