Design Resources | Communifire Documentation

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.

How to change the site font

Step 1: Add the font to your site

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.

1. Get the web font's embed code. This is typically a <link> or <style> .
2. Add the embed code in Control Panel > System > General Settings > Header and Footer Scripts > Enter footer scripts, at the bottom.

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.

Once this is completed, proceed to step 2 below to change the site font using CSS overrides.

Step 2: Add CSS overrides

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.

: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.

Add the code in Control Panel > System > CSS Overrides, at the bottom.

h1,h2,h3,h4,h5,h6 {
    font-family:  "JosefinSans-Bold", sans-serif;
}

How to change the background color

Change the site background color to match your company's branding.

Entire site

1. Go to Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

   :root {
       --background-secondary: #cfdfda;
   }

3. Replace #cfdfda with your desired color.
4. Save CSS Overrides.

Check out this How-To Video - Page Builder & CSS Overrides

Single space

1. Visit the space.
2. Right-click anywhere on the page and click Inspect.
3. A pane displaying HTML code will open. Scroll up until you see the body tag.
4. The body tag has a class list. Classes in the class list are separated by spaces. Copy the class that starts with x-custom-space and save it for later.
   
5. Go to Control Panel > System > CSS Overrides.
6. Add the following code, at the bottom.

   body.x-custom-space-human-resources {
       background: #f5d0ad;
   }

7. Replace x-custom-space-human-resources with the class you copied in step 4.
8. Replace #f5d0ad with your desired color.
9. Save CSS Overrides.

How to change the header logo and color

Update the header to match your company's branding.

1. Go to Control Panel > System > Logo and Branding.
2. Upload a file.
   
3. Click Save.
   
4. Enter a hex code or use the color picker.
   
5. Set the Header font color.
   If your header background color is light, select dark. If your header background is dark, select light.
6. Click Save.
   

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; }

Design your homepage

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 .

Homepage sample 1

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:

Homepage sample 2

This sample is a cozy and compact homepage that gives people everything they need to work efficiently.

Layout:

How to change the widget header color

Change the widget header color to match your company's branding.

Individual widgets

1. Go to Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.
   

   /*Widget header background color*/
   .axero-widget.custom-header-color-1 .axero-widget-header {
       background: #3b4150;
       color: white;
       padding-bottom: 15px;
   }

   In this example, the header color is named custom-header-color-1 . You can use any name for your color. The name must be one word without spaces. You can use dashes and underscores.
3. Replace #3b4150 with your desired color.
4. If your background color is light, delete color: white; . Removing this line will keep the header font color as black. Or change white to your desired font color.
5. Save CSS Overrides.

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.

How to change the widget background color

Change a widget's background color to match your company's branding.

Individual widgets

1. Go to Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Widget background color 1*/
   .axero-widget.custom-background-1 {
       background: #3b4150;
       color: white;
   }

   In this example, the header color is named custom-background-1 . You can use any name for your color. The name must be one word without spaces. You can use dashes and underscores.
3. Replace #3b4150 with your desired color.
4. If your background color is light, delete color: white; . Removing this line will keep the widget text color as black. Or change white to your desired font color.
5. Save CSS Overrides.

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 .)

All widgets

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.

How to add a hover animation for image buttons

Add a hover animation to enhance the Image Link Template for the Button Widget .

1. Go to Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

/*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);
}

3. Save CSS Overrides.

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.

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!