Migrate Away from CSS Packages

This page is part of the Tutorials: Maintaining Thesis Standards documentation.

CSS Packages are deprecated as of Thesis 2.1, and they will be removed from the core in 2.2. Because of this, you will need to eliminate their use in your Skins sometime before the 2.2 release (no ETA yet).

Specifically, if you’re using a custom Skin that contains Packages, you’ll need to switch to using regular CSS + Thesis Variables (these are optional but incredibly cool).

Fortunately, it’s simple to make the switch by copying the CSS output in your current stylesheet file, and then pasting it directly into your Skin CSS (replacing whatever is currently there).

Here are the step-by-step instructions:

  1. While visiting your site, use your browser’s “View Page Source” option to find the Thesis stylesheet link in the HTML; it will look something like this:

    <link rel="stylesheet" type="text/css" href="http://example.com/wp-content/thesis/skins/classic-r/css.css" media="screen, projection" />
    
  2. Click the stylesheet link to view its source code, then SELECT ALL, and COPY.

  3. Go to ThesisSkin EditorCSS, and use SELECT ALL to highlight everything which is currently there.

  4. Use PASTE to replace the existing data with the copied data from the css.css file.

  5. Remove the CSS reset declarations from the top of the content you just pasted, i.e., the part that starts with this:

    /*---:[ Thesis CSS reset ]:---*/
    * {
    	margin: 0;
    	padding: 0;
    }

    and ends with this:

    .wp-smiley {
    	display: inline;
    }
    
  6. If you’ve made use of the Custom CSS editor prior to this migration, you should remove those declarations from the bottom of the content you just pasted. Find the part which starts with this:

    /*---:[ custom CSS ]:---*/
    

    and then remove it, along with everything which follows it.

  7. If you’ve uploaded a Thesis Header Image prior to this migration, then remove any declarations related to that from the bottom of the content which now remains in your Skin CSS. Note that the code you should remove will vary according to the Skin you’re using.

    If you’re using the Classic Responsive Skin, then look for and remove these rules:

    #header {
    	padding: 0;
    }
    #header #site_title a, #header #site_tagline {
    	display: none;
    }

    If you’re using the Social Triggers Skin, then look for and remove this rule:

    #site_title a {
    	display: inline-block;
    	vertical-align: middle;
    }
    

    If you’re using a third-party skin, you’ll need to consult its developer to determine which rules (if any) the skin adds for a Thesis Header Image, in order to know which ones you’ll need to remove.

  8. Click SAVE CSS.

  9. Once you’re sure this process has worked for you, you can begin deleting all of your existing Packages.

Note that Thesis will re-add any rules you’ve removed in Steps 5 through 7 when it regenerates your stylesheet file; so the purpose of removing them here is to prevent them from being duplicated in the final output of that file.