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.
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:
- Input Form’s
- Comment areas including the comment box
- Post formatting
- Layout in terms of Columns
Don’t use a Single Element Style package.
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:
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.
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 Tip – If 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.
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 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.
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.
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.
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.