CSS Success

This item is archived and can no longer be modified. Please contact an administrator if you wish to unarchive this object.

Tips & Tricks

Published

March 15, 2017

| 4,330 views

| 1 follower

Published

March 15, 2017

4,330

Offline

Jim Tigwell

Some quick CSS tricks to streamline your community

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;
}

CSS in Igloo

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.

Targeting Igloo selectors

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:

Pages - All Pages, Spaces, and Channels have an id based on their URL built into the <body> tag.
The Trailer Bar - This bar at the bottom of the page includes options for following, broadcasting, and email links, and can be targeted with #trailerbar.
Parts of content - Classes and ids can be added to articles using the code view, and wrapping text or images in <div class="thisismyclass"></div> tags.
Widgets - Widgets have their own appearance tab, and custom classes can be added there

Use Cases

Hide the download button in a community

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;
}

Format a widget

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;
}

Format a table

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.