Logo and Branding | Communifire Documentation

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

Logo

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

Header

To change the background color behind your logo or site name in the header enter the HEX value or use the picker to choose your 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 a dark color. Alternatively, if your background is a light color, use the Dark font color.

Favicon

The favicon is displayed in the address bar and tabs of the internet browser. 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 with the desired logo image URLs and SpaceIDs for your site. 

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

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

By using this script, you can customize the header logo to display a specific logo for each Space ID, making it easier for you 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 

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 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, in email templates.