When you’re working with pre-made Thesis Skins (instead of your own Skin which you made entirely “from scratch”), it’s important to follow some key rules, not only for the sake of efficiency, but also to ensure that the changes you do make are as “future proof” as possible.
- Disable any caching plugins before making design changes.
- Use Skin Content and Skin Design options before the Skin Editor.
- Never edit the css.css file directly.
- Don’t make changes to the Skin CSS.
- Don’t modify existing CSS Variables.
- Understand the nature of HTML and CSS design.
- Make regular backups of your Skin Data.
Let’s explore each of these rules in more detail.
Disable Caching Plugins
Caching plugins have a very specific purpose: they create a static version of any given page on your site the first time it is viewed, and then they present the same copy of that page every time it is visited again, until the cached copy either expires, or you flush the cached copy from the plugin’s “memory”.
So, if you’re trying to make design-based changes to your site, you most likely will not see those changes when viewing your site, because your caching plugin is still showing you the stored copy of the page which it created days before.
But, since it’s tedious to have to continually flush the plugin’s cache after every single change you make, the smarter thing to do is flush the cached files and then just deactivate the plugin altogether while you make your changes.
Once you’re done with your design work (for that day, at least), you can simply reactivate the plugin.
Use Skin Content and Skin Design Options First
It’s always preferable to use an option which has already been provided for you by the developer than it is to make changes using the Skin Editor (say, by removing Boxes from Templates), so be sure to check out what’s available before tearing things apart unnecessarily.
Let’s say you don’t want to display the Site Title on your site. So, you check first to see if perhaps the developer created an “on/off” checkbox option for the Site Title under Skin Content. For example, the Classic Responsive Skin provides just such a Display Option, and you can access it by clicking the “Site Title & Tagline” object (which resembles a button) after accessing Skin Content.
Or, maybe you want to change the primary font which is used for the site: you’d check under Skin Design to see if there’s already an option to do that. Using the Classic Responsive again as the example, it provides an option for this inside the “Font & Size (Primary)” object under Skin Design.
So as you can see, there can be quite a few built-in options tucked away within these two screens, and you’ll want to spend some time getting to know them, clicking around on each of the objects so you can see exactly what’s there for you to use. (You can even pretend to make changes while you’re doing this; as long as you don’t click the Save button on the screen, you won’t be “breaking” anything in terms of how the Skin looks by default. But if you do inadvertently click that button, then you can always restore the default Display or Design Options.)
It’s also important to note here that if you’re using a third-party Skin (i.e., one not created by DIYthemes), then it may not necessarily include Skin Content and Design options: it could include neither of these, or only one and not the other. (It also may not necessarily include other options which would otherwise appear in the Skin Menu, such as a Header Image or Logo.)
Never Edit the css.css File
This is one of the most common mistakes made by those who are coming to Thesis after having used other WordPress themes for a while.
Most WordPress users have learned that the way to make stylistic changes to their sites is to edit their theme’s
style.css file. So, when they start using Thesis, they translate that learned concept into “editing their skin’s
But here’s one place where The Thesis Difference comes into play. The
css.css file isn’t meant to be an editable file; rather, it’s a generated compilation of the data from the Skin Design, Skin CSS and Custom CSS screens — which means any time you click the Save button on one of those screens, whatever is currently contained within the
css.css file (including any changes you might have made to it by hand) will be completely overwritten by Thesis.
So, hands off the
Don’t Make Changes to Skin CSS
If you want or need to make CSS-based customizations to the Skin that you’re using, then the proper place from which to do that is the Custom CSS screen.
Skin CSS (housed within the Skin Editor) is where the Skin’s developer has implemented all of the core styles for the Skin, and thus, is subject to being changed in future updates to the Skin.
By contrast, Custom CSS is where you, the end user, are expected to be doing all of your own style customizations, and thus, it’s protected during future updates.
So really, the only time you’d every really need to use the Skin CSS screen is if you wanted to create some CSS Variables that you can use in your Custom CSS; otherwise, it’s best to just avoid going there at all.
Don’t Modify Existing CSS Variables
Most of those who are new to Thesis and its Skins system don’t realize that a Skin’s developer may have relied on CSS Variables to “connect” the Skin Design options and the Skin CSS. For example, the developer may have wanted to make it possible for you to change your site’s background color from the Skin Design screen, so she created a variable named
$bg1 and used it as the value for a background CSS property applied to the body tag.
If you go to Skin Design and change the site background color there using the option the developer provided, the CSS Variable (and thus, the Skin CSS itself) will be automatically updated with your new color choice.
But let’s say that instead of using Skin Design, you figured out what the
$bg1 variable was being used for, and decided to change the color value right inside the CSS Variable edit screen.
All’s well until the next time you visit Skin Design to make another change of some sort, and you click the save button there; once you do that, you’ll find that your site’s background color has now changed back to the value that’s set for it under Skin Design — because Thesis automatically updated the value of the
$bg1 variable again, using the original information from Skin Design.
So it’s best to avoid touching any of the pre-existing CSS Variables. (But of course, if you want to create new CSS Variables for use in your Custom CSS, as mentioned in the last rule, then that’s perfectly fine to do!)
Understand the Nature of HTML and CSS Design
If you do decide to make direct edits to your Skin’s Templates by moving their Boxes around (or removing them altogether), you must keep in mind that doing so is not always a “risk free” proposition. A Skin’s CSS is meant to work with a specific HTML layout to achieve a particular design, and rearranging or removing Boxes may prevent that CSS from being applied as intended by its developer.
So, if you move a Box and find that things don’t look quite “right” anymore, you’ll need to either put the Box back where it was originally, or be prepared to use some Custom CSS to accommodate the change that you’re trying to make.
Make Regular Skin Data Backups
You simply can never predict when something will go wrong, so you should make backups a regular practice (and that applies to your WordPress installation as a whole, not just your Thesis-specific data).
Thesis provides you with a Skin Manager which allows you to easily create and export a backup of your Skin Data, so you’ll want to take advantage of it whenever you start making design-based changes to your site. Make a backup before you make any significant changes, and make one again after you’re done.