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 Page Builder: Header builder, the possibilities are endless.
This page provides guides and resources for making common design changes.
The two most common ways to add custom fonts to your site are to link to an external web font or to upload font files to your site. Below are instructions for both methods.
Using external web fonts
You can use an external web font on your site. You can get web fonts from services such as Adobe Fonts and Google Fonts.
<link>
<style>
Once this is completed, proceed to step 2 below to change the site font using CSS overrides.
Using font files
You can add font files directly to your site. Font file types are usually .ttf or .otf.
Create a private case to have the Axero team upload your font files and add @font-face rules in CSS Overrides.
@font-face
Change all site font
Update all site font to match your company branding. Below is sample CSS code that sets all site font to Newsreader (a Google Font) and uses serif as a fallback. Replace Newsreader with the name of your font. Add the code in Control Panel > System > CSS Overrides, at the bottom.
Newsreader
:root { --font-family: "Newsreader", serif; }
Change only heading fonts
Update just heading fonts to provide a contrast between different fonts. Below is sample CSS code that sets heading fonts to Josefin Sans (a Google Font) and uses sans-serif as a fallback. Replace JosefinSans-Bold with the name of your font.
JosefinSans-Bold
Add the code in Control Panel > System > CSS Overrides, at the bottom.
h1,h2,h3,h4,h5,h6 { font-family: "JosefinSans-Bold", sans-serif; }
Change the site background color to match your company's branding.
Entire site
:root { --background-secondary: #cfdfda; }
#cfdfda
Check out this How-To Video - Page Builder & CSS Overrides
Single space
body
class
x-custom-space
body.x-custom-space-human-resources { background: #f5d0ad; }
x-custom-space-human-resources
#f5d0ad
Update the header to match your company's branding.
Note: If your logo has a small height, the header height will decrease:
To increase the header height and align the logo, add the following code in Control Panel > System > CSS Overrides, at the bottom. You may need to adjust the values for your image and header.
.navbar #axero-header { height: 58px; } .navbar .brand { padding-top: 15px; }
Your homepage is the first thing people see when they visit the intranet. Populate your homepage with featured content, key spaces, and important links and tools. Use our easy drag-and-drop Page Builder and our various Page Builder Widgets .
This sample is a clean and roomy homepage that gives people a quick overview of the latest news and provides links to all the tools they need.
Layout:
This sample is a cozy and compact homepage that gives people everything they need to work efficiently.
Change the widget header color to match your company's branding.
Individual widgets
/*Widget header background color*/ .axero-widget.custom-header-color-1 .axero-widget-header { background: #3b4150; color: white; padding-bottom: 15px; }
custom-header-color-1
#3b4150
color: white;
white
Now you can change the header color of any widget by setting the Custom CSS class. Edit the widget and in the Advanced tab, add custom-header-color-1 . (If you changed the header color name in step 2, use that name instead of custom-header-color-1 .)
All widgets
To change all widget background colors, follow steps 1-5 above. In step 2, delete .custom-header-color-1 from the CSS code. Once you save CSS overrides, the header color will be changed for all widgets.
.custom-header-color-1
Change a widget's background color to match your company's branding.
/*Widget background color 1*/ .axero-widget.custom-background-1 { background: #3b4150; color: white; }
custom-background-1
Now you can change the background color of any widget by setting the Custom CSS class. Edit the widget and in the Advanced tab, add custom-background-1 . (If you changed the header color name in step 2, use that name instead of custom-background-1 .)
To change all widget background colors, follow steps 1-5 above. In step 2, delete .custom-background-1 from the CSS code. Once you save CSS overrides, the background color will be changed for all widgets.
.custom-background-1
Add a hover animation to enhance the Image Link Template for the Button Widget .
/*Styles for image link with hover*/ a.image_link_hover:hover { box-shadow: 10px 10px 20px 0 rgb(0 0 0 / 4%), -10px 0 20px 0 rgb(0 0 0 / 4%); transform: scale(1.01); } a.image_link_hover { display: flex; flex-direction: column; border-radius: 4px; box-shadow: none; overflow: hidden; width: 100%; color: inherit; transition: transform .35s cubic-bezier(0.215, 0.61, 0.355, 1); }
Now you can add an extra flair to any button using the Image Link template. Edit the widget and in the Advanced tab, add image_link_hover in Custom CSS class.
image_link_hover
Whether you're designing a new intranet from scratch or looking to update your intranet with a redesign, these how-to's will give your intranet the look to match your brand.
Let us know what questions you have. Our team is here to help you reach your design goals!
is requesting access to a wiki that you have locked: https://my.axerosolutions.com/spaces/5/communifire-documentation/wiki/view/81647/design-resources
Your session has expired. You are being logged out.