Build Your Own Business Website header image

How to Make Carta into a Magazine Style Skin

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

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.

In this session we demonstrate how to make a Carta into a magazine style skin, discuss the features of Carta and its built-in ability to create the columns without using CSS. We show how to create Carta wrappers and columns and add a query box to create the categories. We also show an example of a site using a BX content slider that takes a query box which grabs the featured image, title and excerpt.

Video Transcript

Member: Well, I’ve got this idea that I’m going to do somewhat of a magazine-style, hybrid with my new website. Actually, I’m not sure if I’m going to do it that way but I want to play with it and kind of see how it sits with me. To put some boxes in, of course some content in to kind of isolate sections that I want to highlight with the box kind of setup. I saw that you have that free plugin for the footer which actually, was exactly what I wanted but I’d like to use that up in the body of the site instead of the footer.

Rick: But it doesn’t sound like you really want that because that is for widgets, and you want to put things like query boxes in there right?

Member: Yeah, I’d like to be able to put content by category in those boxes.

Rick: Which in Thesis 2 is a query box, so you stick a query box in that column and then you’d say, well I want to show this category of post and this number of post and I want this specific thing or that specific thing to show up.

Member: Right.

Rick: So, do you already have your design begun?

Member: Oh, yeah. It’s indiemediaweekly.com. I’ve been doing a newsletter and I’m kind of transitioning from another website that have gone… with more clarification of my topic and kind of digging down, going a little bit more niche with it. And so I just want to start over with a whole new design and create a kind of a directory, kind of my personal recommendations about indie media that I find particularly good.

Rick: Okay. So, well, my first suggestion would be for you to take a look at Carta. Since you are a member, Carta is available to you and Carta has this kind of thing built into it automatically…

Member: Oh, nice! That is nice, yeah…

Rick: So… and it’s responsive, it changes shapes and size and drops into stacks. All the kinds of things that you expect it to do in a responsive site. Plus it has a system that’s built into it that allows you to do this as many times as you want. Create as many sets of these responsive columns as you may want to create.

Member: Yeah, that looks really good. That looks exactly like, I could totally live with that… That’s one of the reasons why I became a member is because… Like I said in an email, your free videos helped me get head wrapped around Thesis for the first time and I felt like I could actually use it and it of course, I’m just crazy, I can’t really afford to pay anybody to do this stuff for me so I have to figure it out. That’s what I need, to become more proficient and being able to produce what I need for my goals online. I think Thesis could be my thing, I think it could work for me.

Rick: Well, and in fact, I mean let’s pretend that what you wanted to do is… and these things here are automatically built in, these little attention boxes and this is the default layout of the skin, it has these three columns in it.

First off, I just want to direct your attention to recently published seminars on how to do this in Carta. I have three sets of seminars on using Carta. The first is just sort of the general use discussion, second one is styling various elements and the third one is customizing the templates. One of the customizing the templates example is doing a three-column layout like that as one of the examples.

Member: Oh, cool.

Rick: Just to demonstrate it for you quickly…. the thing is that, if you are doing this classic responsive, you’d have to figure some code out because it doesn’t have the code built in for you to do this. Whereas, in Carta and in Agility, they have very similar functionality and they both have the ability for you to create this, where you would take a Carta column wrapper and I’ll give it a name and just say, 3 Column Content. And say that we wanted to have three columns that are equally sized in it. Then you take 3 Carta Columns where we grabbed the wrapper the first time, now we’re going to grab the Carta column and just call this one the Left Column and say, I want it ⅓ wide. Then another Carta Column, we’ll call this one, the Middle Column and so you want it ⅓ wide and then the last column, which is the Right Column and so you want it ⅓ wide. Then you just drag the column into the wrapper. Drag the wrapper into place or drop it directly in the page and then down below the feature box.

Then what you could do is take some query boxes. Let’s call it Category 1 and then grab another query box, call it Category 2. Then grab the third query box and call it Category 3. Then I’m just going to drag these into those columns so third one to the right column, the second one into the middle column and first into the left column. Save this template and come on over to Skin Content, Options and decide what I want to show up in Category 1, 2 and 3. So, I’m going to choose post, categories and I’m going to choose Cherries for this category and then I’ll have 2 posts. Then in Category 2, we’ll choose posts, categories and this one will be Bananas. And again we’ll choose 2 of those posts. Then finally, in Category 3, we’ll do the same thing. Yeah, posts, categories, this one we’ll be Oranges and I’m going to choose 2 of those.

We haven’t done any formatting with them yet but now you see we’ve got the Cherries column, the Bananas column and the Oranges column and it’s laying out two of them for each of those posts. I can come back to the Skin Editor then and then decide that, oh let’s see… go to the front page, open our 3 column content, go to Category 1 and I don’t want the author to show up there, I don’t want the edit link to show up there but I do want… I’m going to take my featured image and the featured image that I’m going to choose is my tiny-thumbnail and I’ll choose left with text wrap and I’m going to put that above the excerpt. See change the html tag to an h2, link that one to the post, and then one other thing I want to do is take the Carta read more link and drag that into this. Refresh that.

And so you can see that the Cherry post have changed, now it’s got this little image here and it got the read more link, and I have a box that you can use, it’s the extended excerpt box where you can change the link to the excerpt so you can cut it down to half that size if you want and that kind of stuff.

Member: Yeah, this is exactly the type of thing I need to do and seeing you do that, now of course I have done the categories, can you do that with just about anything? Featured images or slider box, slider boxes and things like that is in the widgets, right?

Rick: Well, actually I have a box called the BX Content Slider Box that will take a post and slide through them. So you add the BX Content Slider Box and then you add the query box to it and you decide which part of the query box you want to show up.

Member: Wow, that’s a pretty cool and exciting stuff to be able to do that without knowing how to code…

Rick: So this is an example, it looks like a featured products slider but what it is, is that BX Content Slider that takes the query box and grabs the featured image and the title and excerpt…

Member: Yeah, this is what I’m going to be doing… I’m going to be highlighting you know, kind of the best of, kind of thing because I’m doing a weekly email newsletter about my handpicked indie media and various genres. I really want to do like a showcase counter and a set you know what I mean?

Rick: Right

Member: So, yeah, this is really cool, I like this.

Rick: Well, so, my suggestion in this is use the Carta skin instead of Thesis Classic Responsive and it has like you saw, the built in ability to easily create three columns and you didn’t use any CSS with this, right? All we did is drag them in, select some options and call it good. You can see what happens when it gets down to an iPhone, they just drop down like that.

Member: That’s beautiful!

Rick: So, it all works.

Member: Sweet. Well, I’m going to do that then I’d grab that and will get that skin and start working with that and learning, modelling around it…

Rick: So, start off with Using Carta Skin for Thesis 2, this is the seminar to begin with because it goes through all the basics of it and then it moves on to extended styling and then template reconstruction and that kind of stuff.

Member: Fantastic and thank you so much for answering my question tonight.

Rick: Well, you’re welcome and it’s my pleasure.

Member: Alright.

Rick: Okay, you bet. Well, talk to you later. Bye bye.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment