Thesis 2.0 Guide – Getting Started Part 3 – CSS Editor Overview

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

Thesis 2.0 Getting Started Part 1 Site Options

and the HTML editor in

Thesis 2.0 Getting Started Part 2 – HTML Editor

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.

A typical wordpress plugin almost always comes with extra stylesheets and JavaScript, sometimes lots of them. Each of these equates to a HTTP request, the more requests the longer it takes to load.

You ready?

Let’s begin!

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

Reference Sheet

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.

Packages

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.

Variables

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 $.

box-shadow: $shadow;

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

CSS Selector

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.

Proceed to: Thesis 2.0 Part 4 – CSS Editor – Single Element Styles
Don’t have Thesis check it out here

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

12 comments… add one
  • Aernout Oct 11, 2012, 9:25 am

    Great work! One question though… How does the custom css relate to the css created via packages? In one particular instance I found that adding a particular class via the “additional css” for one package stops a javascript from running, while adding that same snippet into custom css makes the javascript work again… The javascript adds a class of fixed to an ID, when the visitor scrolls down the page.

    I ask, 1. because I haven’t yet been able to make other javascripts work, regardless of where I put the applicable css and 2. because I am also unable to have other snippets of css do their work ‘on screen’…

    • Matthew Horne Oct 11, 2012, 12:29 pm

      The custom CSS works in the same way as thesis 1.x except it goes to the single style sheet, if you prefer to code everything then that is the place to do it. I will be mentioning that on the final part of this guide. But I would like to encourage users to use the packages over the custom.css as they are much better once you get the hang of them.

      Head back to the HTML guide I missed a major part out and updated it, about where to add JavaScript.

      Thanks

      • Aernout Oct 12, 2012, 7:07 am

        Thanks!
        With your advice, I’ve been able to make it work.

        Super!
        🙂

  • sybille Oct 26, 2012, 1:16 am

    Matt, please help – I am stuck

    I am trying to put a standard (non-clickable) header image on my front page, and the same image, but clickable, on all my other pages. But the non-clickable image is on ALL pages, how can I change this to the above?

    The question is:
    How do I delete the non-clickable header images where they don’t belong, and how do I replace them with clickable header images?

    Do I need to create a box for each of the images and
    Do I have to create a new package for each of these?

    greetings from tropical Bali

    • Matthew Horne Oct 26, 2012, 1:23 am

      If you have a front page and blog page, as in seperate, then you can edit the front page seperately to other pages.

      If your blog is the home page then you will need to create a template specifically for the page that you dont want the logo to be clickable.

      There is no need to create a new package for each.

      You can use my logo box. Which you can download from the sidebar.

      I will look in to adpating the box to allow you to not link on certain pages by id.

      But it will be a few days.

  • Dan Nov 7, 2012, 8:33 am

    Would you consider doing a tutorial on how to create a nav menu and how to include google custom search and social media buttons on it? I see a lot of people asking about how to do this and you may be one of the few people who know how to do it. Thanks.

    • Matthew Horne Nov 7, 2012, 12:38 pm

      I certainly will, just clearing up some work then back to writing.

  • SEO Feb 8, 2013, 3:20 am

    Using some of the important widgets for web development is one great way to maintain some good designs that you have. This simply be a good ideal to use in all of your web development programs.

  • Charles Apr 1, 2013, 7:58 am

    Hi, great massive post. Do you have a post where you explain how to have a separate landing page with a different width than the posts or pages?

    • Matthew Horne Apr 1, 2013, 8:02 am

      Not at this time, but the way to do that would be to create a new template, copy a template that is similiar to it, then swap out the main container, columns and post box, then you can add new ones and change the class, and the style it accordingly.

      • Charles Apr 2, 2013, 6:49 am

        Thesis 2 got me depressed for 2 days str8! But I finally got it. I now got the landing page template I wanted. Thanks a lot for the quick reply, Matt.

        • Matthew Horne Apr 2, 2013, 6:55 am

          Yeh, its a psychological thing, your used to something, then a new method is introduced and your lost, but once your brain re-adjusts you understand it and then carry on as normal, you can do a million more things with thesis than any other framework out there for wordpress.

          I have tonnes of stuff ready to go for thesis 2.1 all designed to make it even easier, 2.1 is alot easier than 2.0 I assure you of that, I will be writing up some info on the changes, as well as pushing out some boxes that I have made ready to go, and updating all other boxes.

          It still early days, but eventually you will be able to pick up anything you can imagine for thesis form either myself or other devs and just drop it in place, specify a few options and save, CSS will be provided to kick start the box etc..

          Thesis grows on you and once you get it, its pretty hard to go back. lol

Leave a Comment