Build Your Own Business Website header image

Lesson 9 – Create a Custom Skin Package

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

In this ninth lesson, Create a Custom Skin Package, of our Create a Responsive Skin for Thesis 2.0 course we introduce the necessary elements for creating custom packages. We start by updating our File Structure due to updates in Thesis 2. Then we introduce the Thesis Package Class showing the minimum requirements and how to add a package to a skin. Then we move on to adding various kinds of Options to the package. Finally, we complete the lesson by combining the Sample Package we began with to the Single Element Style Package we’ll use on our skin.

Reorganize our File Structure

  • Thesis skin methods
    • boxes
    • packages
  • Create the new file structure
    • Move scripts out of lib
    • Move box
    • Move package
    • Delete lib
  • Remove reference to the old file structure

Introduction to Thesis Package Class

  • Minimum Requirements
    • Selector
    • Translation
    • CSS
  • Simple Example
    • Create the package file
    • Copy the thesis_package_basic code
    • Title
    • CSS
      • Add a border
      • Add a border radius
      • Add a drop shadow
  • Add the Package to the Skin
    • Create a packages method
    • Create the packages array
  • Add the Package in the Skin Editor

Add Options to Thesis Packages

  • Typical Option Parameter
  • Types of options
  • Widths
    • full
    • long
    • medium
    • short
    • tiny
  • Add border width option

Using Thesis 2 Standardized CSS Options

  • Thesis CSS API
    • Options
      • font
      • color
      • background
      • width
      • box sizing
      • float
      • margin
      • padding
      • border
      • float
      • links, links_hovered, links_active, links_visited
      • lists
      • typography
    • Properties
  • Thesis Package Use of the CSS API
    • thesis_package_basic code
  • Add background & border to options
    • Add thesis global
    • Add thesis css api
    • Add background
    • Add border
  • Add background and border to CSS
    • Setup the array
    • background color – note color sanitization
    • background image – note image url sanitization
    • border
    • Convert the array into an output variable
    • Add the variable to the return

Add Custom CSS Options to the Package

  • Add Border Radius
    • Add the definition to the array
    • Sanitize the number
  • Using Groups and Fields in Options
    • Example – thesis_package_input
    • What fields?
      • Shadow width
      • Shadow blur
      • Shadow color
  • Create the Box Shadow Options Group
    • Width
    • Blur
    • Color
  • Add Border Radius to the CSS
    • Use the border-width example to add to array
    • Remove from the return statement
  • Add Box Shadow to the CSS
    • If a width is specified build an array element
    • Initialize the array element
    • Sanitize width & add
    • Sanitize blur & add
    • Sanitize color & add

Refine the Package to Include Width, Height and Float

  • Add Width to Options
  • Add Height to Options
  • Add Float to Options
  • Add Width to CSS
  • Add Height to CSS
  • Add Float to CSS

Combine the Sample Package with the Single Element Style Package

  • Copy Single Element Style
  • Add Custom Options
  • Add Custom CSS

Question and Answer Session

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment