This guide will focus on the CSS editor found in the skin editor option. If you have been following this series you will know that we have already covered the site options in
and the HTML editor in
Recommended reading for anyone wanting to fully understand the Thesis 2.0 options.
So now we need to take a look at the CSS editor to help you understand all the options available to you. I warn you this is quite long, but by the end of it you will see how all the options come together to display your website the way you intended it to on the Fastest and most efficient framework out there.
The CSS editor is like nothing you will have seen before and for some it might be a little confusing simply because it goes against your own expectations. But trust me the way in which this editor works is simply genius.
This is the best way to compile a single CSS style sheet, so instead of having mountains of HTTP requests get all the components requires to display your site you simply have 1 style sheet, which means 1 http request, which means a faster loading site.
Once more boxes are released and their associated packages you will be able to drop almost all your plugins.
The Ultimate CSS editor
So at first you might be thinking WTH? but rest assure it’s a lot easier than it looks. The reason you might be thinking what your thinking is because this goes against your perception of what a CSS editor is. Traditionally themes that offered a CSS editor would provide a text area for you to add your CSS which in turn would be load in a custom file. Or you would have to edit the themes stylesheet directly. Some themes offered some options to change fonts, colors etc, but nothing is more empowering that the Thesis 2.0 CSS editor.
This editor gives you the ultimate level of control over your CSS and you can do some great things with it.
We are going to look at all the options, and I mean all of them, don’t ask me how long this took to write but I assure you it’s worth doing it if it helps you.
A quick look at the different sections of the CSS editor
This is where you reference your CSS packages and they always start with &.
This is what allows Thesis 2.0 to maintain a single stylesheet because each time you hit the Save and Compile CSS button it rebuilds the stylesheet which for me as someone that takes Optimization seriously is crucial for my site and it should be for yours.
Remember people, a fast site converts much better than a site that almost cripples the server on load.
I like to keep my CSS stylesheet tidy, so when I add a new reference I place it in the most appropriate place according to where in the html editor it loads.
To the right you will see the Packages. Each package can be edited via its own options but take note, the orange colored text with the &. This is the reference and what you must add to the reference sheet in order for it to be compiled.
You can create as many packages as you want, but if you don’t add it to the reference sheet it won’t do jack.
I love these variables and you will too.
Variables allow you pre-define some CSS. So I use Box shadows throughout my site, so instead of having to write this over and over.
box-shadow: 0 0 12px rgba(0, 0, 0, 1);
I would create a variable and add the values to it i.e.
0 0 12px rgba(0, 0, 0, 1)
Give it a reference, in my case I called it shadow and then all I have to do is when I’m editing my packages, reference the variable like so.
The variable will always start with $.
It’s a lot easier than remembering all those numbers above. Plus, image if you used something 50 times and needed to change it, it would require you to change all 50 of them.
With a variable you change it once.
We will talk more about variables further down in more detail.
More about Packages
Now that we know what a package is we are going to go through all the options that are available to you.
When you open up the package options the first screen available to you looks just like this.
The package tab allows you to define:
- Name – which displays on the package item in the main Editor, see below.
- Reference – the name of the reference will also display on the package item. Note that when you type your reference, you do not need to add the & as this is automatically added for you.
- CSS Selector – this is what links all the CSS options contained in your package with the HTML box.
This is a package item
This requires further explanation to show you just how the HTML box links back to the CSS package. Go back to your HTML editor and Open up one of the boxes options.
You will see the follow.
So if you remember from the previous series we talked about these options.
The two areas here:
- HTML id
- HTML class
are the bridge to the CSS selector.
So in your CSS package you would copy the name over to the CSS selector box.
The only thing you need to remember is that for a class you would put a ( . ) before it and for an ID you would use a ( # ) like so.
class = .name
ID = #name
If you do not add the CSS selector to the CSS package then there is no way for the CSS package to know that it is relevant to that particular Box.
Note – Some selectors do not require a ( # ) or ( . ) such as a for <a href=””></a> which would be for a link, or body, which is for your overall body of your website.
Types of CSS Packages
Currently there are 8 types of CSS packages that you can create via the drop down menu.
Each type of package comes with pre-defined options suitable for the type of box it is intended to be used for.
Here is a simple list to show you what each would be used for, i know some seem obvious but here it is anyway.
- Single Element Style – Used primarily for new containers which you can see when you create a new box via the drop down menu in the HTML editor.
- Links – Used to target links such as the titles of your posts on the home page, categories, tags etc at the bottom of posts, basically everything that uses the selector (a).
- Horizontal Dropdown Menu (WP) – Used to target Menu boxes only, the CSS options available in this type of package are specific to the complex structure that menu’s present, so always use this type of package for any menu. If you have ever styled a menu from scratch you will know how complex it is with the various levels the menu goes in to, such as sub menu, then a child menu of the sub menu etc.
- Post Formatting – Used for posts and pages, this type of CSS package contains all the relevant options required for formatting your content such as font sizes, color, titles etc.
- Columns – This CSS package is used to styling the structure of your columns, it comes with all the options you need to format your site where multiple containers are are going to site next to each other, including selecting the number of columns and the individual widths for each column.
- Comments – The options contained in this package are for styling your comments area. You can style the author comments separately as well as nested comments easily with this type of CSS package, a major time save if you have ever styled comment boxes before.
- Form Input – This is to style input area, such as your comment form, when a user clicks on a text input area you will notice subtle changes, most people don’t know how to do this, but using this package makes that super simple.
- Widgets – This package is used to style your widgets, the great thing about this package is that in the HTML container you can create different widgets and assign a different class and style your widgets individually with ease.
Each of the above have specific CSS options that are perfect for targeting the respective group, as I said some HTML structures like menu’s and comment areas are a pain to style because they have multiple levels.
Thesis 2.0 takes all that hassle away making it super easy for the average user and developers alike, that means for me, it takes 5 minutes to style these HTML structures whereas before it might of taken an hour or more in some cases depending on the complexity.
I hope this helps you better understand the CSS options in terms of what each section is for. This is a general overview. Stay tuned for more about Variables, all the different options and what they mean and do.