Published
on
October 18, 2017
| 444 views
| 3 followers
members are following updates on this item.
|
CSS Success: Stay Classy
Four classes that can be used to customize your digital workplace.
In previous CSS Success posts, we've talked about using CSS to show and hide specific areas of your Igloo, including adjusting navigation elements and profile fields. But your options run much deeper than that. There are classes and ids all over the place in Igloo that can be targeted in the Appearance area to change their shape or colour, or even make them disappear.
For an introduction to using CSS in Igloo, check our first post in the series. It's also included in the sidebar with our additional guides.Now for five classes that can drastically change your digital workplace.
Widgets
In addition to being able to be given a custom class, every widget in Igloo has a class associated with its type. Calendar widgets, blog article widgets, etc. This will let you customize any kind of widget everywhere in your Igloo, ensuring it always has the look and feel that you need. Widget classes always begin with ig-widget- followed by the widget type, and can be found by using your browser to inspect a widget. To round all of the corners on my calendar events widgets, I might use the following:
.ig-widget-calendar {
border-radius: 5px;
}
You can find more tips on customizing widgets in our Working With Widgets article.
Channels and Spaces
Every Channel, Space, and Page also has its own class, letting you use the Appearance area of the Control Panel to fine-tune individual parts of your digital workplace. The classes always take their cue from the url of the item, so a Space that's at home/marketing would have the class ig-space-marketing, and a Page that's at /vacationcalendar's class will be ig-page-vacationcalendar. Channels have two classes, one letting you target the specific channel, formatted like Pages and Spaces, and another that lets you target all channels of that type, using ig-channeltype-blogchannel, for example. To change all calendar widgets on a specific Page, we might use the following:
.ig-page-mypage ig-widget-calendar {
background-color: blue;
}
The first class points to the page, and the second to the widgets contained within. All Page, Space, and Channel classes are available from the <body> tag of an item.
Sidebars
Blog posts like this one come with a sidebar, which includes Labels, hits, and related links. If you're finding that cluttersome, you can remove that entirely with a quick change. The sidebar's class is column-secondary, and adding a display attribute can make it go away.
.column-secondary {
display: none;
}
Using display: none will make it disappear entirely, while using the visibility: hidden attribute will make it invisible, but reserve the space it takes up on the page. Experiment with it to get the right look for your channels.
Comments
Any post can have the comments disabled, but you can make them vanish from sight by targeting the ig-comments class. This class encompasses the Add a Comment box, all existing comments, and even the message that shows when comments are disabled. We can turn of all comments in all Wiki Channels with the following code:
.ig-channeltype-wikichannel ig-comments {
display: none;
}
And away they go. This can be useful for creating read only Knowledge Bases or policy centres.
There are classes nestled all over your Igloo, and they can be incredibly useful to show, hide, or arrange elements in your digital workplace to ensure that it does exactly what you need. For more information about the specific functions outlined here, you can ask a question in the Community area.
Viewed 443 times
Page Options
