Published
on
March 15, 2017
| 4,431 views
| 1 follower
members are following updates on this item.
Cascading Stylesheets (CSS) is a language that can change the appearance of web pages, including the ones in your Igloo community. It can change fonts, colours, backgrounds, and even whether or not an element appears on a page. You can find a comprehensive introduction to CSS here, but let's go over some basic terms and concepts.
CSS works by targeting specific selectors by type, class (marked with . for a class like .thisismyclass), and id (marked by # for an id like #thisismyid ). Then, it declares the properties of those selectors, like font, border, or padding. To change the colour of a header in something tagged with .thisismyclass blue, the css will look like this:
.thisismyclass h1 { font: blue; }
You can apply CSS in a few places in your community. The Appearance tab in the Control Panel is where it will go most of the time, into the Advanced Theme Editor, or into the additional CSS area if you're using one of the default themes. It can also be placed into the Javascript area of the Advanced tab of any place in the community to use the CSS specifically on that object, or a separate CSS file can be referenced in the meta area, accessible from the Control Panel. The Appearance tab is the best place to add CSS, to ensure that it works across the community, and doesn't conflict with existing CSS.
Almost everything in Igloo has a class, an id or both, letting you target it with CSS and make fine-tuned changes. You can find the selectors on items by using your browser's Developer Tools, and checking the tags directly for "class=" or "id=" elements, which will list the ids. Items in Igloo with easy targets include:
You can hide the download option for files in a community by adding the following code to the Advanced Theme Editor.
#ig-button_download, .icon-download {
display: none;
}
.download {
pointer-events: none;
background-image: none !important;
}
Change the font size in a widget by adding a custom class to the widget's Appearance tab, and targeting it with the following code. You'll need to change out the .customclass with your class, and set the size in pixels to the value you want.
.customclass { font: 16px; }
Tables can also have classes, and can be formatted using CSS. Add a class to a table using the code view in the editor, and target every cell in the table like this:
.tableclass td { border: 2px solid black; }
Using the CSS here may depend on the specifics of your implementation, but it can get you started down the road to having an Igloo community that has exactly the feel and function you're looking for.
For more information about how Igloo uses CSS, you can read up on it in our Knowledge Base, or ask a question in the Community area.