Build Your Own Business Website header image

Customizing Templates in the Agility Skin for Thesis 2

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

Applies to -

In this seminar we discuss how to use the advanced tools in the Agility Skin to customize the arrangement and layout of various templates. Agility’s responsive columns system allows you to reconfigure the structure of your templates while still retaining the responsiveness. In other words, your web pages still look good in a mobile device. We then show you many examples of how to change the structure of your templates.

How to Upgrade Agility

  • Create a backup
  • Download the backup
  • Perform the Upgrade
  • Restore Defaults

Understanding the Agility Grid

  • Every Agility page is made up of horizontal and vertical divisions
  • Primary Horizontal Divisions – Areas
  • Primary Vertical Divisions – Area Pages
  • Secondary Vertical Divisions – Columns
  • Column Widths

Understanding the Agility Responsive Columns System

  • System consists of 3 parts
    • Column Wrapper
    • Column
    • Smart Column Wrapper
  • Wrapper configuration
  • Column configuration
  • Targeting specific columns with CSS

Create Featured Page Attention Boxes in Agility

  • Existing configuration
  • Copy the front page template to a custom template
  • Add the wrapper & configure
  • Add Columns & configure
  • Add query boxes
  • Configure query boxes in Skin Content
  • Configure query boxes in the Skin Editor
  • Add the read more button

Make a 3 Column Header in Agility

  • Create a custom template
  • Copy the page template to the custom template
  • Drag old header out of template
  • Add Wrapper
  • Add columns
  • Add content to the columns
  • Add the id to the wrapper

Make a Full Width Feature Box in Agility

  • Set a restore point
  • Remove unnecessary boxes
  • Drag the widget area into the full width area

Make a 2 Column Feature Box in Agility

  • Existing configuration
  • Copy the front page template to a custom template
  • Reconfigure wrapper
  • Add Column
  • Configure columns
  • Add content

Make the Front Page 2 Columns in Agility

  • Existing configuration
  • Copy the front page template to a custom template
  • Find the 2 column wrapper
  • Find the 2 columns
  • Find the sidebar
  • Move the loop into the content column
  • Remove the full width column and wrapper

Make the Bottom Footer 1 Column

  • Set a restore point
  • Remove boxes
  • Configure wrapper and column
  • Adjust all templates

Create a 3 Column Template in Agility

  • Create a custom template
  • Copy the page template
  • Create a new wrapper
  • Create 3 new columns
  • Create a new widget area
  • Move content into place
  • Remove 2 column content
  • Test
  • Add reverse wrapper

Create a New Full Width Section in Agility

  • Create a new html container
    • give it an id
  • Create a new html container
    • give it a class
  • Create secondary menu
  • Add widget area
  • Add style 4 to style it
0 Comments… add one
0 comments… add one

Leave a Comment