Build Your Own Business Website header image

Styling the Carta Skin for Thesis 2 – Part 13 – Create a Custom Widget Style 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 that you know the ways in which you can style widgets in the Carta Skin for Thesis 2, the next thing we’re going to do is create a custom widget style using those packages.

The 3 Different Widget Elements

But before we do that, I want to draw your attention to 3 different elements of a widget. This is probably the best way to show it. A widget has a container which is what you can see, the thing is wrapped around right now, it has a container. It has a widget title which is the title here that we’ve mentioned earlier and it has widget content which is this here.

Content That Widgets Can Contain

Now, the widget content can be a map, it can be a photo, it can be text, it can be a list of categories or pages or whatever, right? It can be anyone of those things. And those are the 3 different main things that this package gives you control over.

Custom Widget Style Package Organization

I’ve tried to organize the package in that way. So you have widget title, widget content and then the widget container. So then let’s just come over here and let’s say this is Style6 instead, style-6.

Add a Carta Widget Styles Package

Now what we’ll do is come over to our custom Skin Editor, come over to CSS, and over to our packages. We’re going to create a Carta Widgets Style package, add the package. We’re just going to give it a name style 6. The reference will be style6 and the CSS selector will be .widget.style6.

Then we come over to our options and here’s the widget title with its set of options then the widget content here is text, the headings, the span text, the links, the hovered links, the lists and a typography and then the widget container is all this stuff down here.

Style the Widget Title

So in this case, let’s make our widget title Arial Black, 28 pixels tall and let’s center it and give it 1 pixel of letter spacing. Now, we’re not going to do anything with margin or padding for the moment but we’re going to give it a background.

Add Background Image

And actually, what I want to do is give it a background image. So I’m going to save this, come over to my images, choose a file and let’s use this one here classy_fabric background so we’ll use that one.

Come back over to CSS, open up our package and widget title. We’re going to give it this background image and it’ll be repeat. The rest of those don’t matter but we’re going to give our text color a color of white.

Create Span Text Size

Widget text for the moment, we’re going to leave alone and we’ll leave headings alone. But we’ll create a span text size so I can show you what that is and we’ll make that bold and let’s just make that color red. Because our column is 320 pixels wide, we’re going to enter that as our typography in that way things like line heights and that kind of stuff will be set correctly.

Set Background Color

In our widget container, we’re going to set a background color of efefef so a light grey and otherwise, we’ll leave it alone for the moment.

Add Package Reference

Let’s save the CSS and then we need to go put that package reference in our custom CSS. So we’ll come back over here to custom CSS and we’ll put the ampersand and then style6, save the custom CSS. Whoops, we got that wrong there, it’s a style-6 there. We have to get the CSS selector right.

Review the Style and Make Changes

Now save the CSS and now you can see we’ve got that background image that stack in there and then our background color.

Now obviously, we need some padding around this and in fact, I think maybe a nice darkish border around this whole thing and then more padding above and below the heading. So let’s come back over here to style6.

In our widget text we want to give it some padding so right now let’s just give it 20 pixels of padding, so right, bottom and left, we don’t need any top padding. Go to our widget title settings and look at padding and on our top padding, I’m going to give it 10px and bottom padding of 10px and let’s see how that looks.

On our widget container, if we look at our border, I’m going to give the border a 1 pixel and it’s going to be 888. Let’s try that. We’ll save that, save the CSS and in order for this to really work, what we need to do is make sure that we’ve told our widget to automatically add paragraph tags because that’s what’s missing from this. So if it’s wrapped in a paragraph tag then we get the spacing that we need to around it.

How a Span Tag Works

Now, I want to demonstrate how this span tag works. So if we come back to our widget and let’s type s-p-a-n. So it’s opening span tag and then we’ll do the closing span tag. We don’t have to add a class to it, all we have to do is add span here and save that,. Come back over and refresh it and you can see that little piece of text got our span styling, right?

Add Drop Shadow

I suppose one other thing we could do here would be to add a little bit of drop shadow to that. We could do so by coming over here to the container and then giving ourselves a horizontal offset of 2, vertical offset would be 2, shadow blur would be 3 and shadow color would be 3. For shadow color, let’s just give 666. Hit save and now we’ve got a little bit of drop shadow there.

If you want that drop shadow to be sort of semi-transparent, what you can do is use that rgba instead and we’ve talked about earlier. So we do the Hex-to-RGB and then the color we’re going to do is 666666, convert that to rgb, it’s 102. Come back down here, let’s call it 4, 4 and then you can rgba(102,102,102 0.5). Hit save, save the CSS, come over here and refresh.

Now we end up with that nice sort of semi-transparent drop shadow that you can kind of see through which I think adds quite a bit to the appearance of that.

Get CSS Code that the Package Produced

Once you’ve done this, what you do is to open up your CSS file again using whatever your favorite tool happens to be. You can do this in FireFox, I want to do it in Chrome, you could also just download your css.css file to your computer and use your own code editor.

In Chrome I’ll inspect the element, come over here to resources. Under resources and frames, I’m going to open up that folder and then scroll down to css.css and this code is going to be at the very bottom, it’s right down here under custom CSS.

Delete Package Reference and Add Code to Custom CSS

I’m going to copy all of that code then I’m going to come back over to my custom CSS and delete that package reference and place this code in there. I’m going to delete the values that I’m not using and save custom CSS.

And you have exactly the same thing here that you can now apply over and over and over again, right? You can come along to this widget now and take style6 and apply it wherever you want to apply it. And it doesn’t have to be called style6, it can be called anything you want to call it. It just happens to be that I decided to call it style6, you could call it dark grey or whatever you want.

The trick to it is, as long as you use whatever name you give it, you want to place that same thing in the class name of the widget. That pretty much wraps up what I have to talk about now for styling of the Carta Skin for Thesis 2.1.

0 Comments… add one
0 comments… add one

Leave a Comment