Thesis 2.0 Guide – Part 4 – CSS Editor – Single Element Styles

Part 4 of the Thesis 2.0 guide will cover all the options available to you in the Single Element Styles package. By the end of this guide you will have a complete understanding of all the options available to you in the default theme and what they do so that you can decide whether these options are useful to you.

If you haven’t read them already you can find the rest of this guide below.

Thesis 2.0 Getting Started Site – Options Part 1

Thesis 2.0 Getting Started Part 2 – HTML Editor

Thesis 2.0 Getting Started Part 3 – CSS Editor Overview

You ready?

Let’s begin!

The complete list of CSS options

When you open up your CSS options You will find a variety of options available to you and some of them you will understand clearly but some not so much, if this is the case then you will find this guide super useful and a great reference for the future.

Each CSS package comes with it’s own options and some differ from others, the first package we will look at is the Single Element Style’s Package. You will be able to see what type of package it is when you click on it and the options panel opens like so.

As you can see in Big Bold letters it says Single Element Styles.

There are a number of Packages available for you to select when create a new package but this is the one you will use more than the others. We will look at the remaining package further down but first when to use a Single Element Styles package.

To keep it simple, if the box your looking to style is one of the following or is related to:

  • Menu’s
  • Input Form’s
  • Links
  • Comment areas including the comment box
  • Widgets
  • Post formatting
  • Layout in terms of Columns

Don’t use a Single Element Style package.

Why?

Because all of the above require unique styling properties, you could use a Single Element Styles package, but you would be waisting your time. As well as pulling your hair out when it comes to say, styling a menu structure.

Single Element Styles Options

The Single Element Styles CSS package containers the following options:

Font Settings

Inside the font settings are the following options all related to styling fonts.

Font – This is where you can select the font you wish to use for the particular box that this package is assign to.

Font Size – To set the size of the font, by default it will use (px = pixels) if you wish to use anything else then you must enter the affix such as (10em).

Font Weight – This is where you set the Boldness or lightness of the font. Some fonts do not respond to some of the options here such as lighter. The simplest way to think of this, is the thickness of the font.

Line Height – Think of an A4 piece of lined paper, if you wanted your font to be 10px and you set your line height to 10px, then there would be no space between each line and that would look awful and difficult to read. In the case of A4 lined Paper, it would be the same as writing from top to bottom of each line. So Line height adds space above and below your font.

Font Style – these options allow you to set the font style which can be italic, oblique or normal. Left to default it will assume the settings of the body class. Before you ask, if you really want to know the difference between italics and oblique read this.

Font Variant – you can change your font to small caps or normal, or simply leave as default.

Text Transform – This option allows you to easily transform the text to:

  • Capitalized – This Is Some Capitalized Text
  • UPPERCASE – THIS IS SOME UPPERCASE TEXT
  • lowercase – this is some lower case text

Text Align – This affects the position and alignment of the text, typically this is left, but you can align your text right, centre or justify it. Justify means the text will span the width of the container, the text on this page is justified. So you see the nice even space left and right of the text.

If it was aligned to the left the text will all push to the left with an even space between each word. The result is in long paragraphs the right side of the paragraph would have a wonky right edge instead of the clean edge you see when the text is justified. Kinda like this paragraph and vice-versa for aligning right.

Letter Spacing – This is the spacing between each letter. By default there is no spacing. This text has a spacing of 1px.

This Concludes all the options found in the Single Element Styles Font Settings.

Below the Font Settings you will see the the remaining options.

Text Color – Simply enter the color you wish to use, you could enter this manually if you know what color your looking for or use the color wheel to find a suitable color.

Background

The background option contains all the necessary options for styling your background.

Background Color – Sets the color of the background, again if you left click on the input box, the color wheel will pop up, or you can enter the color value directly.

Background Image – If you have an overlay, or an image to be used for the background you can set it here. An overlay would be a transparent image that gives your background color a certain visual effect. Like that of my feature box on the home page.

The best way to do this is to go the images editor found at the top of your skin editor

Once inside you will see an option to upload an image.

Now here is the fun part. All you have to do is upload the image, thesis 2.0 will take care of the rest. It will process the image and give you a link to paste in to the Background Image section or anywhere you wish to use it.

The CSS Reference is what you will need. Just copy the text between the single quote and paste it in to you Background Image input box.

Quick TipIf your using an image that is one color, or repeatable, make it as small as possible, keep reading and you will find out why.

Background Position – This is the position of the background image, you can enter values such at top left, bottom right, left, right, center, top center etc. This depends on the size of the container the image will display in as well as the options below.

Background Attachment - This option allows you to set some properties for the background image.

For example if you have a specific image that is designed to display on a screen with a resolution of 1080 then you might want to select fixed and position it top center. This means it will site at the top of the page in the middle and when you scroll down it will appear as though the image doesn’t move at all. This site uses these exact properties.

The default property is scroll, there are some cases where you need to specify this and so the scroll option is there.

Scroll means the image stays where it is in the page even when you scroll down the page. So for example your logo wont scroll with the page. Confusing names I know but that’s how it is. If in doubt just leave it as default.

Background Repeat – Now remember our quick tip. If you have an image that can be repeated, or is a single color and you want to use an image, then you should make it as small as possible, make it 1×1 if you can, or 200×200.

This makes the image small, and quick to load. Then using CSS you can repeat it. My background image is 200×200, it create a subtle texture.

It covers the entire background because I repeated it, the default option for thesis 2.0 will automatically repeat on both the X & Y  axis.

Repeat-x = horizontally

Repeat-y = Vertically

and of course if you don’t want to repeat the image, for example a logo, then you would select no-repeat.

Box-Sizing

Some people have already asked me about this one, so here it is.

Box-sizing is a clever little feature that automatically re-sizes the container according the the width(thickness) of the border.

If you just add a border to a container then it will by default add it to the outside of the container.

So if our container is 600px X 300px and we add a border that is 4px then the container will become 608px X 308px. In the case of columns, this could cause your sidebar to be pushed under the Content column.

By selecting Border-box your adding the border to the inside of the box so the dimensions of the box remain at the width and height you set.

Simple rule – If you are going to use a border then you should select the border-box option.

Width – here you can set a fixed width for the box that your CSS package is associated with. By default it will use (px) if you need to specify something specific like (%) then you need to include that.

Border

Border Width – is basically the thickness of the border. To specify a particular side of your box to add the border you just need to remember this simple order of march.

10px 10px 10px 10px

Starting left to right.

TOP, RIGHT, BOTTOM, LEFT.

So if you wanted a border on the left, you would put 0 0 0 10px

Border Style – this is where you can select the style for the border. There are several styles available to you and they are as follows.

Solid

 

Dotted

 

Dashed

 

Double

 

Groove

 

Ridge

 

Inset

 

Outset

Border Color – Again you can easily set the color of the border here.

Margin and Padding

Thesis 2.0 gives you the option to add margin and padding very easily with these options.

But first to clear things up, some people get confused between the two, so here are the differences.

Margin – Added to the outside of a box or container pushing it away from whatever is next to it.

Margin left – would push the box right.

Margin right – would push the box left.

Margin top – will push the box down.

Margin bottom – will push whatever is below the box down.

Margins cannot push boxes above them up, in this case the containers itself will move down.

If you have another box next to the box that your adding a margin to, the second box will also be effected so when working out your overall width of your page, you will need to add any margin that you intended to use. Look at my sidebar, you will see that it does not sit right next to the main content area. This is because there is a small margin around it to separate them.

Padding – Added to the inside a box or container pushing the content inside away from the edges. Padding does not effect the position of the box itself.

Padding left – will push the content inside the box right and away from the edge.

Padding right – will push the content left and away from the edge.

Padding top – will push the content inside down and away from the edge. This will also increase the height of the box.

Padding bottom – will increase the height of the container as you cannot push content up. Instead it increase the height of the box.

Example use:

If you want your main container to sit in the middle of the page, like this site has, you would need to set a width for the container and then add to the left and right of the container a margin set to auto.

That means it automatically detects the size of the browser and adjusts the margin accordingly.

At the same time we may wish to push our content away from the edge, again like you see on this page and to do that you would add some padding left and right.

Thesis 2.0 easily allows you to add margins and padding to the Top, Bottom, Left and Right.

Typography: Enter Width of Text Area

If you enter the width of the text area here, Thesis 2.0 will automatically work out the best typography, i.e. line-height and characters per line for you. This complex mathematical equation is done at the click of a button when you hit the save button.

Additional CSS

Of Course Thesis 2.0 never got rid of the ability to add your own CSS if the option isn’t available for you. Just enter it here.

This concludes all the options for a Single Element Styles box. I hope this reference is super useful to you and helps you know which options to use for what.

Proceed to - Thesis 2.0 Part 5 – CSS Editor – Links Package Options

Don’t have Thesis check it out here

Thesis 2 Tutorials

Leave a Comment

Current month ye@r day *

Comments

  • Pritam Nagrale October 13, 2012, 1:55 pm

    I have tried to install Thesis 2.0 on my other blog but I am not able to understand many of the things. I am trying to learn its new interface.
    Your article is very informative & helping me a lot to customize my thesis 2.0 theme

    Reply
    • Matthew Horne October 13, 2012, 2:01 pm

      Excellent, thank you, there will be more to come and I assure you that once you get your head round this, you will love it. Good tip is to not think of it as a wordpress theme or as thesis 1.x :-)

      Reply
  • Sarah October 16, 2012, 5:26 pm

    Hi Matt, a quick question: can you tell me how I go about installing Google custom fonts using the single element feature? I am guessing it would be somewhere like Additional CSS but I can’t quite work out the semantics! So, for example if you look at Google fonts (URL: http://www.google.com/webfonts#UsePlace:use/Collection:Raleway+Dots|Special+Elite|Nixie+One|Codystar:400,300) these are the 3 I want to use and it says I should just be able to insert this code somewhere?

    font-family: ‘Raleway Dots’, cursive;
    font-family: ‘Special Elite’, cursive;
    font-family: ‘Nixie One’, cursive;
    font-family: ‘Codystar’, cursive;

    Thanks, Sarah

    Reply
    • Matthew Horne October 16, 2012, 5:43 pm

      You would also have to add the link to the head

      Reply
      • Sarah October 16, 2012, 6:02 pm

        Thanks, Matt, where should it go in the Head elements? Most of it is locked within the Thesis dashboard – ‘Stylesheets’ is not editable… so I have just cut and pasted the link into ‘Scripts’ as follows but to no effect:

        Reply
        • Matthew Horne October 16, 2012, 6:15 pm

          Did you save the script using the save button for the script box and then save the head via the top right save button?

          There may be a filter in place to prevent anything but from being printed to the html.

          Reply
          • Sarah October 16, 2012, 6:24 pm

            Yep, saved it. I pasted a load of javascript inside script tags as directed by Google fonts, then I put the CSS code in the additional css bit of the body package, nothing is happening. I have been googling this – I just basically want to know how to install custom fonts in Thesis 2.0 and it doesn’t seem as though anyone’s provided an answer out there yet… is it even possible? Have you managed to get it to work? Thanks for your help.

          • Matthew Horne October 16, 2012, 6:29 pm

            when you add the font to aditional css you would have to target the css class.

            Example, if i wanted to target my post titles.

            .post_box h1, .post_box .headline {font-family: ‘Raleway Dots’, cursive;}

            Aslong as the font is defined in the head, with a link, or via the javascript they offer.

            Also re-type your single quote in the additional css, if you copy from here it wont be correct as this is standard text. single quotes in css and js, are different from their text variant.

  • Sarah October 16, 2012, 7:14 pm

    Thanks, Matt, great help – I wasn’t sure what you meant but then I clicked on the comment CSS package and I could see the equivalent under ‘additional styles’ – from this I customised my way around. Cheers!

    Reply
  • David October 22, 2012, 4:25 pm

    This site looks so cool when you remove all the odd box-shadows. Clean and elegant, the box shadows look strange.

    Reply
    • Matthew Horne October 22, 2012, 4:47 pm

      I’ll give it a shot and see what ppl think.

      Reply
  • Lorenzo October 23, 2012, 6:38 pm

    Hi Matt,
    Great job on providing a clear explanation of the major features of Thesis 2.0. Best I found so far :)

    As someone who really enjoys using CSS I’m still torn whether or not to use the CSS Options. Are you going to use them over traditional CSS coding? What are the benefits of using the Thesis CSS options?
    Thx

    Reply
    • Matthew Horne October 23, 2012, 6:56 pm

      Hey thanks, I am using them over traditional CSS, but thesis 2.0 gives you the option to use both which I do. Variables are also a powerful tool, im writing about them at the moment, the way that thesis deals with CSS is cleaner and there is less junk or redundant CSS which is often found when a seperate CSS style sheet is used.

      Reply
  • Dan November 5, 2012, 1:53 pm

    Love the great info you are giving. Keep it up.

    I do have one question for you though that is driving me nuts.

    After each of my H1, H2, etc subheadings, I can’t seem to add a space. So, the next paragraph is bumped right next to the subheading without any space. I can’t seem to figure out how to make the spacing the same as between paragraphs. Any thoughts?

    Reply
    • Matthew Horne November 5, 2012, 1:56 pm

      You would need to add some padding below the text or margin.

      Reply
      • Albert August 30, 2013, 7:17 pm

        How would you do that in thesis 2?

        Reply
        • Matthew Horne September 4, 2013, 10:58 pm

          The 2.1 is phasing out packages in favour of custom styles. Thesis looks set towards skin bases templates with new options api that allows developers to build skins with predefined options similar to that of 1.8.x but far more flexible.

          Reply
  • Bruce November 5, 2012, 9:44 pm

    I just started using Thesis, and started out with Thesis 2.0, I’m starting to get the hang of it and figure things out. The problem that I’m having is probably very simple, I’m trying to change the font color on my site title in the header. I can’t seem to find where this is being controlled, it doesn’t matter if I change the color in the site tittle or the header css packages. Can you help me figure this out?
    Thanks,
    Bruce

    Reply
    • Matthew Horne November 5, 2012, 9:48 pm

      Inside addtional CSS for the site title you will see something similiar to this

      #site_title a { color: $c1; }
      #site_title a:hover { color: $links; }

      You can edit those to change the title color.

      Reply
  • Belut January 16, 2013, 4:44 am

    How to remove all borders on thesis 2.0?

    Reply
    • Matthew Horne January 16, 2013, 5:38 am

      Try

      * {
      border: 0 none !important;
      }

      Reply
      • Belut January 16, 2013, 4:10 pm

        thanks, thats work. but there is one border left between content and sidebar, im using 2 columns. can you check it on my blog: belutthegreat.com

        Reply
        • Matthew Horne January 16, 2013, 5:53 pm

          Look in CSS editor, columns package, additional CSS. There is a background image that produces that line.

          Reply
          • Belut January 17, 2013, 7:12 am

            thanks Matt, you are awesome!

  • pam February 20, 2013, 1:51 am

    If only this worked… I have been making changes in the body package, I save them, I save the overall CSS. No change to the font size.

    What do you do if you change the body font size in the body packages, save that, and save the css, and your pages don’t change? Other changes take – I can change colors, padding, everything but the font sizes, especially the body copy.

    I am going crazy trying to control the most basic part of my pages: the size of the body copy in the mail column. Please advise on what I need to add or change and where to control that setting.

    Thanks for your help.

    Reply
    • Matthew Horne February 20, 2013, 6:27 am

      I think you may have a font set on something else, if you have no fonts set at all, and you change the body font, that will change all fonts, but say you have a font set for post box, then the body class wont affect those particular fonts.

      Reply
  • Guest March 15, 2013, 3:09 am

    Hey thanks for this post. It’s been extremely helpful for changing my H1 tags. I’m still a bit confused though. I want to be able to change the H2 colors in my posts. How would I go about doing that?

    Reply
    • Guest March 15, 2013, 3:12 am

      Ah nevermind I got it. Thanks!

      Reply
  • Raj April 29, 2013, 2:53 pm

    Hi Matthew,

    I am trying to set my header width the same as my posts. At the moment, it is doing the full width of the page. How do I change it?

    And I would also like to have the post title similar to your site, in a box with a background colour and text in white? Can you provide the steps? My site is http://goo.gl/YrxpL

    Thanks,
    Raj.

    Reply
    • Matthew Horne April 29, 2013, 4:02 pm

      Hi Raj, so for the header, you should put the header inside the container or set the header width the same as the container at 1050 like so.

      #header {
      width: 1050px;
      }

      for the headline area, use something like this

      .headline_area h2 {
      background: none repeat scroll 0 0 #CC0000;
      padding: 10px 20px;
      }

      h2.headline a {
      color: #FFFFFF;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      }

      That will add the text color, shadow and background color, can change colors as needed.

      Reply

This site rocks the DIYWP Optimized Skin for Thesis & is hosted by Webhostingbuzz