How to Customize Semiomantics Thesis

After Basics CSS Syntax let’s look at Classes and IDs in CSS.

What are CSS Classes and IDs?

Classes and IDs are selectors whereas classes can be used multiple times in a html document and IDs only once.

Many designers use IDs for layout styling, while the class selectors are used for content styling.

Example: ID

#wrapper {
width: 960px;
margin:auto;
padding:10px;
borders:1px solid #FF0000;
background: #FFFFFF;
}

The ID “wrapper” styles the layout of the wrapper or content container. In the above example we are styling a container which is 960 pixels wide, uses default browser margins, padding of 10 px is applied and the wrapper has a red (#FF0000) border of 1 px and as well as a white background.

Note: the identifier for the ID is the number sign: #.

Example: Class

.menu {
position: relative;
list-style: none;
z-index: 20;
width:110%;
margin-left:-50px;
margin-bottom:5px;
}

The above code places a menu bar. Note the class syntax: .menu. The identifier for the class is a ‘”.” (dot).

Custom IDs and Classes in Thesis

When customizing Thesis, we typically use a custom class: .custom to overwrite the default style sheet.

Example:

.custom .teaser p { text-align: justify; }

The above overwrites the default teaser text style: the teaser text content (post excerpt) will be justified (as opposed to left alignment). Note that the custom class overwrites a default class (.teaser p).
The custom class can also overwrite a default ID, like so:
.custom #wrapper {
padding:20px;
borders:2px solid #000000;
background: #eaeaea;
}
This example modifies some of the properties of our first ID wrapper example above: now padding will be 20px, the border will be black and 2 pixels wide, the background is very light gray.

Thesis Custom CSS

In as much as the original Thesis Theme is concerned, there are two CSS style sheets to start with: the default style.css and the custom.css. This concession is made to make the theme more user-friendly, namely when it comes to editing, resetting and theme updates. However from an site optimization point of view the solution is not ideal as multiple style sheets mean multiple html requests and slow down loading time. Semiomantics customized Thesis solves this issue.