Published
on
May 2, 2018
| 2,404 views
| 3 followers
members are following updates on this item.
CSS is powerful. When it comes to how your Igloo looks, its reach is absolute, from the fonts in your articles to the whether your navigation has links in it. It can make things appear, disappear, and change position. Previously we've looked at ways to focus it on widgets, particular areas, and specific page elements like links. Today's post will help you make significant changes to the appearance and features available on Channels, articles, and files.
As ever, for a review of the basics of using CSS in Igloo, see our first article in the series.
This was covered in Profile Pizzazz, but it's worth revisiting the difference between the display and visibility attributes in CSS. Visibility is a lighter touch. It preserves the spacing of the item, and ensures that nothing else on the page changes position, but removes the targeted container from view. The code for that looks like this:
targeted item here { visibility: hidden; }
The display option, on the other hand, eliminates the target entirely, including any space it would take up. This can change the position of other things on the page, and let you affect the shape as well as the appearance. The code for display will be:
targeted item here { display: none; }
With that reviewed, you can use those attributes to customize the appearance of Channels and articles. The right-hand column has a class available for exactly this:
.column-secondary
Disabling the secondary column can streamline the page, but will also remove features like the related links, labels, and search box. It's not an all or nothing setting, though. Each element of the secondary column can be removed or adjusted individually using the right classes and ids.
#ig-magicbox -- The container for social functions. It includes views and followers, as well as labels, likes, and ratings. #relatedContent -- The related content area. .ig-search-channel -- The Channel search box. .ig-stats-box -- Channel activity, including recent posts and channel followers.
The area below an article can be customized too, letting you remove or change comments and tasks. The following classes can be used to target those functions, removing them. We recommend using the display attribute, in order to minimize the white space at the bottom of the page.
.ig-comments -- The entire comment area, including existing comments and the ability to add them. .ig-tasks -- The social task area for viewing and assigning tasks to the item.
Adjustments like this can cover your entire digital workplace, or be limited to a specific Space or Channel using the instructions from our Stay Classy article.
The most common use case for limiting these features is when presenting read only areas of the community, such as policies or knowledge bases. Streamlining the page makes it easier to focus on the content.
If you have other questions about access, the Igloo platform, workflows, or best practices, you can leave a comment here, or ask a question in the Community area.
4 Comments
Thanks Jim. Love these CSS tricks articles. They are very useful for me.
Very useful CSS tricks. Thanks Jim for posting these.
Hey Jim Tigwell, is it possible to CSS hide some elements within an article form? For example.. We want to hide attachments, related content, and broadcast. Thanks!
Hi Joe,
Several elements of the article creation page do have unique classes, and can be hidden. Several of them are detailed in this article: https://customercare.igloosoftware.com/support/community/tips/css_success_quality_of_life
Related Content and Broadcasts don't, but Broadcasts can be controlled through Roles. It's worth noting that these pieces can't be hidden for a particular channel, but will be hidden across the entire digital workplace.