Styling the Widgets
Search Expander's widget HTML is rendered directly on your page, so you can modify its appearance with CSS like
any other page element. However, it will often be easier to specify style properties via the styles property
of the sxpr() settings object.
Here's a simple example:
sxpr({
se: 'your-search-engine-id',
styles: {
foreground: '#333', // Default foreground color
background: '#EAEAEA', // Default background color
padding: '25px', // Widget padding
borderRadius: '10px', // Widget border-radius
border: '1px solid #666', // Widget border
},
// ... other settings
});
You can try out these properties via your search engine's preview page.
If you want to update the styles settings of widgets that have already rendered, but do not want to make an additional API request,
you can use the sxpr.updateStyles() function. This can be useful if you have a dark mode switch which updates
your page's theme dynamically. This function accepts a styles object (or null to reset styles to the defaults).
For example:
// Apply a dark color scheme
sxpr.updateStyles({
foreground: '#EEE', // Default foreground color
background: '#313', // Default background color
padding: '25px', // Widget padding
borderRadius: '10px', // Widget border-radius
border: '1px solid #CCC', // Widget border
});
Some of the available style properties correspond to CSS properties, but many are custom properties designed to have wide-ranging effects on widget appearance while abstracting away the potential complexity of CSS overrides.
styles properties
This is a list of all the available styles properties. You can view these properties as a TypeScript
interface here.
| Property | styles object path |
Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Colors | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Background color | background | Widget background color. Avoid using `transparent` or alpha values for background colors. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Foreground color | foreground | Default text color. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Emphasised text color | foregroundEmphasis | Applied to various headings, links and labels. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Foreground alternative color | foregroundAlt | Applied to a few special text elements, e.g. "Read More" text. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Accent | accent | Used for highlighting various elements. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Knowledge Panel tab button foreground color | tab.foregroundColor | Default text color for the Knowledge Panel tab buttons. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Knowledge Panel tab button mouse hover foreground color | tab.hover.foregroundColor | Mouse hover text color for the Knowledge Panel tab buttons. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Knowledge Panel selected tab button foreground color | tab.selected.foregroundColor | Text/border color for the currently selected Knowledge Panel tab button. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Popup background | popupBackground | Image lightbox-style popup background color. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Popup foreground | popupForeground | Image lightbox-style popup default text color. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Popup foreground emphasis | popupForegroundEm | Image lightbox-style emphasised text color. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Popup URL | popupUrl | Image lightbox-style URL text color. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Weather background | weatherBackground | Weather Instant Answers widget background color. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Weather foreground | weatherForeground | Weather Instant Answers widget default foreground color. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Loading bar | loadingBars | Widget loading state placeholder bar color. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Dark icon | darkIcons | Dark SVG icon images foreground color, e.g. song play button. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Arrow button background | arrowButtonBackground | Default arrow button background color, including carousel navigation and expand buttons. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Arrow button foreground | arrowButtonForeground | Default arrow button foreground color, including carousel navigation and expand buttons. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Infobox highlighted cell background color | infobox.highlight.backgroundColor | Knowledge Panel infobox highlighted cell background color. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Infobox highlighted cell foreground color | infobox.highlight.foregroundColor | Knowledge Panel infobox highlighted cell foreground color. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Dark placeholder images | darkPlaceholderImages | Placeholder images that display while thumbnail images are loading can be set to light or dark (default light). Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Tripadvisor map color mode | tripadvisor.mapColorMode | Color mode for maps inside Tripadvisor Properties panels and Places Instant Answers. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Thumbnail alt | thumbAlt | Alternative text color for product thumbnails. This currently applies only to web product ad thumbs. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Button highlight background | buttonHighlight | Shopping tab alert button highlight background color. This applies only where shopping tab is enabled. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Padding | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Default padding | padding | Default widget padding. This must be a single CSS length value. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Default left/right padding | paddingX | Default widget left/right padding. This must be a single CSS length value. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Default top/bottom padding | paddingY | Default widget top/bottom padding. This must be a single CSS length value. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Large padding | largePadding | Large padding CSS shorthand value, e.g. desktop version of the Smart Answers widget. Data type: Default value: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Knowledge Panel top image padding | knowledgePanel.topImage.padding | Knowledge Panel top image padding CSS shorthand value. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Thumbnail grid padding | thumbGridPadding | CSS padding shorthand value for Knowledge Panel thumbnail grids. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Thumbnail grid gap | thumbGridGap | CSS length value for Knowledge Panel thumbnail grid gap. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Popup padding | popupPadding | CSS padding shorthand value for popups. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Weather widget left/right padding | weatherPaddingX | CSS length value for the Weather Instant Answers widget left/right padding. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Weather widget top/bottom padding | weatherPaddingY | CSS length value for the Weather Instant Answers widget top/bottom padding. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Borders | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Default border | border | CSS border shorthand value Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Widget border radius | borderRadius | CSS border-radius value for widget containers. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Widget outer border | borderOuter | CSS border shorthand value for outer widget borders. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Widget inner border | borderInner | CSS border shorthand value for internal borders, including section dividers. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Buttons | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Inputs | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Input border | input.border | CSS border shorthand value for inputs Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Input border radius | input.borderRadius | CSS border-radius value. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Input small border radius | input.borderRadiusSmall | CSS border-radius value. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Thumbnails | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Thumbnail border | thumb.border | CSS border shorthand value for thumbnails Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Thumbnail border radius | thumb.borderRadius | CSS border-radius value. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Small thumbnail border | thumb.small.border | CSS border shorthand value for smaller thumbnails Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Small thumbnail border radius | thumb.small.borderRadius | CSS border-radius value for smaller thumbnails. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Large thumbnail border | thumb.large.border | CSS border shorthand value for larger thumbnails. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Large thumbnail border radius | thumb.large.borderRadius | CSS border-radius value for larger thumbnails. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Video play icon image URL | videoPlayIcon.iconUrl | Image URL for "play" icon. Set to "none" for no image. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Video play icon image size | videoPlayIcon.iconSize | CSS background-size value. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Large video play icon image size | videoPlayIcon.largeSize | CSS background-size value for large thumbnail video play icon, including the YouTube Instant Answers widget. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Video play icon image position | videoPlayIcon.iconPosition | CSS background-position value. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Video play icon opacity | videoPlayIcon.opacity | CSS opacity value. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Miscellaneous | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Search suggestions height (smaller display) | searchSuggestions.height.small | CSS length value for pill container height. Useful when modifying pill height. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Search suggestions height (larger display) | searchSuggestions.height.large | CSS length value for pill container height. Useful when modifying pill height. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Tripadvisor Places property type pills height (smaller display) | tripadvisor.pillsHeight.small | CSS length value for pill container height. Useful when modifying pill height. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Tripadvisor Places property type pills height (larger display) | tripadvisor.pillsHeight.large | CSS length value for pill container height. Useful when modifying pill height. Data type: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
styles interface
interface SearchExpanderStyles {
accent?: string;
arrowButtonBackground?: string;
arrowButtonForeground?: string;
background?: string;
border?: string;
borderInner?: string;
borderOuter?: string;
borderRadius?: string;
buttonHighlight?: string;
carouselSeeMore?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
boxShadow?: string;
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
foregroundColor?: string;
hover?: {
backgroundColor?: string;
border?: string;
foregroundColor?: string;
};
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
textOffsetY?: string;
textPositionY?: 'center' | 'top' | 'bottom';
};
closeButton?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
height?: string;
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
width?: string;
};
darkIcons?: string;
darkPlaceholderImages?: boolean;
dictAudioButton?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
height?: string;
hover?: {
backgroundColor?: string;
border?: string;
};
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
width?: string;
};
expandBar?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
expanded?: {
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
noRotate?: boolean;
text?: string;
};
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
foregroundColor?: string;
height?: string;
hover?: {
backgroundColor?: string;
border?: string;
foregroundColor?: string;
};
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
margin?: string;
text?: string;
textAlign?: 'center' | 'left' | 'right';
textPadding?: string;
width?: string;
};
expandButton?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
expanded?: {
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
noRotate?: boolean;
text?: string;
};
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
foregroundColor?: string;
height?: string;
hover?: {
backgroundColor?: string;
border?: string;
foregroundColor?: string;
};
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
offsetY?: string;
padding?: string;
position?: 'outside' | 'inside';
text?: string;
textAlign?: 'center' | 'left' | 'right';
textPadding?: string;
width?: string;
};
foreground?: string;
foregroundAlt?: string;
foregroundEmphasis?: string;
imageGrid?: {
navButton?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
height?: string;
hover?: {
backgroundColor?: string;
border?: string;
};
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
next?: {
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
};
prev?: {
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
};
width?: string;
};
};
infobox?: {
highlight?: {
backgroundColor?: string;
foregroundColor?: string;
};
};
input?: {
border?: string;
borderRadius?: string;
borderRadiusSmall?: string;
};
knowledgePanel?: {
topImage?: {
padding?: string;
};
};
largePadding?: string;
loadingBars?: string;
navButton?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
height?: string;
hover?: {
backgroundColor?: string;
border?: string;
};
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
next?: {
height?: string;
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
width?: string;
};
prev?: {
height?: string;
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
noRotate?: boolean;
width?: string;
};
width?: string;
};
numberButton?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
decrement?: {
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
};
disabled?: {
backgroundColor?: string;
border?: string;
};
height?: string;
hover?: {
backgroundColor?: string;
border?: string;
};
increment?: {
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
};
width?: string;
};
padding?: string;
paddingX?: string;
paddingY?: string;
pill?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
foregroundColor?: string;
highlight?: {
backgroundColor?: string;
border?: string;
foregroundColor?: string;
};
large?: {
fontSize?: string;
padding?: string;
};
padding?: string;
small?: {
fontSize?: string;
padding?: string;
};
};
playButton?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
height?: string;
hover?: {
backgroundColor?: string;
border?: string;
opacity?: string;
};
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
playing?: {
backgroundColor?: string;
border?: string;
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
};
width?: string;
};
popupBackground?: string;
popupForeground?: string;
popupForegroundEm?: string;
popupPadding?: string;
popupUrl?: string;
searchSuggestions?: {
height?: {
large?: string;
small?: string;
};
};
shopButton?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
height?: string;
hover?: {
backgroundColor?: string;
border?: string;
foregroundColor?: string;
};
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
padding?: string;
width?: string;
};
tab?: {
foregroundColor?: string;
hover?: {
foregroundColor?: string;
};
selected?: {
foregroundColor?: string;
};
};
textButton?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
disabled?: {
backgroundColor?: string;
border?: string;
foregroundColor?: string;
};
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
foregroundColor?: string;
hover?: {
backgroundColor?: string;
border?: string;
foregroundColor?: string;
};
large?: {
fontSize?: string;
padding?: string;
upperCase?: boolean;
};
padding?: string;
secondary?: {
backgroundColor?: string;
border?: string;
foregroundColor?: string;
};
upperCase?: boolean;
};
thumb?: {
border?: string;
borderRadius?: string;
large?: {
border?: string;
borderRadius?: string;
};
small?: {
border?: string;
borderRadius?: string;
};
};
thumbAlt?: string;
thumbGridGap?: string;
thumbGridPadding?: string;
tripadvisor?: {
buttonLink?: {
backgroundColor?: string;
border?: string;
borderRadius?: string;
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
foregroundColor?: string;
hover?: {
backgroundColor?: string;
border?: string;
foregroundColor?: string;
};
};
mapColorMode?: 'light' | 'dark';
pillsHeight?: {
large?: string;
small?: string;
};
};
videoPlayIcon?: {
iconPosition?: string;
iconSize?: string;
iconUrl?: string;
largeSize?: string;
opacity?: string;
};
weatherBackground?: string;
weatherForeground?: string;
weatherPaddingX?: string;
weatherPaddingY?: string;
}