Alternate Styles

Tarski includes three alternate styles by default: classic, polar and skyline. These modify the basic stylesheet, mostly tweaking colours. Adding your own custom styles is essentially a simple process, although advanced CSS coders have used it to make impressively complex modifications.

It’s important to note that doing this requires a reasonable knowledge of CSS. If you create an alternate style instead of editing the main stylesheet, your changes will be preserved when you upgrade Tarski.

Adding an alternate style

Adding an alternate style is quite simple: just save your custom CSS file and upload it to the wp-content/themes/tarski/styles/ directory.

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.

If you want to use one of the alternate styles that comes with Tarski, as well as having personal tweaks, you can just copy the content of that alternate style and change the body classes as described below (for example, from body.polar {} to body.example {}).

File names

Alternate style file names must consist of a valid CSS identifier followed by .css. So for example, custom.css, custom-1.css and MyCustomStyle.css are all valid style names, but 3style.css and mycustom.style aren’t.

In addition to this, custom stylesheets cannot be named any of the following things, as the corresponding CSS classes are used internally by Tarski.

  • janus.css
  • centre.css
  • rtl.css
  • js.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 (in the main Tarski directory) to see what rules control the presentation of the theme.