We've referenced the ability to apply classes and css on widgets before, but it can be a powerful tool for managing the look and feel of your community. With the right classes applied, you can change all of the widgets in your community with a single line, and save a lot of work. This post is a starting point, but the sky is the limit when it comes to customizing your Igloo community to fit your brand. 

Widget type classes

Every type of widget has its own class, starting with ig-widget-type. You can find the specific class by using your browser's Developer Tools to inspect a widget of that type, and looking to the classes attached to the widget. The widget classes is shared by all widgets of that type, so changes that target that class will affect all widgets of that type across your whole community. If you want to make sure that every new widget created anywhere matches the feel of your site, this is the way to do it. No one will have to do any additional setup or configuration for the appearance, your community-wide css will handle all of that for them. 

Widget custom classes

In the Appearance tab of widgets, you can set up custom classes. This will let you apply css changes to certain widgets, but not others. Enter the class in the Class area, and add additional classes by separating them with a space. Use custom widget classes to make a few widgets pop, or apply special branding to your homepage or another area of your community. 

CSS template

Here's a template you can use to get started. Add it to the bottom of the CSS editor in the Appearance area of the community, accessible through the Control Panel, and make any changes you want there. 

/* CSS template begins */
.YOUR CLASS GOES HERE {
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #222222;
border-radius: 5px;
}
/* Style the Title of a widget */
.YOUR CLASS GOES HERE h2 {
color: #222;
font-size: 25px;
}

Don't be afraid to experiment. You can always change it back to the defaults by removing the code from the editor. 

For more information about the specific functions outlined here, you can ask a question in the Community area.