Design Resources | Axero Documentation

Together, Page Builder, CSS Overrides, and the Page Builder: Header can change almost any part of how your intranet looks.

This page shows how to make the most common design changes.

How to change the site font

Step 1: Add the font to your site

There are two common ways to add a custom font to your site: link to an external web font, or upload font files. Instructions for both follow.

Using external web fonts

Services such as Adobe Fonts and Google Fonts offer web fonts you can use on your site.

1. Get the web font's embed code (the snippet the font service gives you to paste into a site). It's usually a <link> or <style> tag.
2. Paste the embed code at the bottom of Control Panel > System > General Settings > Header and Footer Scripts > Enter footer scripts.

Then go to step 2 below to change the site font with CSS overrides.

Using font files

You can add font files directly to your site. Font file types are usually .ttf or .otf.

Create a support case and the Axero team will upload your font files and add @font-face rules (the CSS that tells browsers where to find the font files) in CSS Overrides.

Then go to step 2 below to change the site font with CSS overrides.

Step 2: Add CSS overrides

Change all site fonts

Update all site fonts to match your company branding. The sample CSS below sets every site font to Newsreader (a Google Font), with serif as the fallback. Replace Newsreader with the name of your font.

Paste the code at the bottom of Control Panel > System > CSS Overrides.

:root {
    --font-family: "Newsreader", serif;
}

Change only heading fonts

Change only the heading fonts so they contrast with the rest of the text. The sample CSS below sets heading fonts to Josefin Sans (a Google Font), with sans-serif as the fallback. Replace JosefinSans-Bold with the name of your font.

Paste the code at the bottom of Control Panel > System > CSS Overrides.

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.

The CSS Overrides page has a how-to video on Page Builder and CSS overrides.

Single space

1. Visit the space.
2. Right-click anywhere on the page and click Inspect.
3. A pane opens showing the page's HTML code. 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 is short, the header gets shorter too:

To increase the header height and align the logo, add the following code at the bottom of Control Panel > System > CSS Overrides. 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. Fill it with featured content, key spaces, and important links and tools, using the drag-and-drop Page Builder and its Page Builder Widgets.

Homepage sample 1

This sample is a clean, roomy homepage. It gives people a quick overview of the latest news and links to all the tools they need.

Layout:

Homepage sample 2

This sample is a cozy, compact homepage that gives people everything they need to get their work done.

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

   This example names the header color custom-header-color-1. You can use any name, as long as it's one word with no spaces. Dashes and underscores are allowed.
3. Replace #3b4150 with your desired color.
4. If your background color is light, delete color: white; so the header text stays black. Or change white to the font color you want.
5. Save CSS overrides.

You can now give any widget this header color through its Custom CSS class. Edit the widget, and on the Advanced tab, add custom-header-color-1. (If you gave the color a different name in step 2, use that name instead of custom-header-color-1.)

All widgets

To change the header color of all widgets, follow steps 1 to 5 above. In step 2, delete .custom-header-color-1 from the CSS code. When you save CSS overrides, every widget's header takes the new color.

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

   This example names the background color custom-background-1. You can use any name, as long as it's one word with no spaces. Dashes and underscores are allowed.
3. Replace #3b4150 with your desired color.
4. If your background color is light, delete color: white; so the widget text stays black. Or change white to the font color you want.
5. Save CSS overrides.

You can now give any widget this background color through its Custom CSS class. Edit the widget, and on the Advanced tab, add custom-background-1. (If you gave the color a different name in step 2, use that name instead of custom-background-1.)

All widgets

To change all widget background colors, follow steps 1 to 5 above. In step 2, delete .custom-background-1 from the CSS code. When you save CSS overrides, every widget takes the new background color.

How to add a hover animation for image buttons

Add a hover animation to buttons made with 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.

You can now add the animation to any button that uses the Image Link template. Edit the widget, and on the Advanced tab, add image_link_hover in Custom CSS class.

Related pages

• CSS Overrides (where every CSS snippet on this page is pasted)
• Logo and Branding (to change the logo, header color, and favicon)
• Header and Footer Scripts (where the font embed code goes)
• Page Builder (to build the homepage layouts shown here)
• Space Homepage (how a space homepage is set and what it shows by default)