Build Your Own Business Website header image

Customizing Templates in the Carta Skin for Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this seminar we discuss how to use the advanced tools in Carta to customize the arrangement and layout of various templates. We begin with the Carta responsive columns system because it is specifically designed to allow you to reconfigure the structure of your templates while still retaining the responsiveness. In other words, your web pages still look good in a mobile device. Then we go on to show you examples of how to change the structure of your templates.

Understanding the Carta Responsive Columns System

  • System consists of 3 parts
    • Column Wrapper
    • Column
    • Smart Column Wrapper
  • Wrapper configuration
  • Column configuration
  • Targeting specific columns with CSS

Make a 3 Column Header in Carta

  • Create a custom template
  • Copy the page template to the custom template
  • Drag old header out of template
  • Add Wrapper
  • Add columns
  • Add content to the columns
  • Add the id to the wrapper

Make a 2 Column Feature Box in Carta

  • Existing configuration
  • Copy the front page template to a custom template
  • Reconfigure wrapper
  • Add Column
  • Configure columns
  • Add content

Make the Front Page 2 Columns in Carta

  • Existing configuration
  • Copy the front page template to a custom template
  • Find the 2 column wrapper
  • Find the 2 columns
  • Find the sidebar
  • Move the loop into the content column
  • Remove the full width column and wrapper

Create a 3 Column Template in Carta

  • Create a custom template
  • Copy the page template
  • Create a new wrapper
  • Create 3 new columns
  • Create a new widget area
  • Move content into place
  • Remove 2 column content
  • Test
  • Add reverse wrapper

Create a New Full Width Section in Carta

  • Create a new html container
    • give it an id
    • give it a class
  • Drag header & main menu into it
  • Remove top nav container
  • Add style 4 to style it

Make a Full Width Feature Box in Carta

  • Create a new full width html container
  • Drag the header above it
  • Drag the feature box widget area into it

Create a Landing Page in Carta

  • Create a custom template
  • Remove everything
  • Change the width of the column in custom css
  • Adjust the column width in the media query
  • Use the the widget styles to style the content
  • Using Custom Media Queries
0 Comments… add one
0 comments… add one

Leave a Comment