In lesson 11 of our Build a Responsive Professional Website using Thesis Theme 2, we show how to use the Skin Editor to configure and style the Home Page. We begin by showing how to create a new widgets style package in the Agility Skin. Then we configure the Agility Feature Box and show how to add a slide show and a call-to-action to it.
Then we focus on adding what we call “Attention Boxes” using the Agility Skin’s smart widget columns. These boxes allow you to highlight services or products or whatever you desire on your Home Page. Finally, we wrap the lesson up by showing how to add content such as text, links and images to your Attention Boxes.
Create a New Package for Customizing the Widget Styles
- Create a new Agility Widget Style package
- Name
- Reference
- CSS Selector
- Add the reference to the Skin CSS list
- Tour the package settings
- Elements that get styled
- New style properties
- Text color
- Background
- Border
- Corner Radius
- Drop Shadow
- Style the Heading
- Set the 2nd Accent color variable – #EAE4C7
- Add the variable to the Widget Titles text color
- Style the Text
- Add the variable to the Widget color – $tc6
- Style the Links
- Add variable to link text color – $tc4
- Add variable to link hover color – $tc6
- Test the result
- Choosing the right Selector
- Making a specific choice
- Choose a unique container selector
- Choose the correct symbol
- hash-tag for ID
- dot for class
Configure the Agility Feature Box
- What is the Feature Box?
- Understanding the Structure of the Feature Box
- Using Agility Columns to Reconfigure the Feature Box
- Configure the Agility Column Wrapper
- Create a New Agility Column
- Configure the Existing Column
Add a slide show to the Feature Box
- Download and Install Orbit Slider plugin
- Download and Install the Orbit Slider Helper box
- Plugin Settings – Slider Options
- Nav arrows off
- Captions off
- Bullets off
- Autoplay
- Advanced Settings
- Add new slides
- Add slideshow to Feature Box
- Add drop shadow to slideshow
- Create a Agility Widget Style
- Selector – .orbit-wrapper
- Configure Drop Shadow
Add a Call to Action to the Feature box
- Add text widget to Feature Box
- Remove all the formatting
- Add a clickable phone number link
- in USA & Canada
- tel:
- Area code
- Local Number
- In the rest of the world
- in USA & Canada
- Add a link
- Add a class to the widget
Style the Call to Action
- Create a new Agility Widget Styles Plugin
- Choose the right CSS Selector
- Progressive Refinement
- Widgets
- Font Settings
- Padding
- Text Color
- Widget Titles
- H5
- Span Text
- Links
- Typography
- Border
- Radius
- Shadow
Add Attention Boxes with the Agility Smart Widget Columns
- Create a box
- Configure the box
- HTML id
- Number of widget columns
- Widget Area Name
- Widget Area Description
- Create a widget block with 3 columns
Add Text, Images and Links to the Attention Boxes
- Add Black Studio TinyMCE widget
- Upload Image
- Add Text
- Add Link
- Setup the Agility Widget Styles Package
- Name
- Reference
- Choose the correct selector
- Style using the Agility Widget Styles Package
- Add secondary background color variable – #F0EEE2
- Widgets
- Widget Titles
