Search Boxes Overview

You can enable two search boxes in your Heretto Deploy Portal: one in the header and one in the hero section.

Header Search Box

mobile search in Heretto Deploy Portal

The header search box is typically displayed on mobile devices.

You can modify the styling by editing the .ezd-portal_app-bar_search-wrapper CSS class.

Alternatively, you can override styling and settings by editing the config.json file. To learn more about editing Heretto Deploy Portal settings, refer to Customize the Content Portal Settings.

There is a collapsed state for the appBar search: .ezd-portal_app-bar_search-collapse for CSS and appBarSearchCollapse for config.json. It is used to determine whether or not the search icon has been clicked (desktop) or tapped (mobile) to expose the search bar. You can modify the icon with a CSS class .ezd-portal_app-bar_search-icon or with appBarSearchIcon in config.json.

The display and positioning properties for the collapsed state can be overridden to always show on desktop.

Figure 1. Example of Modified Search Bar

Below, you can see example search box modifications introduced in the config.json file:

    appBarSearchWrapper: {
        [MIN_S]: {
            transition: "all 500ms",
            margin: "0.25rem",
            height: "100%",
            flexBasis: "24rem",
            flex: "0",
            "&:hover, &:active": {
                flex: "1"
            }
        },
    },
    appBarSearchBox: {
        height: "100%",
        display: "flex",
        flexDirection: "row-reverse",
        [MAX_S]: {
            width: "calc(100vw - 6rem)",
        }
    },
    hero: {
        display: "none"
    },
    heroSearchWrapper: {
        display: "none"
    }

They result in the following search behavior on desktop:

example of modified search bar

Note that the dark styling has been applied separately.

Hero Search Box

The search input in header is typically displayed on tablets and higher-resolution screens. You can hide or modify it by editing the .ezd-portal_hero_search-wrapper CSS class or the heroSearchWrapper object in config.json.

Figure 2. Hero Section at help.heretto.com
hero section introduced at help.heretto.com

Hero Banner

The entire page layout has a global CSS class for the page type being displayed. These classes are applied to the root element of the HTML for globally applied CSS that you may want to specify for certain types of pages.

index-root

Typically referred to as the “root page”, “root path”, “home”, or “index” page, etc.

.section-index

The first layer of the top-level site sections and potentially a version. For example:

  • /product/2022-r1

  • /customers

  • /content-strategies.

.search-index

The search page accessible under /search.

.content-index

Any other page or URL slug path.

By default, the hero section is shown on all pages. Below, you can see the default settings of the hero section applied in the config.json file.

hero: {
        position: "relative",
        height: "auto",
        backgroundPosition: "center",
        backgroundSize: "cover",
        marginBottom: "0",
        opacity: 1,
        alignItems: "center",
        alignContent: "center",
        "& i18n-message": {
            flex: 1
        },
        "&.index-root, &.section-index, &.content-index, &.search-index, &.error-index": {
            backgroundImage: `url(https://assets.portal.easydita.com/themes/whitelabel/Geometric-Background.webp)`,
        },
    },
    heroSearchWrapper: {
        height: "2.25rem",
        width: "30rem",
        margin: "0 auto",
        [MAX_S]: {
            display: "none"
        }
},

However, you can easily override it for example to remove the background image throughout different pages or introduce a different image URL:

hero: {
        height: "350px",
        "&.index-root, &.section-index, &.content-index, &.search-index, &.error-index": { backgroundImage: "none",
        },
   },

These settings should be always added to the theme JSON object:

{
	"theme": {
		hero: {
        		height: "350px",
        		"&.index-root, &.section-index, &.content-index, &.search-index, &.error-index": {
				backgroundImage: "none",
			},
		}
	}
}