Good morning everybody and welcome to this special seminar on making structural changes to the templates in the Carta Skin for Thesis 2.
Reconfigure the Structure AND Keep Responsiveness
We’re going to start off today by talking about the Carta Responsive Column System. If you’ve watched some other Carta Skin videos, you may have already seen this introduced but I’m going to take a few minutes just to walk you through that system again to make sure you have a good foundation on how it works. The Carta Responsive Column System is specifically designed to allow you to reconfigure the structure of your templates while still maintaining the responsiveness.
I’ll walk you through examples of how the system works doing things like make the header 3 columns wide instead of 2. We’ll make the Feature Box 2 columns wide instead of 1. We’ll make the front page template 2 columns wide instead of 1 column wide. We’ll add a full width section to the site. All of those examples are going to be using this responsive column system so that when you’re finished with it, it’s still looks good in a mobile device.
3 Parts to the Responsive Column System
We’re working on this site right here and I’m going to come over here to the Skin Editor and talk about this column system. The responsive column system consists of 3 parts. It consists of the Carta Column Wrapper, Carta Column and a Carta Column Reverse Wrapper.
Every instance of the system requires at the minimum, a column wrapper and a column. These are the two components, the column wrapper and the column are the ones you’re going to use often. We’ll talk about how to use the reverse wrapper in a later video but for the time being, column wrapper and the column are the ones that you’re going to use the most often.
Column System Used throughout the Skin
In fact, all of the skin is designed to use this system. This isn’t something that’s just for use by you as a customizer. This also exists here and all of the other templates. For example, this box called Main Content is a Carta Column Wrapper and this Content Column is a Carta Column and the Sidebar Column is a Carta Column. So I use these in all of the templates as well for actually building a template.
How To Use the Column System
The way this works is that you add a Column Wrapper and then add a column to it for each of the columns that you want to create there. Then you configure the columns.
Column Wrapper Example
So for example, in this case we’ve got the Column Wrapper, and if we open up the Column Wrapper, you’ll see I’ve given it an id of main_content and I’ve selected a column configuration here of 2 columns. The left column is two thirds wide and the right column is one third wide.
Column Wrapper Configuration Options
These are all your choices. Actually, you could make it a single column, 2 columns equally sized, 2 columns with two thirds and one third or one third and two thirds or three quarters and one quarter or one quarter and three quarters. You get 3 columns equally sized, you could do three columns with one half, one quarter and one quarter, so on and so forth. All columns equally sized. So this is the range of configuration choices you have for the wrapper.
Columns Configuration Options
Then inside that wrapper, go columns and again, these are the Carta columns. These columns also need to be configured. Essentially what you’re telling in this column configuration is how wide the column should be. You have fewer choices here. The column’s either going to be full width, half the width, one third, two thirds, one quarter or three quarters of the wrapper. It’s going to be one of those.
And you’re going to do it in order. So, this says we want two columns where the first one is two thirds and the second one is one third. So this column has to be set in two thirds wide and this column has to be set one third wide. Once you’ve done that, you can put your content inside of the columns and you can expect that the columns will be responsive.
No Nesting of Columns within One Another
One thing to bear in mind is that these don’t nest so you wouldn’t take another column wrapper and put it in the main content or inside of the Carta column. The column wrapper goes inside of the main width of the page and then the columns themselves go inside that wrapper.
Target CSS for Styling the Individual Columns
You can target css to each these individual things. For example, the column wrapper has an id that’s set and so because it’s got the main_content id, styles that use that selector will apply to this content in this column.
The same thing is true with this column, we could add a class to it. Say you wanted to add a specific class to this column or you wanted to target this column in a way that would be different than any other column. You could add a class to it and we’ll see examples of that here in a few minutes. We also have additional videos in our seminar on Styling the Carta Skin for Thesis 2.
Now, something else you can set is padding. By default, these things get the default top and bottom padding. That is the wrapper gets top and bottom padding and then each of the columns give left and right padding. If there’s some reason why you wanted to get rid of that padding, you could choose to remove the left or the right padding from individual columns or top and bottom padding from the column wrapper itself, so those are the things that can be set.