Build Your Own Business Website header image

Styling the Agility Skin for Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Here you’ll learn not just what you can style in the Agility Skin for Thesis 2 but how to style all of the elements. We cover how to use all the built in styles as well as how to create custom styling. After watching this seminar you’ll be able to make the Agility skin reflect the style you want for your unique website.

Using the Agility Color Scheme

  • Primary text – 222
  • Secondary text – 888
  • Links – 2361A1
  • Hover – 842000
  • Dark bg – 385916
  • Medium bg – 274D00
  • Light bg – ABA791

Styling Fonts in Agility

  • font family
  • sub headlines
    • font-weight
  • sub sub headlines
    • font family
    • font-style

Styling Submit Buttons in Agility

  • Text
  • Background color
  • Hover text
  • hover background color

Agility’s Built in Background Style Areas

  • Existing background areas
  • Main Body
  • Header Area
    • Header area page
  • Top menu area
    • page
  • Feature Box Area
    • page
  • Content Area
    • page
  • Top Footer Area
    • page
  • Bottom Footer Area
    • page
  • Custom background Styles
    • Styles 1-5

Agility’s Built in Background Style Elements

  • Background color
  • Background image
    • Image url
    • Image position
    • Image attachment
    • Image repeat
  • Padding
  • Margin
  • Border
    • Style
    • Width
    • Color
    • Radius
  • Drop Shadow
    • Color
    • Offsets & blur
  • Set background color for top footer area
  • Add drop shadow to top footer area
    • 0 -3 3
    • aaaaaa
  • Add bottom border to menu area

Use Repeating Background Images in Agility

  • Built in background images
  • Tileable images
  • Repeating patterns
  • Using other repeating images
    • From the media library
    • Added to the images folder
  • Add background image to header area

Set a Single Full Width Background Image in Agility

  • Scrolling background image
    • Background position
    • Background attachment
  • Fixed background image
    • Background attachment
  • common background image issues

Create Semi Transparent Backgrounds in Agility

  • Using background images
  • Using rgba colors with transparency

Styling Menus in Agility

  • Menu styles
    • Main menu
    • Main menu submenu
    • Header menu
    • Footer menu
    • Secondary menu
  • Link states
    • link
    • hover
    • current
  • Style the main menu
  • Style the submenu
  • Style the footer menu

How to Make the Menu Span the Page in Agility

  • Two methods of setting a menu width
  • Padding
  • Menu item width
    • remove side padding
    • text align center

Using Supplemental Menu Styles to Create Menu Borders

  • Set border style
  • Set border color for each menu state

Using Supplemental Menu Styles to Create Menu Buttons

  • Two methods of setting a menu width
    • Padding
    • Menu item width
      • remove side padding
      • text align center
  • Add some margin
  • Add border & drop shadow
  • Set hover condition

Styling Widgets in Agility

  • Widget Areas to Style
    • Built in widget areas
      • Main sidebar
      • Header
      • Footer
    • Custom Widget Styles
      • Supplemental
      • Supplemental 2
  • 3 parts of a Widget area
    • Widget text
    • Widget links
    • Widget heading
  • Default styles – Main Sidebar Widget
    • The style is passed on
    • Must be over ridden
  • Adding a background style to a widget style

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

Style a Query Box with Custom Text Styles

  • Custom text style elements
    • Typical text
    • Links
    • Headings
    • Subheading
    • Sub Sub headings
  • Style the attention box
  • Add a background style to the attention box
0 Comments… add one
0 comments… add one

Leave a Comment