In this seminar we introduce the new Thesis 2.1 skin editor. We take the site that was developed during the Thesis 2.1 Launch party and show how to move and style the menu, add a widgetized feature box and how to create structures in Thesis Classic Responsive that maintain its responsiveness. We spend a bunch of time using the new custom CSS editor as well.
Who is the Thesis 2.1 Skin Editor for?
- Please share this with others
- If you haven’t already watched the first videos
- Who is this seminar for?
- Someone building their own site
- Someone willing to learn some code and code concepts
- If you have no intention of learning or using any CSS then this isn’t the right place for you
- Thesis 2.1 is infinitely customizable
- Basic understanding of HTML
- Basic understanding of CSS
- Thesis is way easier to customize that most WordPress themes
- To get the most out of Thesis you’ll need to learn
- Some HTML
- Some CSS
- Some basic responsive design concepts
- Some tools that can reduce what you need to learn – but then you need to learn the tool
4 Main Concepts you Need to Understand to Effectively Use the Thesis 2.1 Skin Editor
- What a skin is
- What is a skin?
- a collection of templates
- a set of styles
- switching between skins means switching between templates and styles
- What is a skin?
- The relationship between templates and your web pages
- A template takes your content and displays it as a web page
- it adds structure
- it places content
- Different types of pages use different templates
- Front
- Blog
- Page
- Single
- A template takes your content and displays it as a web page
- How boxes are used to create templates
- Boxes do 1 or 2 things
- Create HTML structure for the template
- Add content to the template
- Often they do both
- Boxes do 1 or 2 things
- How CSS is used to style templates
- CSS is a language for creating “Style Rules”
- Style rules are applied to HTML elements
The New Thesis 2.1 Skin Editor Interface
- Custom CSS
- Manage Skins
- Skin Editor
- HTML – 5 sections
- Template selector
- Template options
- Template layout
- Box builder
- Shows boxes that have been created and are available for use in the template but that are not being used – *
- Shows the list of new box types that can be created
- Box Trash
- CSS – 3 Sections – Not template specific
- Skin CSS
- Variables
- Packages
- Images – 2 sections
- Add image
- Image library
- Manager
- Backup skin data
- what skin data?
- restore
- export. delete
- Import skin data
- Restore default
- Skin Backups
- Backup skin data
- Canvas
- THESIS
- HTML – 5 sections
- HTML Layout
- Each template contains boxes
- Box options
- Box contents
- Box tray
- 2 types of drag operations
- Shift drag – from one box to aother
- Drag – rearrange within a box
Types of Templates in Thesis 2.1
- 2 types of templates
- core templates – automatically applied
- custom templates – must be selected
- Core templates
- Home
- Page
- Single
- Archives
- Parent/child relationships in templates
Understanding the Relationship of Boxes to Actual Pages
- Body
- Container (above and below)
- Nav menu
- header
- content
- footer
- Header
- site title
- site tagline
- Columns (side by side)
- Content Column
- WP Loop – explain
- Post/Page Post Box
- Headline Area
- Author Avatar (Not Visible)
- Headline
- Byline
- Author
- Date
- Edit
- WP Featured Image
- Thesis Post Image
- Content
- Headline Area
- Page Comments
- Sidebar
- text box
- widget box
- Content Column
- Footer
- Thesis attribution
- WP Admin link
Move the Menu Below the Header Image Using the Thesis 2.1 Skin Editor
- Drag it from the Home template
- Why hasn’t it moved?
- Drag from the parent templates
- Look at child templates
Remove the Text Box from the Posts and Archive Templates Using the Thesis 2.1 Skin Editor
- Locate the correct templates
- Drag the text box to the toolbox
- Repeat
Remove the Byline from Pages but Not Posts in the Thesis 2.1 Skin Editor
- Turn on the Byline features in Content
- Remove byline from front template
- Remove avatar from front template
- Repeat for pages
Add a Widgetized Feature Box to the Front Page Using the Thesis 2.1 Skin Editor
- Create the box
- Move it into place
- Create the widget area
- Move it into place
- Create the text box
- Add class names to the boxes
- Add the widget
- Add the call to action
Remove Borders from All Pages in Thesis Classic Using Custom CSS
- Remove border from the footer
- Remove border from the sidebar
- Remove border from the header
Add Background Images and Color to Thesis Classic Using Custom CSS
- Set the page background color in Design
- Add a color to the container
- Add a repeating background image to the body
- Add a solid color to the sidebar
- Add a background image to the footer
- Add a color to the footer
- Add padding to the footer
Style the Thesis Classic Responsive Menu
- Add color to the menu
- Change the border colors
Make your Styles Responsive in the Thesis Classic Skin
- Test in responsinator
- Set up the media query
- Move sidebar color
- Move the menu border color