Build Your Own Business Website header image

Lesson 8 – Create the Archive and Single Post Templates

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

In this eighth lesson, Create the Archive and Single Post Templates, of our Create a Responsive Skin for Thesis 2.0 course we finish setting up the final templates for the skin. We start by wrapping up our work from last week on the Home Page Template. Then we move on to creating the Archive Template and the Single Posts Template. And we add Comments and a Comment Form to the Single Posts Template. Finally, we complete the lesson by adding styling for the comments and comment form.

Add Post Navigation to the Home Template

  • Add Post Navigation to the template
    • Create a wrapper
    • Add the previous posts & next posts links
  • Create a new color variable
    • input background style – eef0f5
  • Style the Post Navigation
    • Create the package
    • background color – bc7
    • border – 2px bc5
    • padding – 10px
    • float next posts right
  • Add the submit class
  • Adjust padding

Create the Archive Template

  • Copy the Home template
    • Look at a current archive page
    • Copy the Home template
    • Test the results
  • Add the Archive Title
    • Add the title
    • Create a faux headline wrapper
    • Style the wrapper
  • Add the Archive Content
    • Add the archive content
    • Give it a class
    • Style the archive content

Create the Single Posts Template

  • Copy the Home template
    • Look at a current single post
    • Copy the Home template
    • Test the results
  • Create the Single Post Box
    • html – article
    • schema – article
    • move dependents into position
  • Create a Headline Area box
    • html – header
    • class – headline_area
    • category & date get html – span
  • Create an Ending Post Meta box
    • html – footer
    • class – ending_post_meta
    • Add column wrapper
    • Add columns
  • Add Post Navigation
    • add additional post navigation style
  • Style the Headline Area
    • color
    • font-weight
    • bottom margin
    • bottom border

Add Comments to Single Post Template

This part will be available soon.

  • Structure of the Comments
    • Section 1 – comments
    • Section 2 – comment form
  • Create a Comments Wrapper
    • Add wrapper
      • html – section
    • Add comments intro
    • Add comments
  • Create a Comments Article
  • Create a Comments Footer

Add Comment Form to Single Post Template

  • Structure of the Comment Form
    • Left half – commenter info
    • Right half – comment text area
  • Add the Comment Form
    • Comment form columns
    • Comment form left
    • Comment form right
    • Move comment form elements into place

Style the Comments

  • Comments Wrapper
    • Comments package
    • Float avatar
    • Left margin for article
    • Left margin for footer
  • Comments Intro
    • Add to comments
    • Font size
    • Color
    • Bottom margin
  • Comments Options
    • border
    • padding
    • background color
  • Comment author
  • Edit & Reply

Style the Comment Form

Question and Answer Session

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment