Build Your Own Business Website header image

Styling the Carta Skin for Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The Carta Skin for Thesis 2.1 is a fully responsive skin with a ton of built in tools designed to allow you to style it with a minimum of code knowledge.  It has an extensive set of background areas that can be styled via Thesis Skin Design options as well as tools for styling the menus and widget areas.  In this seminar I demonstrate how to use those tools to completely customize the look and feel of a Carta based website.

Built in Background Style Areas

  • Unique styles
    • Body
    • Background Wrap
    • Header
    • Top Navigation
    • Feature Box
    • Main Content
    • Footer
  • Repeatable Styles
    • Page
    • Style 4
    • Style 5

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

Use Repeating Background Images in Carta

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

Set a Single Full Width Background Image in Carta

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

Create Semi Transparent Backgrounds in Carta

  • Using background images
  • Using rgba colors with transparency

Add Multiple Background Images to the Same Element in Carta

  • Using the package
  • Layering of background images
  • Copy CSS

Style the Featured Page Attention Boxes

Styling Menus in Carta

  • Menu styles
    • Main menu
    • Secondary menu
    • Header menu
  • Main menu gradient background style
  • Main menu style
  • Main submenu style

9 – Using Images to Style Menus in Carta

10 – Using Image Sprites to Style Menus in Carta

11 – Add Image Icons to Menu Items in Carta

12 – Styling Widgets in Carta

  • Overall styling options in Carta
    • Built in widget styles via Skin design options
      • 4 types
      • 3 aspects
    • Built in background styles via Skin design options
    • Built in widget styles – via Color scheme
    • Custom styles via packages
    • Custom CSS
  • Default styles – Main Sidebar Widget
    • The style is passed on
    • Must be over ridden
  • Adding a background style to a built in style

13 – Create a Custom Widget Style in Carta

  • 3 structural elements of a widget
    • Widget title
    • Widget content
    • Widget container
  • Carta Widget Style package
  • Widget title
  • Widget text
    • Widget text
    • Headings
    • Span text
    • Links
    • Lists
    • Typography
  • Widget Container
    • Background
    • Margin
    • Padding
    • Border
    • Corner radius
    • Drop Shadow
0 Comments… add one
0 comments… add one

Leave a Comment