Build Your Own Business Website header image

How to Customize the Post Box in Thesis 2.1

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

In this seminar we look at a significant restyling and reorganization of the Thesis Post Box. This involves a bunch of very simple CSS concepts as well as a more advanced concept – floats. We start by looking at the html structure of the sample site and discuss strategies for imitating it in the current site. Next we take an in depth look at the float property as a tool for arranging various elements in the post box. Then we style the resulting structure. Finally, we make adjustments to our media queries to make the whole thing responsive.

Map Out the Post Box HTML Structure

  • Look at target structure
  • Look at Agility Structure

Align the Image and Text with the Float Property

  • understanding float

Style the Post Title

  • Font Style
  • Border

Style the Featured Image Thumbnail

  • set the thumbnail image size
  • border
  • padding
  • background color

Structure the Footer HTML

  • remove class
  • remove structure
  • add date
  • add category
  • Add social networking

Style the Footer

  • background color
  • border
  • clear the float

Align Social Sharing Boxes Using HTML, Float & Padding

Adjust for responsiveness

Question and Answer

0 Comments… add one
0 comments… add one