Alternate Styles with Tarski

March 25, 2006 by Chris Sternal-Johnson | 18 comments

This tutorial has been superceded by the Alternate Styles tutorial. Please follow the instructions there, which have been rewritten and improved.

Ben and I keep an eye on Technorati for new Tarski installs, and one thing I’m noticing is that many people seem to be editing their Tarski style.css file to make colour scheme changes and other tweaks.

While this works, with Tarski 1.1 we offer a much nicer way of doing it - alternate styles. Creating an alternate style instead of editing style.css ensures that your changes are preserved when you next upgrade Tarski.

Doing this is really quite simple - just upload your custom CSS file to the wp-content/themes/tarski/styles/ directory. For example, on my personal blog, I’ve uploaded a file called “ceejayoz.css” with a few tweaks.

Once this is done, all you need to do to activate the alternate style is to go to the Tarski Options page and select the name of your CSS file in the “Alternate Styles” option.

What if I wanted to use (for example) the polar.css alternate style that comes with Tarski 1.1, as well as having personal tweaks? This is also easy - just create a custom style, as already discussed, and put the following code at the top:

@import url(polar.css);

Body classes

When you use a custom stylesheet with Tarski, the theme will automatically apply a class to the body element. So, if you load polar.css from the Tarski options page, you’ll get a line of code like this: <body class="polar">.

This allows you to easily override the style rules in style.css, the theme’s main stylesheet. So, for example, if you were using a custom stylesheet called example.css and you wanted to change the colour of the h3 element, you might have a rule like this:

body.example h3 {
color: #bf6060;
}

A good way to change things is to open up one of the included styles, such as classic.css, and examine how it modifies the basic stylesheet. If you want to make more substantial changes, just look in style.css to see what rules control the presentation of the theme.

Tags: , ,

18 comments

March 26, 2006 at 3:42 pm

ionfish

ionfish’s avatar

I’ve updated Chris’s post a little bit with some information about how to override the basic style with body classes. Hope people find this helpful; custom styles are the best way to customise your Tarski install while being able to preserve those changes across upgrades (which will be coming out).

May 5, 2006 at 5:59 pm

archshrk

archshrk’s avatar

I’ve begun using this theme (v1.1.1) and am having trouble including adsense code to the template. Now maybe I’m not understanding where it should go (I’ve succedded on other themes) or I should be using the constant.php instead but I’m not familiar with that method (yet). It seems that banner ads or sidebar ads would be a common feature so why is it not working?

May 5, 2006 at 6:43 pm

ceejayoz

ceejayoz’s avatar

Yes, in most cases you’ll want to be using constants.php. On my personal site, for example, you’ll see an Adsense block in the bottom of my left sidebar.

If the theme hooks aren’t sufficient, you’ll need to do some editing of the Tarski templates, just as you would with any other theme.

May 10, 2006 at 1:22 am

monkeypup

monkeypup’s avatar

thanks to this post, I used my own css sheet, and it worked great. Of course, I copied and pasted the original CSS into a new sheet, then altered it. But, hey, we can’t all be coding geniuses.

May 20, 2006 at 6:20 pm

strawdonkey

strawdonkey’s avatar

Are there any new additions to the css file that we will miss out on by using our own css? Just wondering, because I’d like to make sure I’m not missing out on any of Tarski’s new features if I’m using css that is obsolete to the tune of two versions.

May 21, 2006 at 5:05 am

ceejayoz

ceejayoz’s avatar

strawdonkey, yeah, you’ll miss out on the occasional thing on an upgrade. The next version of Tarski, for example, has the tagline show up in the header (as an option) and it’d look pretty silly without the proper CSS.

Making a custom style is so trivial in Tarski that there’s not really a good reason not to, anyways. ;-)

May 21, 2006 at 1:37 pm

strawdonkey

strawdonkey’s avatar

I’ll have a play with that at some point soon then, cheers. :)

June 5, 2006 at 5:09 am

Anthony

Anthony’s avatar

I have been playing around with a custom style and have figured out some elements including background etc. What I am trying to do is make the overall background a different color than the area where the text is contained in the middle. Any hints would be appreciated.

By the way love the theme!

June 5, 2006 at 6:03 am

Marc

Marc’s avatar

I have installed this theme (ver 1.1.1) and have a question regarding the gravatar.

1. How would I go about reducing the default size to approx 25px square?
2. Also for commentors that don’t have a grav how would I insert a default grav of my own design?

I am familar how to do this on comment templates that don’t use “if function exists” unfortunately you have used the correct way to code your template and it has stumped me how the add the two features outlined above.

Thanks.

June 5, 2006 at 10:37 am

ceejayoz

ceejayoz’s avatar

Anthony, you’ll want to give the body tag one background colour, and the #wrapper div another.

Marc, change the gravatar size via the plugin options page for Gravatars. You can specify a URL to a blank avatar of your choice there, as well. Neither should require editing the Tarski code itself - it’s all plugin configuration.

June 6, 2006 at 2:42 am

Anthony

Anthony’s avatar

Got it to work thanks for info.

Also thanks for adding the tagline.

June 7, 2006 at 8:26 pm

Sean

Sean’s avatar

two questions.

1) is it possible to change the font size of the text in the sidebar? not the headers… just the normal text.

2) is it possible to make it so that the header image only shows up on the homepage… so, if you’re looking at a page or a single post, there is no header image.

thanks a lot.

June 7, 2006 at 10:11 pm

ceejayoz

ceejayoz’s avatar

#1 is possible via an alternate style. You’ll need to know a little CSS to do it.

#2 is possible, but you’ll need to edit the header.php file directly. You’ll want to do this:

< ?php if(is_home()) { ?>
EXISTING HEADER IMAGE HTML
< ?php } ?>

June 8, 2006 at 4:10 pm

Sean

Sean’s avatar

cool, i do know a little CSS… thanks. i’ll just play around with it and figure it out.

thanks for the header tip.

if you’re interested, take a look at my mod of Tarski.

seanmcdonald.ca