Build Your Own Business Website header image

Styling the Carta Skin for Thesis 2 – Part 12 – Styling Widgets 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.

The next thing we’re going to do in this video tutorial series on Styling the Carta Skin for Thesis 2.1 is take a look at styling widgets.

Ways to Style Widgets in Carta

Carta has a bunch of different ways in which you can style widgets. If we come over here to the Skin Design option, the first and easiest way to style widgets are with the built-in widget styles that are available to you via design options.

Style Using Design Options

The Carta Skin provides you with design options for 4 widget areas, you have the Main Sidebar Widget, the Footer Widgets, the Header Widgets and Supplemental Widgets. And also the 4 areas where you have this sort of automatic design options that you can set.

Main Sidebar Widget is Default Widget

The Main Sidebar Widget is really the default widget and any styles that you apply to these are going to be applied to all of the widgets unless you override them with the different style. So if you wish to configure all of the widgets on your site in the same way, which is the default situation in Carta, then you would just simply style your main sidebar widget.

The Main Sidebar Widget area at a minimum, refers to this sidebar here. So the styles that you do in the sidebar at a minimum apply to that area but without any overrides will also apply to every other widget that you have set up on your site.

Header and Footer Widgets

The Header Widget applies to any widgets that are placed up inside of your header area which you would do using the smart header boxes that we have. The Footer Widgets in a similar way apply to any widgets that are placed inside this footer area.

Supplemental Widgets

Then Supplemental Widgets can be used anywhere you want them and I’ll demonstrate how you do that here in a few minutes but those are the 4 areas where we’ve got this sort of built-in styling ability.

What You can Style in Each Widget Area

Now, each of those has 3 different things that you can style. The first one is the main text and styling the main text, this is all of the text in the widget itself. You can choose a font size, a font family and a font color in text.

Widget links gives you the control then of setting up link color and link decoration for links that are inside the widget. Widget headings give you the ability to style the widget title which is this thing right here. That gets in there because of what you’ve entered inside of the widgets. So right here we have this widget title, “Find Us in Edmonds”, that is the thing that is styled using this sidebar widget headings.

So the 3 sections you have to style are text, you have links and you have headings.

Styling Widgets Using Style 4 and Style 5

Carta also comes with the ability to create a couple of different backgrounds styles. We talked about this in the Customizing the Background Styles earlier in this series. We have Style4 and Style5 Backgrounds that can be customized.

If you customize those, you can set up color, an image and padding, margin, border, border radius and drop shadow and that kind of stuff. You can take the style that you’ve created in this and also apply it to a widget. The way in which you can make this apply to a widget is that Carta automatically adds to all widgets that you have in your widget panel this field down here that says, “Add a class to this widget”.

You can add a class name to this widget if you’re using Style4, the class name would be style-4. You can add the class to this widget at which point the style that you create with the Style4 Background will be applied to it.

Styling Widgets Using the Supplemental Widget Style

This is also the case with that Supplemental Widget style. So if you use the Supplemental Widget text links or headings and you want to apply this supplemental style to a specific widget, all you have to do is instead of style-4, type in supplemental. That has to all be lowercase and has to spelled correctly but if you type in supplemental like this, then the style that you create using that Supplemental Widgets design options will be applied to this specific widget.

Styling Widgets Using Style 1, 2 or 3

So on top of those things, we also have 3 built-in styles and those built-in styles are style-1, style-2 and style-3. Styles 1, 2 and 3 are pre-designed . That is, they have colors and font colors and things like that that are already designed including backgrounds and padding and margin and borders and that kind of stuff.

Their colors change based on the colors that you set inside of your color schemes. So if you change to a green color scheme then they change to follow that color scheme. The exception to that is the Style1 because it relies on the secondary text color so if you were to simply change the secondary text color, Style1 would take that text color and would apply it.

Create Custom Widget Styles

You can also create custom widget styles using a package in Carta. This package is unique to Carta and while people have gone shy of using packages in 2.1 since Chris announced that in 2.2 the packages are going away, at the moment it’s a perfectly legitimate use of the package. Later on I’ll show you how to do that.

Carta Widget Styles Package Options

Let’s come over to the editor and to CSS and open up packages. We’ll create a Carta Widget Styles package. There are tons of options that you can set in this thing. You can set widget title styles, the text styles and headings that you might have inside the text. Span text and links and lists.

Then you also have the opportunity to style the container of the widgets. So backgrounds, background images, margins, padding, border, border radius, drop shadow, all that kind of stuff. This package can be used to generate a widgets style that you would then assign to one of your widgets using whatever class name you give it.

Style Widgets Using Custom CSS

Finally of course, you can just use custom CSS. You can just write style code in custom CSS and if you want to create your own widget style, of course, all you have to do is put that class name inside of the widget down here at “Add a class to this widget”. Then whatever it is you create here with that class name will be applied to that widget so there’s a ton of ways in which you can style widgets in Carta.

A Note About Using Design Options

Now, it’s important to understand that when you are using the design options, the style that you apply here is going to apply everywhere. So if we say Georgia and 16 pixels and use a blue color for the font, then when we save that. That style is going to be applied everywhere.

Now, it’s not applied here because Style 1, 2 and 3 already have styles that override that but in the absence of an overriding style, what you put in that main widgets style applies everywhere.

So let’s say you don’t want it to apply everywhere. Let’s take our Main Sidebar Widget fonts and make that Georgia as well. Let’s make it 26 pixels tall and let’s give it a aquamarine color and then make the text align center. Save our design options, refresh that and again, you can see how it’s applied everywhere that there is not an overriding style that’s been applied.

What we can do next is to make our footer widgets different. So our footer widget text can go back to Arial and 14 pixels and whatever color 1 was. We’ll just give it a dark grey for a moment. Color 1 is 444 so 444 and the Footer Widget Headings then can go again to Arial and 26 and 444 and actually, go back to left. So you can see we’ve got our style there. If we come back over to here, now we’re back to the style that we had before because you can use the different styles to style these things differently.

Combine Built In Widget Styles with Background Styles

Now, one last thing I want to show you then is how to use that background style. What I’m going to do is just replicate our page background style so our page wrapper background style has solid, border width of 1, e8e8 and then bfbf.

What I’m going to do is come down here to backgrounds and Style4 and I’m going to give 20 pixels of padding all the way around. Then I’m going to give it a border width of 1, e8e8e8 as the border color, border radius was 2, drop shadow color was bfbfbf and then it was 0px 2px 2px and 2px.

Say okay to that and save it. Come back over to this and instead of style-2, we could say style-4 and now the style-1 style applies and we’ve added a Style4 Background to it. So it’s possible to take one of those built-in widget styles and the built-in background styles and combine them. You can see that again and just come down here to our top footer widgets and in this one, let’s give it a style-4. Then this one widget area gets that style

0 Comments… add one
0 comments… add one

Leave a Comment