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:
Remember to click Save CSS overrides after making changes!
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 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 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 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.
If you know absolutely nothing about CSS, we suggest reading this tutorial first.
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.
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 }
This video assumes you know basic HTML and CSS.
The following is a list of tools that can make Communifire CSS / HTML customization even easier:
Font Awesome 5.13.0Get class names for icons you can use throughout Communifire.
Color Code Generator Retrieve the color code you need for your site.
Clean CSSInstantly format your CSS, making it more readable.
Ultimate CSS Gradient GeneratorEasily generate code for CSS gradients.
CSS Border Radius GeneratorEasily generate code for rounded borders.
Please enable JavaScript to use file uploader.
is requesting access to a wiki that you have locked: https://my.axerosolutions.com/spaces/5/communifire-documentation/wiki/view/82/css-overrides