Thesis makes building unique, custom designs easier than ever. This tutorial will show you just how simple it is. Before we get started, however, please familiarize yourself with the basic concepts of the Thesis Custom Loop API.
Let’s start with a very basic example.
The first file you see is the one line of CSS for our basic example. We’ll be changing the body background to #000 (black). That is primarily there so we can see that we have successfully forced Thesis to regenerate the CSS.
The next file is the barebones custom_functions.php file. This is a skeleton class that will force Thesis to regenerate the CSS when the skin is initially installed. It is important to point out that this will only happen once.
- Copy/paste custom.css and custom_functions.php to your files in the custom folder (or you can download the tar ball here)
- Once you’ve installed everything, visit any page on the admin side.
- Look at your site. The body background should have changed to black.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40||
Obviously, a barebones skin class doesn’t really do much for the imagination. So, let’s take a look at a more advanced customization. Please read the notes in the code!
- Copy/paste custom.css and custom_functions.php to your files in the custom folder (or download the tar ball here)
- Once everything is installed, visit any page on the admin side.
This class does a few things:
- strips the container from the nav menu
- removes the default Thesis style.css
- excludes the default “uncategorized” category from the home page
- filters out some of the css related to the nav colors
- applies a simple CSS reset ($this->css_reset) that is now a default part of the thesis_custom_loop class
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16||