CSS Overrides | Communifire Documentation

Overview

CSS Overrides is your answer to customizing the look and feel of your intranet. Using CSS gives you much more flexibility than using a traditional web-based UI tool. CSS is a standard Internet technology used to style websites such as changing font styles, hiding elements, changing background colors, changing site width to full screen, and much more.

To access CSS Overrides, click the gear icon > Control Panel > System > CSS Overrides. 

Add CSS code right in the editor. Remember to click Save CSS overrides after making changes!

Note: You can use CSS overrides to style and modify any front-end page - the homepage, space pages, user profiles, Page Builder pages, etc. Pages in the Control Panel and in Manage Space can't be styled with CSS overrides.

Learn CSS

If you know absolutely nothing about CSS, we suggest reading the W3Schools tutorial first. The tutorial covers how to write CSS code, the different types of selectors that are used to modify a specific element or groups of elements, and various CSS properties such as background color, border, margin, and more.

CSS Overrides Videos

Page Builder has built-in features that make it easy to target individual elements, groups of elements, and an entire page. Learn how to use CSS overrides to customize an entire page, a group of widgets, and one widget.

This video walks you through hiding the Activity Ticker in a space. You'll learn how to get the class of an element and how to get the custom class of a space. Using the principles in this video, you can hide any element on your site.

This video teaches you how to use Chrome Developer Tools to change the look of your site. Once you're satisfied with the look of your site, paste your CSS changes to CSS Overrides and click Save CSS Overrides. It's important to know Chrome Developer Tools only previews what your site would look like. It doesn't apply the changes to your Communifire site.

Sample CSS Overrides

We have tagged the majority of HTML elements throughout Communifire so you can control the elements' behavior using CSS. If you want to hide or modify an element in your intranet, it's probably possible using CSS Overrides. Below are some examples:

Make the Communifire interface liquid to fill the width of the screen.

.axero-community-wrapper-margin, .axero-page .axero-community-wrapper { margin-top: 90px; max-width: 100%; width: 100%; box-sizing: border-box; padding: 0 30px; } 
.axero-page .container-fluid { max-width: 100%; }
.navbar-fixed-top .container { width: 100%; box-sizing: border-box; padding: 0 30px; }

@media (max-width: 767px) {
.axero-community-wrapper-margin, .axero-page .axero-community-wrapper { padding: 0;margin-top: 0px;} 
.navbar-fixed-top .container{padding: 0;}
}

Hide the My Activity Ticker on My Activity Stream and all Space Activity Stream pages.

.axero-activity-ticker { display: none }

Hide My Activity Ticker for ONLY the Human Resources space, but not for any other space.

.x-custom-space-human-resources .axero-activity-ticker { display: none }

Hide join/register links on login pages.

.ax-menu-register { display: none }
.axero-login-join-now { display: none }
.ax-menu-login { display: none }

Change widget header color.

.axero-widget .axero-widget-header { background: #094268; }
.axero-widget .axero-widget-header h3 { color: #fff; }

Change People Directory and Space People from 3 users in each row to 4. (For the People Directory Template )

ul.axero-people-grid li.span4 { width: 20% !important; }
ul.axero-people-grid li:nth-child(3n+1) { margin-left: 30px; }
ul.axero-people-grid li:nth-child(4n+1) { margin-left: 0px; }

Hide Create activities in My Activity Stream.

/*Article*/ #axero-my-account-container .axero-wall-container div[data-entitytype="3"] {display: none;}
/*Blog*/ #axero-my-account-container .axero-wall-container div[data-entitytype="4"] {display: none;}
/*Case*/ #axero-my-account-container .axero-wall-container div[data-entitytype="19"] {display: none;}
/*Event*/ #axero-my-account-container .axero-wall-container div[data-entitytype="5"] {display: none;}
/*Idea*/ #axero-my-account-container .axero-wall-container div[data-entitytype="44"] {display: none;} 
/*File*/ #axero-my-account-container .axero-wall-container div[data-entitytype="14"] {display: none;}   
/*Album*/ #axero-my-account-container .axero-wall-container div[data-entitytype="18"] {display: none;}
/*Photo*/ #axero-my-account-container .axero-wall-container div[data-entitytype="6"] {display: none;}
/*Space*/ #axero-my-account-container .axero-wall-container div[data-entitytype="13"] {display: none;}
/*Video*/ #axero-my-account-container .axero-wall-container div[data-entitytype="7"] {display: none;}   
/*ForumPost*/ #axero-my-account-container .axero-wall-container div[data-entitytype="54"] {display: none;}
/*ForumTopic*/ #axero-my-account-container .axero-wall-container div[data-entitytype="55"] {display: none;}
/*Wiki*/ #axero-my-account-container .axero-wall-container div[data-entitytype="9"] {display: none;} 

CSS for Spaces

We've added space names as classes to pages throughout your intranet. Meaning, if you only want your CSS to apply to the Human Resources space and no other spaces, you can accomplish this by specifying the space class name in your CSS code.

To get the class name for a space, visit the space, right-click anywhere on the page, and click Inspect. In the Elements pane, scroll up until you reach the body tag. The body tag includes a class list - several keywords separated by spaces. The space class name is the keyword that starts with x-custom-space . 

When you want to make a change to a specific space only, add the space class to the CSS code.

Example: This code changes the font color of all paragraphs:

p { color: red; }

To make the code affect only the Human Resources space, we add the space class at the beginning of the code.

.x-custom-space-human-resources p { color: red; }

Helpful Tools

The following is a list of tools that can make Communifire CSS / HTML customization even easier:

Font Awesome 5.13.0
Get class names for icons you can use throughout Communifire.

Color Code Generator
Retrieve the color code you need for your site.

Clean CSS
Instantly format your CSS, making it more readable.

Ultimate CSS Gradient Generator
Easily generate code for CSS gradients.

CSS Border Radius Generator
Easily generate code for rounded borders.

Related

Design Resources 

Communifire makes it easy for you to customize your intranet to match your company's brand and culture. With Page Builder, CSS Overrides, and the navigation header builder, the possibilities are endless. This page provides guides and resources for making common design changes.

Homepage Ideas 

The homepage is the first thing people see when they visit your intranet or space. Find inspiration for your own homepage and space homepages with these sample homepages.

How to Add Infinite Scroll to a Content List Template 

Add infinite scroll to a Content List template to let people browse for more content without leaving the page.

Dark Mode 

Give your eyes a rest and enable dark mode.