Documentation
Theme - Search Interface UX
Administration > Search UX > Theme (https://applicationurl/admin/interface/theme)
Introduction
During development, we made sure that the user experience can be altered towards your needs as much as possible. Therefore, you can modify the search interface experience towards your needs by changing the theme.
When editing the theme, we recommend to create copies of you theme JSONs and to version these in a versioning system, such as GIT.
Validation
When validating a theme, it is being checked against the expected properties. This means that missing fields will be reported. Obviously, the look and feel must be tested after saving the theme.
Saving
When saving, the changes take affect immediately. Every time a user refreshes the search interface, the new theme is loaded. If you your changes to not take effect after saving and reloading the page, please use a hard refresh (<Ctrl> + <F5> or similar).
Standard Theme
Below, you will find our standard theme for your reference.
{
"navbar":{
"mr":2,
"display":{
"xs":"none",
"md":"flex"
},
"fontFamily":"monospace",
"fontWeight":700,
"color":"inherit",
"textDecoration":"none",
"maxHeight":"5em",
"logo":{
"paddingRight":"1em",
"maxHeight":"2.2em",
"maxWidth":"2.2em"
},
"link":{
"padding":"0.5em",
"fontSize":"1.2rem",
"textDecoration":"none",
"&:hover":{
"backgroundColor":"primary.tint1",
"textDecoration":"none"
}
}
},
"resultLists":{
"searchResultBreadcrumb":{
"fontSize":"smaller"
},
"searchResultTitle":{
"fontSize":"large"
},
"searchResultTeaser":{
"fontSize":"medium"
},
"resultBlock":{
"bgcolor":"background.stage",
"boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19)",
"result":{
"padding":"0.8em",
"icon":{
"color":"#0077c7",
"fontSize":"1em",
"borderRadius":"100%",
"bgcolor":"#fff",
"border":"1px solid #0077c7",
"padding":"0.5em",
"&:hover":{
"bgcolor":"#ddd"
}
}
},
"peopleResult":{
"paddingLeft":"0.8em",
"padding":"0.5em",
"&:hover":{
"boxShadow":"0 2px 4px 0 rgba(255, 255, 255, 0.05), 0 3px 10px 0 rgba(0, 0, 0, 0.05)"
},
"icon":{
"color":"#0077c7",
"fontSize":"0.9em",
"borderRadius":"100%",
"bgcolor":"#fff",
"border":"1px solid #0077c7",
"padding":"0.5em",
"&:hover":{
"bgcolor":"#ddd"
}
}
},
"padding":"0.5em",
"margin":"0.5em"
},
"standardResultList":{
"bgcolor":"background.default",
"result":{
"&:hover":{
"boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.05)"
},
"padding":"0.8em",
"preview":{
"position":"relative",
"float":"right",
"paddingRight":"2em",
"maxWidth":"5em",
"maxHeight":"5em"
}
},
"peopleResult":{
"&:hover":{
"boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.05)"
},
"padding":"0.8em",
"icon":{
"color":"#0077c7",
"fontSize":"1em",
"borderRadius":"100%",
"bgcolor":"#fff",
"border":"1px solid #0077c7",
"padding":"0.5em",
"&:hover":{
"bgcolor":"#ddd"
}
}
},
"padding":"0.5em",
"margin":"0.5em"
},
"titleBox":{
"paddingLeft":"0.75em",
"paddingBottom":"0.75em",
"paddingTop":"0.75em",
"fontSize":"1.1em",
"fontWeight":400,
"color":"primary.main"
},
"countBox":{
"paddingLeft":"0.75em",
"paddingTop":"0.75em",
"paddingBottom":"0.75em"
},
"recommendedLink":{
"titleBox":{
"paddingTop":"0.2em",
"verticalAlign":"middle"
},
"icon":{
"color":"#0077c7",
"fontSize":"1em",
"borderRadius":"100%",
"backgroundColor":"#fff",
"border":"1px solid #0077c7",
"padding":"0.5em"
}
}
},
"searchBoxContainer":{
"padding":"20px",
"paddingRight":"25px",
"backgroundColor":"background.stage",
"searchBox":{
"ml":1,
"flex":1
}
},
"verticalBox":{
"marginTop":"20px",
"marginBottom":"1em",
"paddingBottom":"0.5em",
"borderBottom":1,
"borderColor":"line",
"width":"100%",
"ul":{
"fontSize":"1em",
"fontWeight":400,
"margin":0,
"listStyle":"none",
"display":"grid",
"gap":"0px",
"gridTemplateColumns":"repeat(5, 1fr)"
},
"li":{
"backgroundColor":"background.default",
"align":"center",
"link":{
"&:hover":{
"borderBottom":3,
"borderColor":"link"
},
"paddingLeft":"0.3em",
"paddingRight":"0.3em",
"paddingBottom":"0.2em",
"textDecoration":"none"
},
"linkActive":{
"borderBottom":3,
"borderColor":"link",
"paddingLeft":"0.3em",
"paddingRight":"0.3em",
"paddingBottom":"0.2em",
"textDecoration":"none"
}
}
},
"searchFilterBox":{
"padding-left":"0px",
"filtersTitle":{
"fontSize":"1em",
"fontWeight":400,
"marginBottom":"1em",
"paddingBottom":"0.5em",
"borderBottom":1,
"borderColor":"line",
"width":"100%"
},
"searchFilterHeading":{
"fontSize":"1.2em",
"fontWeight":600
},
"searchFilterUL":{
"padding":"0 0",
"marginTop":"0.8em",
"marginBottom":"1.8em",
"listStyle":"none",
"display":"grid",
"gap":"0px",
"gridTemplateColumns":"repeat(1, 1fr)"
}
},
"palette":{
"link":"#605E3E",
"line":"#eee",
"primary":{
"main":"#3E4060",
"tint1":"#525370"
},
"secondary":{
"main":"#605E3E"
},
"error":{
"main":"#FF1744"
},
"background":{
"default":"#fff",
"stage":"#e8e8ec"
}
},
"typography":{
"fontSize":"12px",
"fontFamily":[
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"sans-serif"
],
"a":{
"color":"#c85100"
},
"h3":{
"fontSize":"1.1rem"
},
"h2":{
"fontSize":"1.2rem"
},
"h1":{
"fontSize":"1.3rem"
}
}
}