Build Your Own Business Website header image

BYOB Carta Skin

Styling the Carta Skin for Thesis 2 – Part 11 – Add Image Icons to Menu Items in Carta

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We’re continuing to work on styling the Carta Skin for Thesis 2, specifically menus at this point. And what we're going to do here is add icons to the navigation menu. And by icons, I mean icon images and we're going that with an image sprite that looks like this. Since I just showed you

Styling the Carta Skin for Thesis 2 – Part 10 – Using Image Sprites to Style the Menus in Carta

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We’ve looked at using images to style menus in the Carta Skin for Thesis 2 so the next thing I want to look at is using image sprites. To begin with though what I'm going to do is create a backup of the skin with the menu as we just created it. And I'm going

Styling the Carta Skin for Thesis 2 – Part 9 – Using Images to Style the Menus in Carta

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We left off with styling options for the menu in Carta and now what we're going to do is do the same kind of thing but we're going to use some background images. I am going to use this little tab here for each menu element in our first example of this. I just want

Styling the Carta Skin for Thesis 2 – Part 8 – Styling Menus in Carta

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do is look at styling menus in Carta. Now, Carta comes with 3 built-in menus or menu style sections essentially. You have the Main Menu, you have the Header Menu and you have the Secondary Menu. Those are the 3 primary menus that you can style. The Main Menu

Styling the Carta Skin for Thesis 2 – Part 7 – Style the Featured Page Attention Boxes

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We’ve arrived at the last video on styling backgrounds in the Carta Skin for Thesis 2. It’s pretty amazing all the things you can do with backgrounds in Carta. And what what we're going to do is here is show how to style these featured attention boxes. We've got these featured attention boxes here and

Styling the Carta Skin for Thesis 2 – Part 6 – Add Mulitple Background Images to the Same Element in Carta

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that you understand the issues around adding a single background image, let’s address adding multiple background images to the same element in Carta. And we're going to do this on a different site. Here we’re going to add multiple background images to the same element and here I am, Using Categories. Essentially what I'm

Styling the Carta Skin for Thesis 2 – Part 5 – Create Semi Transparent Backgrounds in Carta

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

What we're going to talk about next in this Styling the Carta Skin for Thesis 2 is adding semi-transparent background elements to the page. If you saw over here on Laura's site, we've got this semi-transparent light color here which probably would look totally hoopy over the top of this mountain background. And I'm going

Styling the Carta Skin for Thesis 2 – Part 4 – Set a Single Full Width Background Image in Carta

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Well, the discussion on repeating background images actually brings us to a conversation about how to set up a single full width background image like this. There are two different ways to do this. The first way to do this is to do it so that the image scrolls. If we come back over here

Styling the Carta Skin for Thesis 2 – Part 3 – Use Repeating Background Images in Carta

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that you know about Carta’s background areas and styles we're going to start talking about using repeating background images in Carta. The only repeating background image that's currently used in Carta is inside the body to provide this little pattern that you see here, this linen pattern. Let’s go over to the Main Body

Styling the Carta Skin for Thesis 2 – Part 2 – Built in Background Style Elements

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We’ve covered the 7 unique built in background styles for Carta and discussed one of the repeatable styles, Page Background. But there are 2 other repeatable styles that are available for you to use in the skin. And those repeatable styles are Style 4 Background and Style 5 Background. We're going to use them specifically

Styling the Carta Skin for Thesis 2 – Part 1 – Built in Background Style Areas

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to this special seminar on using the design options to style the Carta skin for Thesis 2. This is an extension of the seminar that I gave that was an Introduction to Using the Carta Skin for Thesis 2. We're going to start off by talking about styling the various

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.

Introduction to Using the Carta Skin for Thesis 2 – Part 7 – Carta 1 Column Header Box

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that you understand how the default 2 Column Header works for Carta, we're going to create a 1 Column Header. The 1 Column Header is specifically designed to allow for responsive images. So let’s drag the 1 Column Header into the Front page and then take the 2 Column Header out. Keep in mind

Introduction to Using the Carta Skin for Thesis 2 – Part 9 – Carta Smart Widget Columns Systems

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We’ve seen how the Responsive Column system works and now we're going to take a look at the Smart Widget Columns in the Carta Skin for Thesis 2. Again, from inside of our Skin Editor, let's say you wanted another set of widget areas added to the page. You can come down here and say

Introduction to Using the Carta Skin for Thesis 2 – Part 8 – Carta Responsive Column Systems

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that you’ve seen the default 2 column header box and 1 column header box in the Carta Skin for Thesis 2, the next thing I'm going to talk about are Carta's responsive columns. The responsive columns consist of at least two pieces and sometimes three. They consist of a Carta Column, Carta Column Wrapper

Introduction to Using the Carta Skin for Thesis 2 – Part 6 – Carta 2 Column Header Box

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve discussed the skin content options, we're going to talk about some of Carta’s smart features that exist inside of the Skin Editor. Let’s come back over here to the Skin Editor and look over here in the library. You see that I have Carta 1 Column Header, Carta 2 Column Header, Carta

Introduction to Using the Carta Skin for Thesis 2 – Part 5 – Carta Skin Content Options

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that you know how Carta’s Skin Design Options work, we're going to talk about the Carta Content Options. Let’s come over here to Skin Content and the first content options we have is the copyright box. The copyright box is located in the bottom of every footer down here in copyright and it gives

Introduction to Using the Carta Skin for Thesis 2 – Part 4 – Carta Skin Design Options

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We’ve taken a look at images and image sizes so next up we're going to take a look at Carta's design options. Let’s come over here to Thesis and Skin Design. Carta comes with a whole bunch of different design options and those design options are essentially categorized into 6 different areas. First you have

Introduction to Using the Carta Skin for Thesis 2 – Part 3 – Images in the Carta Skin for Thesis 2

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

So that's our upgrade process for Carta. Next I would like to talk to you about images in the Carta skin for Thesis 2. Carta has fairly specific design around images whether it's here in this featured image or it's on the main featured image here. So we have image sizes that are designed around

Introduction to Using the Carta Skin for Thesis 2 – Part 2 – How to Upgrade the Carta Skin for Thesis 2

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that we’ve gone through an overview of Carta, a responsive skin for Thesis 2, we're going to come back and talk about default images. But before we do that, I want to discuss how to do an upgrade in Carta. This is the upgrade procedure for Carta if you already have a version 2.1