Heretto Portal Branding and Configuration

Heretto Portal Configuration Reference

You can modify the default Heretto Portal settings by editing the config.json file.

Tip: For more information about the config.json file, see Customize the Heretto Portal Settings. You can also preview the JSON settings by going to https://{portal-url}/api/config.

Default config.json file

{
    "title": "Content Portal",
    "sectionFilter": {"type": "sitesection"},
    "unsupportedBrowserFile": "",
    "unsupportedBrowserRegExp": "",
    "supportedBrowserMinimumVersions": {
        "chrome": "60",
        "firefox": "63",
        "safari": "11",
        "edge": "79",
        "opera": "47"
    },
    "prerenderToc": true,
    "cacheExpiry": 900,
    "prettifyPre": true,
    "prettifyCode": true,
    "prettifyCodeLang": 'bash',
    "knownIssuesUrl": "https://github.com/Jorsek/content-portal/issues",
    "keywords": [
        "node",
        "express",
        "static"
    ],
    "toc": {
        "allowFilter": false,
        "contentScrollConfig": {
            "block": "start",
            "behavior": "auto"
        }
    },
    "footer": {
        "logoSrc": "",
        "logoAlt": "",
        "copyright": "message.footer.copyright",
        "links": []
    },

    "search": {
        "ref": "href",
        "fields": [
            "href",
            "shortDescription",
            "title"
        ],
        "sections": [
            "sitesection"
        ],
        "facets": [
            "Information_Type",
            "Area"
        ]
    },
    "analytics": {
        "datadog": {
            "datacenter": "us",
            "resourceSampleRate": 100,
            "sampleRate": 100
        },
        "google": true
    },
}

Common Customizations

Change the Heretto Portal title

Fill in "title": with your own value. For example: "title": "My Company".

Change the default section icon

"defaultSectionIcon": "your-server-url/default-icon.png",

Change the default favicon

"favicon": "your-server-url/favicon.ico",

Heretto Portal Color Palette

The color palette can be modified and customized in your portal using CSS or Material-UI.

How to Customize the Color Palette in Heretto CCMS

Colors are one of the first things you want to customize when preparing your Heretto Portal. In Heretto CCMS, there are two possible ways to modify the colors of your portal. Depending on your skills, you can modify either the custom.css file or the config.json file.

Remember: CSS and JSON files won't render in Heretto CCMS text editor. To modify these files you need to edit the source code.

Access custom.css and config.json files

To access your custom.css and config.json files:

Open your Content Library.
In the __configuration folder, open the portal_configuration folder.
Right-click on the file you want to edit.
Select Edit Source.

With the file open, you can now modify your file and work on the Color Palette.

CSS Color Palette

You can use CSS customizations to quickly modify the colors of your portal.

Customization example

You can overwrite the default settings by editing the custom.css file.

h1.ezd-portal_hero_title {
    color: #fff;
}

h1.ezd-portal_hero_title {
    color: rgb(247, 11, 11);
}

Material-UI Color Palette Reference

You can use Material-UI customizations to quickly style your Heretto Portal.

For more information, refer to: Customize MUI with your theme.

Customization Example

You can overwrite the default settings by editing the config.json file.

"theme":  {
   "palette": {
      "type": "light",
      "primary": {
          "dark": "#333",
          "main": "#666",
          "light": "#999",
          "contrastText": "#DDD"
      },
      "secondary": {
          "main": "rgb(20,120,155)",
      }
  }
},

Adding your Logo, Favicon, or Banner

The Heretto Portal supports customizations specific to your company branding.

Image Configuration

The portal configuration requires images to be hosted externally if you want to use them as a logo, favicon, or banner for your portal.

We recommend using your organization's existing logo, favicon, and banner (if applicable) files for consistency of branding. Typically, your IT team can provide a URL for your team to link to those files. Once you have the URLs to those files, you can link them in the config.json file, including them as part of a theme object.

Note: The URL to the files must be to publicly for them to be linked into the config.json file.

Figure 1. Example themes with links to image files

"theme": {
        "extends": "whitelabel",
            "hero": {
                "&.index-root, &.section-index, &.content-index, &.search-index": {
                "backgroundImage": "url(https://{host-url}.com/hero.jpeg)"
            }
        },
            "appBarImage": {
                "imageSrc": "https://{host-url}.com/logo.png"
        },
            "appBarDrawerImage": {
                "imageSrc": "https://{host-url}.com/logo.png"
        }        
    },

Starter Themes Reference

You can select one of our starter themes as a base for your further customizations.

Starter Themes Overview

base

The most basic starter theme that is perfect for heavy customizations.

No inherent customizations
Basic structure
No colors
Every element shown

whitelabel

A middle ground between the basic and decorated starter themes.

Basic CSS customizations
Limited CSS transitions
Limited color palette
Some hidden elements

decorated

The most robust starter theme that requires little customizations.

Advanced CSS transitions
Advanced CSS customizations

Change the starter theme

You can overwrite the default settings by editing the config.json file.

Figure 2. Configuration Example

"theme": "decorated",

Heretto Portal Typography

You can configure custom fonts for Heretto Portal. There are three ways to include custom fonts. Choosing the approach that will work best for you depends on how you decide to structure the styling and configuration of the portal.

How to Customize Fonts

The first approach is to use the Web Font Loader. It is a JavaScript library that gives you control over fonts and lets you use multiple web font providers, like Google Fonts or Typekit. To implement this approach, find a font you like and add the font family to the config.json file. For example, this is how you add a Google font family:

"webFonts": {
"google": {
"families": ["Material Icons Outlined"]
},
"custom": {
"families": ["Social"],
"urls": ["https://assets.portal.heretto.com/fonts/social-icons.css"]
	}
}

If you need additional variations of the font, you need to include them in the config.json file. For example:

"webFonts": {
"google": {
"families": ["Material Icons Outlined", "Nunito:300,700"]
}
},

You can then reference the font in the CSS file. For example:

font-family: Nunito;

The second approach is to add a special stylesheet link into the config.json file. The stylesheets property in the configuration file needs to include a custom stylesheets value that links to the appropriate stylesheet. These are included at the beginning of the HTML page. Here is an example of the config.json file code:

"stylesheets": ["https://my.favorite.cdn/custom-styling-items.css"]

The third approach is to use the theme.overrides.MuiCssBaseline configuration property. These overrides are included via Material UI + JSS and are server-side rendered in <style> elements.

"theme": { 
"overrides": {
"MuiCssBaseline": {
"@global": {
"@font-face": [{
fontFamily: "'Fira Sans'",
src: "url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2) format('woff2')",
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
fontWeight: "normal",
fontStyle: "normal"}]
		}
	  }
     }
}

To override the material UI theme font there are two places that need to be defined in the theme property of the config.json file. The first place is in the:

theme
typography
fontFamily

properties.

The second is the --mdc-typography-font-family CSS variable.

"theme": { 
"typography": {
"fontFamily": "'Fira Sans', sans-serif",
	},
}

The mdc-typography-font-family can be set one of two ways: A regular CSS file included by the tenant, or in config.json file. Here's a CSS example:

:root {
--mdc-typography-font-family: 'Fira Sans', sans-serif;
}

Here is a config.json example:

"theme": { 
"overrides": {
"MuiCssBaseline": {
"@global": {
":root": {
"--mdc-typography-font-family": "'Fira Sans', sans-serif"}
			}
		}
	}
}

WebFonts Reference

You can easily import fonts and use them for your portal customizations.

Example

You can overwrite the default settings by editing the config.json file.

{
"google": {
"families": ["Material Icons", "Material Icons Sharp"]
},
"custom": {
"families": ["Social"],
"urls": ["https://assets.portal.heretto.com/fonts/social-icons.css"]
	}
}

Header Configuration Reference

You can quickly add a logo to the header and mobile drawer.

Common Customizations

You can overwrite the default settings by editing the config.json file.

"theme":  {
  "appBarImage": {
    "imageSrc": "https://www.my_server.com/header_logo.png"
  },
  "appBarDrawerImage": {
    "imageSrc": "https://www.my_server.com/mobile_logo.png"
  },
},

Footer Configuration Reference

You can quickly add a logo to the footer, modify the copyrights text, and add your own links.

Common Customizations

You can overwrite the default settings by editing the config.json file.

Add a logo to the footer

Replace "logoSrc": "" with "logoSrc": "logo_url"

Replace "logoAlt": "", with "logoAlt": "alt_text"

Modify footer copyrights

Replace "copyright": "message.footer.copyright" with "copyright": "custom_copyrights"

Add footer links

"footer": {        
		"links": [            
		{
		"target": "_blank",                
		"href": "https://www.my_server.com/",              
		"text": "Homepage"            
		}
	]
},

Code Formatting Reference

You can customize the way your Heretto Portal shows code snippets.

Common Customizations

You can overwrite the default settings by editing the config.json file.

"outputClasses": {
  "outputclass": [
    "is-code-format",
    {
        "linenums": "linenums_bool",
        "copyable": "copyable_bool",
        "theme": "codeblock_theme",
        "linenums-decorator": "linenum_decorator_str"
    }
  ]
},

outputclass

Defines the @outputclass attributes of DITA elements that you want to style. For example:

.codeblock
.pre

linenums_bool

If true, shows line numbers in code blocks. If false, hides line numbers in code blocks.

copyable_bool

If true, shows the copy code button. If false, hides the copy code button.

codeblock_theme

Defines the highlight.js theme, for example: stackoverflow-light.

linenum_decorator_str

"outputClasses": {
  ".codeblock": [
    "is-code-format",
    {
        "linenums": "true", 
        "copyable": "true", 
        "theme": "stackoverflow-light",
        "linenums-decorator": " "
    }
  ]
},

Gretyl's Portal

Heretto Help

Heretto Portal Branding and Configuration

Heretto Portal Configuration Reference

Default config.json file

Common Customizations

Heretto Portal Color Palette

How to Customize the Color Palette in Heretto CCMS

Access custom.css and config.json files

CSS Color Palette

Customization example

Material-UI Color Palette Reference

Customization Example

Adding your Logo, Favicon, or Banner

Image Configuration

Starter Themes Reference

Starter Themes Overview

Change the starter theme

Heretto Portal Typography

How to Customize Fonts

WebFonts Reference

Example

Header Configuration Reference

Common Customizations

Footer Configuration Reference

Common Customizations

Code Formatting Reference

Common Customizations

Footer Section

Our Support Team is here to help