Build Your Own Business Website header image

Styling the Agility 3.2 Skin for Thesis 2

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Overview of Agility 3.2 Skin Design Options

  • Color Scheme Generator
  • Typical Font Styles
  • Menus
  • Backgrounds
  • Widgets
  • Custom Text Areas
  • Call to Action
  • Icon Styles
  • Media Queries
  • Skin Configuration Options
  • Skin Dimensions

Using the Agility Color Scheme System

  • Set a base color
  • Set a color scheme mode
  • Flip if necessary
  • Switch to “adjust”
  • Change colors
  • Give the skin colors names
  • Grayscale colors
  • Philosophy – always use the skin colors
  • Use BYOB as example

Patterns in Agility 3.2 Skin Design

  • Understanding these patterns means you understand half of the system
  • Primary Patterns
    • Font pattern
    • Link pattern
    • List pattern
    • Background pattern
    • Menu pattern
    • Button pattern

    Styling Fonts in Agility – the Font Pattern

    • Typical font families
      • The importance of setting this – GRT
      • Typical font
      • Typical heading
    • Typical style options
      • family
      • size
      • color
    • Font styles

    How to Style Typical Paragraph Text in Agility 3.2

    • Where is it located
    • How it affects full width paragraph text
    • Options

    How to Style Typical Headings in Agility 3.2

    • Where is it located
    • How it affects full width headings
    • Options

    How to Style Typical Links in Agility 3.2

    • Where they are located
    • Most styles controlled by the element they are contained in
    • Options

    How to Style Page Titles in Agility 3.2

    • Where they are located
    • How it affects full width headings
    • Options

    How to Style Typical Block Quote in Agility 3.2

    • Where they are located
    • Options

    How to Style Site Title in Agility 3.2

    • Where they are located
    • Options

    How to Style Site Tagline in Agility 3.2

    • Where they are located
    • Options

    How to Style Typical Copyright in Agility 3.2

    • Where they are located
    • Options

    How to Style Typical Lists in Agility 3.2

    • Where they are located
    • Options

    How to Style Typical Post Date in Agility 3.2 – Secondary Text

    • Where they are located
    • How it affects full width secondary text
    • Options

    How to Style Typical Section Titles in Agility 3.2

    • Where they are located
    • Options

    How to Style Typical Phone Number in Agility 3.2

    • Where they are located
    • 3 parts
      • Container
      • Link
      • Heading

      How to Style Typical Submit, Read More and Call to Action Buttons in Agility

      • Which ones are which?
        • Submit buttons
        • Read more buttons
        • Call to action buttons
      • Options
        • typical font options
        • link colors
        • padding
        • border

      Styling the Built in Background Style Areas in Agility 3.2

      • Existing background areas
        • Main Body
        • Top Header Area
        • Header Area
        • Top menu area
        • Feature Box Area
        • Content Area
        • Attention Box Area
        • Featured Content Area
        • Notice Bar Area
        • Top Footer Area
        • Bottom Footer Area

      >Using Custom Overlay Styles in Agility 3.2

      • Where are they used?
      • note the css class name

      Using Extra Background Styles in Agility 3.2

      • Where are they used?
      • note the css class name

      Set a Single Full Width Background Image in the Feature Box of Agility 3.2

      • Scrolling background image
        • Background position
        • Background attachment
      • Fixed background image
        • Background attachment
      • Background image sizes
        • 1920 x 1080
        • Modifying for mobile devices

      Styling Menus in Agility 3.2

      • 3 Built in Menu styles
        • Main menu
        • Header menu
        • Footer menu
        • Where are they located
      • 1 Custom Menu Style
        • Secondary menu
        • Where is it located?
      • Advanced Menu Styles
        • Menu link supplemental
        • Menu hover supplemental
        • Menu current supplemental
        • Submenu link supplemental
        • Submenu hover supplemental
        • Submenu current supplemental
      • 3 Menu states
        • link
        • hover
        • current
      • Style the main menu
      • Style the submenu

      How to Use the Secondary Menu Styles in Agility 3.2

      • Add a menu outside of the typical area
      • Give it a class name of secondary menu
      • Set the styles

      Styling Widgets in Agility 3.2

      • Built in widget styles
        • Main sidebar
        • Header
        • Footer
        • Feature Box
        • Attention Area
      • Custom Widget Styles
        • Supplemental
        • Supplemental 2
      • Default styles – Main Sidebar Widget
        • The style is passed on
        • Must be over ridden
      • 5 parts of a Widget style
        • Widget text
        • Widget links
        • list
        • Widget heading
        • Background

      How to Style Widget Text in Agility 3.2

      • Where they are located
      • Options

      How to Style Widget Backgrounds in Agility 3.2

      • Where they are located
      • Options

      How to Style Widget Links in Agility 3.2

      • Where they are located
      • Options

      How to Style Widget Lists in Agility 3.2

      • Where they are located
      • Options

      How to Style Widget Headings in Agility 3.2

      • Where they are located
      • Options

      Create a Custom Widget Style in Agility

      • Applying a supplemental style
      • Supplemental Widget Styles
        • Widget title
        • Widget text
        • Widget link
        • Widget Background
          • Background
          • Margin
          • Padding
          • Border
          • Corner radius
          • Drop Shadow

      Styling a Call to Action in Agility 3.2

      • Where are the Calls to Action?
      • 3 Built in Call to Action styles
      • 5 parts of a Call to Action style
        • Background
        • Heading
        • Message
        • Submit Button
        • Email form labels
      • How to apply a call to action style

      How to Style an Email Opt-in Form in Agility 3.2

      • Background
      • Heading
      • Message
      • Submit Button
      • Email form labels

      Icon Styles in Agility 3.2

      • 2 types of icon styles
        • Social icons
        • Page icons
      • 2 Built in Social Icon styles
      • 7 Built in Page Icon styles
        • Plain
        • Circle
        • Square
        • Square with rounded corners
      • 2 variants
        • Positive – background clear – icon colored
        • Negative – background colored – icon clear

      How to Style a Page Icon in Agility 3.2

      • How to add an icon
      • Apply a style to the icon
      • Elements to style
        • Color
        • Background color
        • Background image
        • Padding
        • margin

      How to Style Social Icons in Agility 3.2

      • How to add an icon
      • Apply a style to the icon
      • Elements to style
        • Color
        • Background color
        • Background image
        • Padding
        • margin

      How to Use FontAwesome Icons in Agility 3.2

      • Built in uses
        • Page icons
        • Social icons
        • List styles
      • Custom applications
        • In a menu
        • In a blockquote
        • In a custom list

      Using Custom Text Area Styles in Agility 3.2

      • 3 Custom text area styles
      • Elements that can be styled
        • Typical text
        • Links
        • List
        • Headings – H!
        • Sub Headings – H2
        • Sub Sub Headings – H3 & H4
        • Section Title
        • Background
      • Media Query Tweaks
        • Tablet portrait
        • Phone landscape
        • Phone portrait

      Using a custom text area to style a landing page in Agility 3.2

      Using a custom text area to style a section in Agility 3.2

      Using a custom text area to style a Widget in Agility 3.2

      Using Media Query Options to Tweak Mobile Views

      • Built in Media Queries
        • Desktop 1280
        • Desktop 1140
        • Tablet Landscape
        • Tablet Portrait
        • Phone Landscape
        • Phone Portrait
      • Elements to change
        • Thesis text elements
        • HTML Headings
        • Custom Code
      • How to override Custom CSS in Media Queries

      How to use smaller background images for mobile devices

      How to change line height in mobile devices

0 Comments… add one
0 comments… add one

Leave a Comment