This is the tutorial 5 in the series of tutorials on thesis. Here we explore some design elements such as the small little banners that we have in this website. It would be advisable to go through the other tutorials (Part 1 / Part 2 / Part 3 / Part 4 ) in this series before attempting this one if you need more basic information. People with knowledge of CSS and PHP can jump right in!

We will cover the following sections in this tutorial -

1. Using the browser to understand the page structure
2. Creating the custom function to display the different ribbons according to the category
3. Writing the CSS styles to place the ribbons inside the ‘post’ container

You must have seen many a website or blogs that have nice little “Ribbons” and “Flags” on the posts, these ribbons are also customized such that certain category of posts will have certain type of ribbons. Lets learn how to do this!

Thesis has it’s own framework of displaying all the elements in the web-page, and the easiest way to customize it is by using the custom.CSS and custom_functions.PHP. But first let us understand how to how to understand the existing structure (or markup in development terms) of a web-page.

1. Using the browser to understand the page structure

We are going to use to check the existing structure markup. Open up the page in the browser and right click on the page, preferably near the element that you want to look at and choose “Inspect Element” .. What then happens is the bottom part of te browser slides up and shows the complete code of the current web-page. When you click on the different elements in the code window or the web-page window, it highlights the respective element in the other window. So by browsing the code window, we find that the actual post resides inside a div called content and inside that there is a div with many many classes and we will use just one of the classes called post. (click for bigger pictures)

 

So, now that we have found out where the ribbon must be placed, we go ahead and create a function to display the ribbon. We will do just that next.

2. Creating the custom function to display the ribbons.

The following is the function which we will use to display the different ribbons according to the category. Explanation given after the code -


function ribbons_for_posts() {
if (in_category(4)) {
echo "";
}
if (in_category(6)) {
echo "";
}
if (in_category(8)) { echo "";
}
if (in_category(10)) { echo "";
}
}



add_action('thesis_hook_before_post', 'ribbons_for_posts');


Explanation -

• We first create a function called ribbons_for_posts
• We check if the category is ’4′ – You can either provide a category number, or you can also provide the category name in this case – ‘news’
• If it is category 4, then we create a span element within which we display the ‘news ribbon’
• You need to supply the links to your ribbon in between click here to learn about img tags

A span element is just like a div element as it is a container, but unlike div it is an in-line element, in simple terms, a span will NOT start a new line, whereas a div will start a new line

• We check if the category is ’6′
• If it is category 6, then we create a span element within which we display the ‘news ribbon’
• We also link this particular ribbon such that when clicked upon it will goto the respective category page.
• Explanations of category 8 and category 10 are similar to that of category 6
• We then execute this action inside the HOOK called thesis_hook_before_posts - so that the function is executed inside the post div right at the top

So, now we have our function ready – which should be added to the custom_functions.php file. Let us now style these ribbons.

3. Writing the CSS styles to place the ribbons inside the ‘post’ container

You should understand the concept of relative position and absolute position in CSS to understand how the styling is working here. I will trying to explain briefly -

When you try to position an element using position:absolute then you can specify exactly where you want the element on the page in term to the nearest outside element which has a position:relative style. If there are not elements which have position:relative then the element that you are trying to position using postion:absolute will be placed relative to the web-page. Look at these two images to understand better – (click for bigger pictures)

 

 

Note : If you notice in the second image – the div container has the postion as relative so the smaller div is postioned relative to the div container. I really hope its clear!!

So we have the following CSS code for the div with class post and the span which has the ribbon / flag image inside it. Explanations are in the code as comments i.e. between /* and */.


/* == STYLING FOR POSTS == */
.custom #content .post {
background-color: white;
margin: 12px 0 0 0;
padding: 10px 10px 10px 10px;
border : 1px solid #a4a8a7;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
/* EVERYTHING ABOVE THIS PURELY DEPENDS ON HOW YOUR WEBPAGE IS STYLED */
/* THIS IS THE ALL  IMPORTANT CODE - WHICH GIVES THE POST DIV POSITION AS RELATIVE */
position: relative;
}



/* == RIBBONS FOR POSTS == */
.custom #ribbon {
position: absolute;
left: 533px;
top: 58px;
}


 

Hope you enjoyed this tutorial!! If you have any questions at all – feel free to post it in the comments and I’ll get back to you!

Check out the other Thesis tutorials in this website -

Thesis tutorial part 1 : installation of the Thesis theme

Thesis tutorial part 2 : learning about customizing

Thesis tutorial part 3 : HOOKS + custom function (Footer Text)

Thesis tutorials part 4 : custom footer + CSS styling

Thesis : how to change the excerpt size for teasers