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