Logo and Branding | Axero Documentation

Customize your intranet's appearance by adding your logo, choosing a header color, and uploading a favicon.

Logo

The logo is displayed in the intranet header. To upload a new logo:

Header

To change the background color behind your logo or site name in the header, enter a HEX value or use the color picker to choose a color. You can choose either a light- or dark-colored font for the navigation text. Click Save to update your settings.

Note: We recommend using the Light font color option if your background is dark. Alternatively, if your background is light-colored, use the Dark font color.

Favicon

The favicon is displayed in the address bar and in browser tabs. To upload a new favicon:

1. Click Choose File
2. Select your favicon file
3. Click Save

The favicon icon must be an .ico file.

Note: After uploading a new favicon, clear your browser cache (press Ctrl or Cmd + Shift + R) to see the updated favicon.

Customize the logo depending on the Space

Axero allows you to display different logos in the header based on the Space ID. By default, the header logo displays the logo specified in General Settings. However, you can customize the header logo to display a specific logo for each Space ID.

To customize the header logo for each Space ID, you can use the following script:

<script>
    const spacesLogos = {
        default: "https://myintranet.communifire.com/Assets/Uploaded-Photos/90c5d361-6c27-4411-99b3-a2f2fe49161a.png",
        257: "https://myintranet.communifire.com/fileattachment?file=oOfcpLMM3FJLOWguZxvfeQ%3D%3D&v=1&driveID=0",
        262: "https://myintranet.communifire.com/fileattachment?file=Lt%2Fb%2FeDxEPcLHflHNklbZA%3D%3D&v=1&driveID=0",
        252: "https://myintranet.communifire.com/fileattachment?file=pF5QSTDkWAViZlOdpfo%2F1Q%3D%3D&v=1&driveID=0",
        256: "https://myintranet.communifire.com/fileattachment?file=wxkDEUt2S1zpUIopQCHyrA%3D%3D&v=1&driveID=0",
        284: "https://myintranet.communifire.com/fileattachment?file=Ok42amhpGqLIv2%2FZGOOWcg%3D%3D&v=1&driveID=0",
    }

    function getSpaceFromUrl() {
        const queryString = window.location.pathname.split('/');

        let spaceId;

        queryString.forEach( function(element, index) {
            if (element === 'spaces') {
                spaceId = queryString[index + 1]
            }
        });

        getLogoFromListOfLogos(spaceId);
    }

    function getLogoFromListOfLogos (spaceId) {
        const logoUrl = spaceId ? spacesLogos[spaceId] : spacesLogos['default'];

        setLogoToHeader(logoUrl);
    }

    function setLogoToHeader (logoUrl) {
        const $logo = $('#axero-header').find('.brand img');

        $logo.attr({
            'src': `${logoUrl}`,
        });
    }

    getSpaceFromUrl();
</script>

To use this script, you need to add it to the Footer Scripts in General Settings. Make sure to replace the URLs and SpaceIDs in the script above with the desired logo image URLs and SpaceIDs for your site. 

The script works by checking the page URL and retrieving the Space ID. It then looks up the corresponding logo URL and sets the header logo to it.

If the Space ID is not found in the script, the default logo URL is used instead.

By using this script, you can set a different logo for each Space ID, making it easier to customize the look and feel of your site within each space. 

Related

How to Upload Media Assets 

Upload media assets and use them throughout your intranet on content, Page Builder pages, CMS pages, and more.

Design Resources 

Axero makes it easy for you to customize your intranet to match your company's brand and culture. With Page Builder, CSS Overrides, and the navigation header builder, the possibilities are endless. This page provides guides and resources for making common design changes.

Stock Space Images 

Create images for your spaces using your company colors.

How to Create Your Own Widget Style

You can create your own widget styles that match your company branding and add them to your site using CSS overrides.

Dark Mode 

Give your eyes a rest and enable dark mode.

How to Add an Image in an Email Template

You can add an image, such as your company logo, to email templates.