CSS Overrides | Communifire Documentation

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.

If you are new to CSS we suggest watching the CSS for beginners video below.

Bootstrap 2.3.2 UI Framework 

Here's how you access the CSS Overrides:

What Can I Do With 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 space Human Resources, 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 Browse People 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 Beginners

CSS looks intimidating for those who don't know any coding, but it's very easy to learn. Once you learn CSS, you will have the power to highly customize your Communifire site. The below video teaches you how to use Chome Developer Tools to change the look of your site, once your 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.

If you know absolutely nothing about CSS, we suggest reading this tutorial first.

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 Human Resources space and no other spaces, you can accomplish this by specifying the space class name in your CSS code.

Visit the space, right-click anywhere on the page, and click Inspect. Click the Elements tab. Retrieve the space class name from the <body> tag of your space homepage, and add it to your CSS.

The below example will change the color of all paragraphs/text in the Human Resources space to red.

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

Page Builder and CSS Overrides

This video assumes you have knowledge of basic HTML and CSS.

Helpful Tools

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

Font Awesome 3.2.1
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.