Build Your Own Business Website header image

Customizing Templates in the Carta Skin for Thesis – Part 8 – Create a Landing Page in Carta

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now what we’re going to do is create a landing page template in the Carta Skin for Thesis 2. The landing page template is going to have a very simple layout.

Create a New Template

What we’ll do is come over here and create a template. We are going to call it Landing Page. Create the template. Now what we’re going to do is copy our No Sidebars template over to it. That’s essentially what a landing page is, a no sidebars template. However, in this case we’re going to get rid of the Top Footer. We’re going to get rid of the Top Navigation and in fact, we might just get rid of the Header here.

Then we’re going to come over to the template options and for the body class we’re going to call this landing-page. We gave it a custom body class so we can target some css directly to it. We’ll save the template.

Assign the Landing Page Template to a Page

We’re going to come over to a page and assign this template to it. This is an example of landing page and we’ll come down and assign the landing page to it and then we’ll view the page. Now we have large space here and what we’re going to do is narrow this down. So it doesn’t take up as much room and then we’re going to style the text differently.

Add Styling Using Custom CSS

This is going to involve us doing some custom css and what we’re going to be doing is styling the outer wrap and then styling the page wrapper styles. We’re going to significantly increase the margins on either side of this. In this case it’s got a div class of page_wrapper and we should come over here and give this thing an id of main_column or main_content.

Add a Class

We’ll come back over here to full width content. Remember in our other templates this is called main_content. Come over to our custom css and we are going to give this full a narrower width. We’re going to give div class full the div id=”main content”, the div class=”full” inside of class landing page.

Change Margins and Width

We’re going to give it a narrower width; we’ll take it down to say, 700 pixels wide. Then give it left and right margin. So that’s .landing-page and then dot or #main_content .full. Then we’ll say width: 700px, and then margin-left: auto… actually, just say it let’s just do the short version, margin 0 auto;. Save our custom css, it’s main_content. There we go.

Using Carta’s Widget Styles Package

So now we have our text all small like that and we have lots of more space here. And then what we are going to do is style this bit here. We’ll style all of these using the widget style. Come on over here to our Skin Editor and go to css and we’re going to create a custom style here. It’s a Carta Widget Style and the selector is going to be .landing-page and .full like that.

We’re going to leave the Widget Title alone but for the Font Settings for the text we’re going to pick say 18 px and the line height we’re going to take up to 28px. Let’s center align that. Then our headings, actually we’re just going to use this Widget Titles and we’ll say Font Settings here. The font size is going to be 48px and text align center, letter spacing 2 and text color…let’s make it red. Typography is 700px wide. Hit save and let’s review it.

Come back over here to custom css and put our landing in. Save custom css. Let’s refresh this for a moment and use your favourite tool to get the css. This is always down at the bottom so we’ll grab that now; landing-page .full. Actually, I think we’ll say landing-page .full .post_box that’s what we’re missing there in this.

Then come back over to our options and let’s see our Heading H3 what do we say our Font Size was, let’s say 36px and let’s make it italic, let’s center align it, let’s make it orange. Heading H4 let’s make those 24px and let’s change this one to Gill Sans. Say Text Color and let’s make this blue. For Span Text we’re going to say the Text Color is pink and then Widget Lists we’re going to use a square. Bullet Position is outside, we’ll indent the list and we’ll make it half a space. And we’ll save that, save the css, come back over and refresh this.

Get the Code from the Widget Styles

So now you can see we’re getting some more control over the way this text works. Now we’re just going to be happy with that amount of control and we’re going to get the code which is down here at the bottom. Come over here and replace this with a code and now we don’t need this div p thing, in fact we don’t need that either. So that’s fine.

It’s not widget title in this case though, right? It’s going to be post box headline. So, post_box .headline and then h3, we’re just going to copy this and we’re going to make an H2 out of it too. We’ll make that 42px and we’ll make the color brown. We don’t need the H5 or H6 so we’re just going to delete those.

I think for our span we’re also going to say text decoration underline. Oh, no we’re going to say font weight bold. Then, I think we’re good there. Let’s save that, come over and refresh this. Now we have a bunch of styles that we came up with for our landing page.

Obviously, you have to have a plan for what this should look like but this is a way for you to significantly transform the style of your landing page by essentially re-appropriating the Carta Widget Styles package to generate code that you can slightly modify to make these kinds of stylistic changes. And you have quite a bit of control over what the fonts look like or what these different pieces of it look like.

0 Comments… add one
0 comments… add one

Leave a Comment