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 colorbackground

Widget background color. Avoid using `transparent` or alpha values for background colors.

Data type: string

Default value: #FFFFFF

Foreground colorforeground

Default text color.

Data type: string

Default value: #545454

Emphasised text colorforegroundEmphasis

Applied to various headings, links and labels.

Data type: string

Default value: #000000

Foreground alternative colorforegroundAlt

Applied to a few special text elements, e.g. "Read More" text.

Data type: string

Default value: #1A0DAB

Accentaccent

Used for highlighting various elements.

Data type: string

Default value: #1A0DAB

Knowledge Panel tab button foreground colortab.foregroundColor

Default text color for the Knowledge Panel tab buttons.

Data type: string

Knowledge Panel tab button mouse hover foreground colortab.hover.foregroundColor

Mouse hover text color for the Knowledge Panel tab buttons.

Data type: string

Knowledge Panel selected tab button foreground colortab.selected.foregroundColor

Text/border color for the currently selected Knowledge Panel tab button.

Data type: string

Popup backgroundpopupBackground

Image lightbox-style popup background color.

Data type: string

Default value: #222222

Popup foregroundpopupForeground

Image lightbox-style popup default text color.

Data type: string

Default value: #DADCE0

Popup foreground emphasispopupForegroundEm

Image lightbox-style emphasised text color.

Data type: string

Default value: #FFFFFF

Popup URLpopupUrl

Image lightbox-style URL text color.

Data type: string

Default value: #81A821

Weather backgroundweatherBackground

Weather Instant Answers widget background color.

Data type: string

Default value: #446DA8

Weather foregroundweatherForeground

Weather Instant Answers widget default foreground color.

Data type: string

Default value: #FFFFFF

Loading barloadingBars

Widget loading state placeholder bar color.

Data type: string

Default value: #DADCE0

Dark icondarkIcons

Dark SVG icon images foreground color, e.g. song play button.

Data type: string

Default value: #000000

Arrow button backgroundarrowButtonBackground

Default arrow button background color, including carousel navigation and expand buttons.

Data type: string

Default value: #FFFFFF

Arrow button foregroundarrowButtonForeground

Default arrow button foreground color, including carousel navigation and expand buttons.

Data type: string

Default value: #636363

Infobox highlighted cell background colorinfobox.highlight.backgroundColor

Knowledge Panel infobox highlighted cell background color.

Data type: string

Default value: #DADCE0

Infobox highlighted cell foreground colorinfobox.highlight.foregroundColor

Knowledge Panel infobox highlighted cell foreground color.

Data type: string

Default value: #545454

Dark placeholder imagesdarkPlaceholderImages

Placeholder images that display while thumbnail images are loading can be set to light or dark (default light).

Data type: boolean

Default value: false

Tripadvisor map color modetripadvisor.mapColorMode

Color mode for maps inside Tripadvisor Properties panels and Places Instant Answers.

Data type: 'light' | 'dark'

Default value: light

Thumbnail altthumbAlt

Alternative text color for product thumbnails. This currently applies only to web product ad thumbs.

Data type: string

Default value: #006621

Button highlight backgroundbuttonHighlight

Shopping tab alert button highlight background color. This applies only where shopping tab is enabled.

Data type: string

Default value: #FEE02F

Padding
Default paddingpadding

Default widget padding. This must be a single CSS length value.
See also thumbGridPadding.

Data type: string

Default value: 15px

Default left/right paddingpaddingX

Default widget left/right padding. This must be a single CSS length value.

Data type: string

Default top/bottom paddingpaddingY

Default widget top/bottom padding. This must be a single CSS length value.

Data type: string

Large paddinglargePadding

Large padding CSS shorthand value, e.g. desktop version of the Smart Answers widget.

Data type: string

Default value: 25px

Knowledge Panel top image paddingknowledgePanel.topImage.padding

Knowledge Panel top image padding CSS shorthand value.

Data type: string

Thumbnail grid paddingthumbGridPadding

CSS padding shorthand value for Knowledge Panel thumbnail grids.

Data type: string

Thumbnail grid gapthumbGridGap

CSS length value for Knowledge Panel thumbnail grid gap.

Data type: string

Popup paddingpopupPadding

CSS padding shorthand value for popups.

Data type: string

Weather widget left/right paddingweatherPaddingX

CSS length value for the Weather Instant Answers widget left/right padding.

Data type: string

Weather widget top/bottom paddingweatherPaddingY

CSS length value for the Weather Instant Answers widget top/bottom padding.

Data type: string

Borders
Default borderborder

CSS border shorthand value

Data type: string

Widget border radiusborderRadius

CSS border-radius value for widget containers.

Data type: string

Widget outer borderborderOuter

CSS border shorthand value for outer widget borders.

Data type: string

Widget inner borderborderInner

CSS border shorthand value for internal borders, including section dividers.

Data type: string

Buttons
Expand buttons
Expand buttons appear at the bottom of widget containers with collapsable content. By default they are circular with an arrow icon.
Expand button position modeexpandButton.position

By default, expand buttons float over the bottom of containers. Set position to "inside" to keep the buttons inside the containers.

Data type: 'outside' | 'inside'

Default value: outside

Expand button text (default state)expandButton.text

By default, expand buttons are circular with an arrow icon. Set some text to convert them into text buttons.
If text and icon overlap, fix by adjusting expandButton.textPadding and expandButton.iconPosition.

Data type: string

Expand button text (expanded state)expandButton.expanded.text

Expand buttons will have this text when the container is expanded.
This setting depends on expandButton.text being set.
If text and icon overlap, fix by adjusting expandButton.textPadding and expandButton.iconPosition.

Data type: string

Expand button font familyexpandButton.fontFamily

CSS font-family value.
(Used with the expandButton.text setting.)

Data type: string

Expand button font sizeexpandButton.fontSize

CSS font-size value.
(Used with the expandButton.text setting.)

Data type: string

Expand button font weightexpandButton.fontWeight

CSS font-weight value.
(Used with the expandButton.text setting.)

Data type: string

Expand button text-alignexpandButton.textAlign

CSS text-align value.
(Used with the expandButton.text setting.)

Data type: 'center' | 'left' | 'right'

Expand button paddingexpandButton.padding

CSS padding shorthand value.
(Used with the expandButton.text setting.)

Data type: string

Expand button text paddingexpandButton.textPadding

CSS padding shorthand value for the inner text element.
(Used with the expandButton.text setting.)

Data type: string

Expand button vertical offsetexpandButton.offsetY

Vertical offset for expand buttons. (This will usually be useful where expandButton.position is set to 'outside'.

Data type: string

Expand button widthexpandButton.width

CSS length value.

Data type: string

Expand button heightexpandButton.height

CSS length value.

Data type: string

Expand button background colorexpandButton.backgroundColor

CSS color value.

Data type: string

Expand button foreground colorexpandButton.foregroundColor

CSS color value.

Data type: string

Expand button borderexpandButton.border

CSS border shorthand value.

Data type: string

Expand button border radiusexpandButton.borderRadius

CSS border-radius value.

Data type: string

Expand button icon image URLexpandButton.iconUrl

Image URL for expand button icon. Set to "none" for no image.

Data type: string

Expand button icon image sizeexpandButton.iconSize

CSS background-size value.

Data type: string

Expand button icon image positionexpandButton.iconPosition

CSS background-position value.

Data type: string

Expand button mouse hover background colorexpandButton.hover.backgroundColor

CSS color value.

Data type: string

Expand button mouse hover foreground colorexpandButton.hover.foregroundColor

CSS color value.

Data type: string

Expand button mouse hover borderexpandButton.hover.border

CSS border shorthand value.

Data type: string

Expand button expanded state icon image URLexpandButton.expanded.iconUrl

Image URL for expand button icon in expanded state. Set to "none" for no image.

Data type: string

Expand button expanded state icon image sizeexpandButton.expanded.iconSize

CSS background-size value.

Data type: string

Expand button expanded state icon image positionexpandButton.expanded.iconPosition

CSS background-position value.

Data type: string

Disable expand button expanded state rotationexpandButton.expanded.noRotate

By default, the expand button has a 180deg rotation applied to it in its expanded state. Set this to true to disable this behaviour.

Data type: boolean

Default value: false

Expand bars
Expand bars appear at the bottom of widget sections with collapsable content. They commonly appear in Knowledge Panels in mobile view. By default they are grey rectangles with a small arrow icon.
Expand bar text (default/collapsed state)expandBar.text

By default, expand bars just have an arrow icon. Set some text to convert them into text buttons.

Data type: string

Expand bar expanded state textexpandBar.expanded.text

Expand bars will have this text when the container is expanded. This setting depends on expandBar.text being set.

Data type: string

Expand bar font familyexpandBar.fontFamily

CSS font-family value.

Data type: string

Expand bar font sizeexpandBar.fontSize

CSS font-size value.

Data type: string

Expand bar font weightexpandBar.fontWeight

CSS font-weight value.

Data type: string

Expand bar text-alignexpandBar.textAlign

CSS text-align value.

Data type: 'center' | 'left' | 'right'

Expand bar text paddingexpandBar.textPadding

CSS padding shorthand value.

Data type: string

Expand bar marginexpandBar.margin

CSS margin shorthand value.

Data type: string

Expand bar text colorexpandBar.foregroundColor

CSS color value.

Data type: string

Expand bar widthexpandBar.width

CSS length value.

Data type: string

Expand bar heightexpandBar.height

CSS length value.

Data type: string

Expand bar background colorexpandBar.backgroundColor

CSS color value.

Data type: string

Expand bar borderexpandBar.border

CSS border shorthand value.

Data type: string

Expand bar border radiusexpandBar.borderRadius

CSS border-radius value.

Data type: string

Expand bar icon image URLexpandBar.iconUrl

Icon image URL. Set to "none" for no image.

Data type: string

Expand bar icon image sizeexpandBar.iconSize

CSS background-size value.

Data type: string

Expand bar icon image positionexpandBar.iconPosition

CSS background-position value.

Data type: string

Expand bar mouse hover background colorexpandBar.hover.backgroundColor

CSS color value.

Data type: string

Expand bar mouse hover text colorexpandBar.hover.foregroundColor

CSS color value.

Data type: string

Expand bar mouse hover borderexpandBar.hover.border

CSS border shorthand value.

Data type: string

Expand bar expanded state icon image URLexpandBar.expanded.iconUrl

Icon image URL for expand bars. Set to "none" for no image.

Data type: string

Expand bar expanded state icon image sizeexpandBar.expanded.iconSize

CSS background-size value.

Data type: string

Expand bar expanded state icon image positionexpandBar.expanded.iconPosition

CSS background-position value.

Data type: string

Disable expand bar expanded state rotationexpandBar.expanded.noRotate

By default, the expand bar has a 180deg rotation applied to it in its expanded state. Set this to true to disable this behaviour.

Data type: boolean

Default value: false

Text buttons
These settings relate to buttons that contain white-on-blue text by default. They appear inside Tripadvisor widgets.
Text button font-familytextButton.fontFamily

CSS font-family value.

Data type: string

Text button font-sizetextButton.fontSize

CSS font-size value.

Data type: string

Text button font-weighttextButton.fontWeight

CSS font-weight value.

Data type: string

Text button background colortextButton.backgroundColor

CSS color value for text button backgrounds.

Data type: string

Default value: #1E7AE9

Text button foreground colortextButton.foregroundColor

CSS color value for text button text.

Data type: string

Default value: #FFFFFF

Text button bordertextButton.border

CSS border shorthand value.

Data type: string

Default value: none

Text button border radiustextButton.borderRadius

CSS border-radius value.

Data type: string

Text button paddingtextButton.padding

CSS padding shorthand value for text button defaults.

Data type: string

Text button uppercasetextButton.upperCase

Applies text-transform: uppercase to text buttons

Data type: boolean

Default value: false

Large text button paddingtextButton.large.padding

CSS padding shorthand value for larger text buttons.

Data type: string

Large text button font-sizetextButton.large.fontSize

CSS font-family value for larger text buttons.

Data type: string

Large text button uppercasetextButton.large.upperCase

Applies text-transform: uppercase to larger text buttons

Data type: boolean

Default value: true

Text button mouse hover background colortextButton.hover.backgroundColor

CSS color value for mouse hover text button state.

Data type: string

Default value: #4C95EE

Text button mouse hover foreground colortextButton.hover.foregroundColor

CSS color value for mouse hover text button state.

Data type: string

Default value: #FFFFFF

Text button mouse hover bordertextButton.hover.border

CSS border shorthand value for mouse hover text button state.

Data type: string

Default value: none

Secondary text button background colortextButton.secondary.backgroundColor

CSS color value for secondary text buttons.

Data type: string

Default value: #E5E5E5

Secondary text button foreground colortextButton.secondary.foregroundColor

CSS color value for secondary text buttons.

Data type: string

Default value: #545454

Secondary text button bordertextButton.secondary.border

CSS border shorthand value for secondary text buttons.

Data type: string

Default value: none

Text button disabled state background colortextButton.disabled.backgroundColor

CSS color value for disabled text button state.

Data type: string

Default value: #DADCE0

Text button disabled state foreground colortextButton.disabled.foregroundColor

CSS color value for disabled text button state.

Data type: string

Text button disabled state bordertextButton.disabled.border

CSS border shorthand value for disabled text button state.

Data type: string

Default value: none

Close buttons
Close buttons appear in image lightbox-style popups and image grid viewer popups.
Close button widthcloseButton.width

CSS length value.

Data type: string

Close button heightcloseButton.height

CSS length value.

Data type: string

Close button background colorcloseButton.backgroundColor

CSS color value.

Data type: string

Close button bordercloseButton.border

CSS border shorthand value.

Data type: string

Close button border radiuscloseButton.borderRadius

CSS border-radius value.

Data type: string

Close button icon image URLcloseButton.iconUrl

Image URL for close button icon.

Data type: string

Close button icon image sizecloseButton.iconSize

CSS background-size value.

Data type: string

Close button icon image positioncloseButton.iconPosition

CSS background-position value.

Data type: string

Navigation buttons
Navigation (previous/next) buttons appear at the sides of carousels and other horizontally scrolling elements.
Navigation button widthnavButton.width

CSS length value.

Data type: string

Navigation button heightnavButton.height

CSS length value.

Data type: string

Navigation button background colornavButton.backgroundColor

CSS color value.

Data type: string

Navigation button bordernavButton.border

CSS border shorthand value.

Data type: string

Navigation button border radiusnavButton.borderRadius

CSS border-radius value.

Data type: string

Navigation button icon image URLnavButton.iconUrl

Image URL for default navigation button icon. Set to "none" for no image.

Data type: string

Navigation button icon image sizenavButton.iconSize

CSS background-size value.

Data type: string

Navigation button icon image positionnavButton.iconPosition

CSS background-position value.

Data type: string

Navigation button mouse hover background colornavButton.hover.backgroundColor

CSS color value.

Data type: string

Navigation button mouse hover bordernavButton.hover.border

CSS border shorthand value.

Data type: string

Navigate-to-previous button icon image URLnavButton.prev.iconUrl

Icon image URL. Set to "none" for no image.

Data type: string

Navigate-to-previous button icon image sizenavButton.prev.iconSize

CSS background-size value.

Data type: string

Navigate-to-previous button icon image positionnavButton.prev.iconPosition

CSS background-position value.

Data type: string

Navigate-to-previous button widthnavButton.prev.width

CSS length value.

Data type: string

Navigate-to-previous button heightnavButton.prev.height

CSS length value.

Data type: string

Disable navigate-to-previous button rotationnavButton.prev.noRotate

By default, the navigate-to-previous button has a 180deg rotation applied to it. Set this to true to disable this behaviour.

Data type: boolean

Default value: false

Navigate-to-next button icon image URLnavButton.next.iconUrl

Icon image URL. Set to "none" for no image.

Data type: string

Navigate-to-next button icon image sizenavButton.next.iconSize

CSS background-size value.

Data type: string

Navigate-to-next button icon image positionnavButton.next.iconPosition

CSS background-position value.

Data type: string

Navigate-to-next button widthnavButton.next.width

CSS length value.

Data type: string

Navigate-to-next button heightnavButton.next.height

CSS length value.

Data type: string

Image grid navigation buttons
These buttons are used for navigating through the carousel inside image grid popups.
Image grid navigation button widthimageGrid.navButton.width

CSS length value.

Data type: string

Image grid navigation button heightimageGrid.navButton.height

CSS length value.

Data type: string

Image grid navigation button background colorimageGrid.navButton.backgroundColor

CSS color value.

Data type: string

Image grid navigation button borderimageGrid.navButton.border

CSS border shorthand value.

Data type: string

Image grid navigation button border radiusimageGrid.navButton.borderRadius

CSS border-radius value.

Data type: string

Image grid navigation button icon image URLimageGrid.navButton.iconUrl

Icon image URL. Set to "none" for no image.

Data type: string

Image grid navigation button icon image sizeimageGrid.navButton.iconSize

CSS background-size value.

Data type: string

Image grid navigation button icon image positionimageGrid.navButton.iconPosition

CSS background-position value.

Data type: string

Image grid navigation button mouse hover background colorimageGrid.navButton.hover.backgroundColor

CSS color value.

Data type: string

Image grid navigation button mouse hover borderimageGrid.navButton.hover.border

CSS border shorthand value.

Data type: string

Image grid navigate-to-previous button icon image URLimageGrid.navButton.prev.iconUrl

Icon image URL. Set to "none" for no image.

Data type: string

Image grid navigate-to-previous button icon image sizeimageGrid.navButton.prev.iconSize

CSS background-size value.

Data type: string

Image grid navigate-to-previous button icon image positionimageGrid.navButton.prev.iconPosition

CSS background-position value.

Data type: string

Image grid navigate-to-next button icon image URLimageGrid.navButton.next.iconUrl

Icon image URL. Set to "none" for no image.

Data type: string

Image grid navigate-to-next button icon image sizeimageGrid.navButton.next.iconSize

CSS background-size value.

Data type: string

Image grid navigate-to-next button icon image positionimageGrid.navButton.next.iconPosition

CSS background-position value.

Data type: string

Pills
These are pill-shaped buttons that appear in Search Suggestions and Tripadvisor widgets.
Pill font-familypill.fontFamily

CSS font-family value.

Data type: string

Pill font-sizepill.fontSize

CSS font-size value.

Data type: string

Pill font-weightpill.fontWeight

CSS font-weight value.

Data type: string

Pill background colorpill.backgroundColor

CSS color value.

Data type: string

Pill foreground colorpill.foregroundColor

CSS color value.

Data type: string

Pill borderpill.border

CSS border shorthand value.

Data type: string

Pill border radiuspill.borderRadius

CSS border-radius value.

Data type: string

Pill paddingpill.padding

CSS padding shorthand value.

Data type: string

Pill highlight background colorpill.highlight.backgroundColor

Pill background color for mouse hover and "current" status

Data type: string

Pill highlight foreground colorpill.highlight.foregroundColor

Pill foreground color for mouse hover and "current" status

Data type: string

Pill highlight borderpill.highlight.border

Pill border shorthand for mouse hover and "current" status

Data type: string

Small pill font-sizepill.small.fontSize

CSS font-size value.

Data type: string

Small pill paddingpill.small.padding

CSS padding shorthand value.

Data type: string

Large pill font-sizepill.large.fontSize

CSS font-size value.

Data type: string

Large pill paddingpill.large.padding

CSS padding shorthand value.

Data type: string

Carousel 'See More' buttons
These appear as the last item in thumbnail image carousels and usually open a Knowledge Panel tab.
Carousel 'see more' button icon image URLcarouselSeeMore.iconUrl

Icon image URL. Set to "none" for no image.

Data type: string

Carousel 'see more' button icon image sizecarouselSeeMore.iconSize

CSS background-size value.

Data type: string

Carousel 'see more' button icon image positioncarouselSeeMore.iconPosition

CSS background-position value.

Data type: string

Carousel 'see more' button background colorcarouselSeeMore.backgroundColor

CSS color value.

Data type: string

Carousel 'see more' button foreground colorcarouselSeeMore.foregroundColor

CSS color value.

Data type: string

Carousel 'see more' button bordercarouselSeeMore.border

CSS border shorthand value.

Data type: string

Carousel 'see more' button border radiuscarouselSeeMore.borderRadius

CSS border-radius value.

Data type: string

Carousel 'see more' button box-shadowcarouselSeeMore.boxShadow

CSS box-shadow value.

Data type: string

Carousel 'see more' button text vertical positioncarouselSeeMore.textPositionY

Sets the vertical position of the text inside carousel "See more" buttons.

Data type: 'center' | 'top' | 'bottom'

Carousel 'see more' button text vertical offsetcarouselSeeMore.textOffsetY

Fine-tunes the vertical position of the text inside carousel "See more" buttons.

Data type: string

Carousel 'see more' button font-familycarouselSeeMore.fontFamily

CSS font-family value.

Data type: string

Carousel 'see more' button font-sizecarouselSeeMore.fontSize

CSS font-size value.

Data type: string

Carousel 'see more' button font-weightcarouselSeeMore.fontWeight

CSS font-weight value.

Data type: string

Carousel 'see more' button mouse hover background colorcarouselSeeMore.hover.backgroundColor

CSS color value.

Data type: string

Carousel 'see more' button mouse hover foreground colorcarouselSeeMore.hover.foregroundColor

CSS color value.

Data type: string

Carousel 'see more' button mouse over bordercarouselSeeMore.hover.border

CSS border shorthand value.

Data type: string

Song play buttons
In music-based Knowledge Panels, these buttons are used for playing and pausing audio.
Play button icon image URLplayButton.iconUrl

Icon image URL. Set to "none" for no image.

Data type: string

Play button icon image sizeplayButton.iconSize

CSS background-size value.

Data type: string

Play button icon image positionplayButton.iconPosition

CSS background-position value.

Data type: string

Play button widthplayButton.width

CSS length value.

Data type: string

Play button heightplayButton.height

CSS length value.

Data type: string

Play button background colorplayButton.backgroundColor

CSS color value.

Data type: string

Play button borderplayButton.border

CSS border shorthand value.

Data type: string

Play button border radiusplayButton.borderRadius

CSS border-radius value.

Data type: string

Play button mouse hover background colorplayButton.hover.backgroundColor

CSS color value.

Data type: string

Play button mouse hover borderplayButton.hover.border

CSS border shorthand value.

Data type: string

Play button mouse hover opacityplayButton.hover.opacity

CSS opacity value

Data type: string

Play button playing state icon image URLplayButton.playing.iconUrl

Icon image URL. By default this is a "paused" icon. Set to "none" for no image.

Data type: string

Play button playing state icon image sizeplayButton.playing.iconSize

CSS background-size value.

Data type: string

Play button playing state icon image positionplayButton.playing.iconPosition

CSS background-position value.

Data type: string

Play button playing state background colorplayButton.playing.backgroundColor

CSS color value.

Data type: string

Play button playing state borderplayButton.playing.border

CSS border shorthand value.

Data type: string

Number input buttons
These buttons are used to increment and decrement numeric input values. They appear in the Tripadvisor Properties panel.
Number button widthnumberButton.width

CSS length value.

Data type: string

Number button heightnumberButton.height

CSS length value.

Data type: string

Number button background colornumberButton.backgroundColor

CSS color value.

Data type: string

Number button bordernumberButton.border

CSS border shorthand value.

Data type: string

Number button border radiusnumberButton.borderRadius

CSS border-radius value.

Data type: string

Number button disabled state background colornumberButton.disabled.backgroundColor

CSS color value.

Data type: string

Number button disabled state bordernumberButton.disabled.border

CSS border shorthand value.

Data type: string

Number button mouse hover background colornumberButton.hover.backgroundColor

CSS color value.

Data type: string

Number button mouse hover bordernumberButton.hover.border

CSS border shorthand value.

Data type: string

Number increment button icon image URLnumberButton.increment.iconUrl

Icon image URL for "+". Set to "none" for no image.

Data type: string

Number increment button icon image sizenumberButton.increment.iconSize

CSS background-size value.

Data type: string

Number increment button icon image positionnumberButton.increment.iconPosition

CSS background-position value.

Data type: string

Number decrement button icon image URLnumberButton.decrement.iconUrl

Icon image URL for "-". Set to "none" for no image.

Data type: string

Number decrement button icon image sizenumberButton.decrement.iconSize

CSS background-size value.

Data type: string

Number decrement button icon image positionnumberButton.decrement.iconPosition

CSS background-position value.

Data type: string

Shopping tab buttons
These buttons are for shopping-tab-enabled accounts. They link to the site shopping page and appear when there are relevant search results.
Shop button font-familyshopButton.fontFamily

CSS font-family value.

Data type: string

Shop button font-sizeshopButton.fontSize

CSS font-size value.

Data type: string

Shop button font-weightshopButton.fontWeight

CSS font-weight value.

Data type: string

Shop button widthshopButton.width

CSS length value.

Data type: string

Shop button heightshopButton.height

CSS length value.

Data type: string

Shop button background colorshopButton.backgroundColor

CSS color value.

Data type: string

Shop button bordershopButton.border

CSS border shorthand value.

Data type: string

Shop button border radiusshopButton.borderRadius

CSS border-radius value.

Data type: string

Shop button icon image URLshopButton.iconUrl

Shopping icon image URL. Set to "none" for no image.

Data type: string

Shop button icon image sizeshopButton.iconSize

CSS background-size value.

Data type: string

Shop button icon image positionshopButton.iconPosition

CSS background-position value.

Data type: string

Shop button paddingshopButton.padding

CSS padding shorthand value.

Data type: string

Shop button mouse hover background colorshopButton.hover.backgroundColor

CSS color value.

Data type: string

Shop button mouse hover foreground colorshopButton.hover.foregroundColor

CSS color value.

Data type: string

Shop button mouse hover bordershopButton.hover.border

CSS border shorthand value.

Data type: string

Tripadvisor button links
These buttons appear at the bottom of the Tripadvisor Places Instant Answers widget and link to a relevant Tripadvisor page.
Tripadvisor button link font-familytripadvisor.buttonLink.fontFamily

CSS font-family value.

Data type: string

Tripadvisor button link font-sizetripadvisor.buttonLink.fontSize

CSS font-size value.

Data type: string

Tripadvisor button link font-weighttripadvisor.buttonLink.fontWeight

CSS font-weight value.

Data type: string

Tripadvisor button link background colortripadvisor.buttonLink.backgroundColor

CSS color value.

Data type: string

Tripadvisor button link foreground colortripadvisor.buttonLink.foregroundColor

CSS color value.

Data type: string

Tripadvisor button link bordertripadvisor.buttonLink.border

CSS border shorthand value.

Data type: string

Tripadvisor button link border radiustripadvisor.buttonLink.borderRadius

CSS border-radius value.

Data type: string

Tripadvisor button link mouse hover background colortripadvisor.buttonLink.hover.backgroundColor

CSS color value.

Data type: string

Tripadvisor button link mouse hover foreground colortripadvisor.buttonLink.hover.foregroundColor

CSS color value.

Data type: string

Tripadvisor button link mouse hover bordertripadvisor.buttonLink.hover.border

CSS border shorthand value.

Data type: string

Dictionary widget audio button
These buttons appear in dictionary Instant Answers widgets. They trigger the playing of an audio clip for the pronunciation of a defined word.
Dictionary widget audio button widthdictAudioButton.width

CSS length value.

Data type: string

Dictionary widget audio button heightdictAudioButton.height

CSS length value.

Data type: string

Dictionary widget audio button background colordictAudioButton.backgroundColor

CSS color value.

Data type: string

Dictionary widget audio button borderdictAudioButton.border

CSS border shorthand value.

Data type: string

Dictionary widget audio button border radiusdictAudioButton.borderRadius

CSS border-radius value.

Data type: string

Dictionary widget audio button icon image URLdictAudioButton.iconUrl

Icon image URL. Set to "none" for no image.

Data type: string

Dictionary widget audio button icon image sizedictAudioButton.iconSize

CSS background-size value.

Data type: string

Dictionary widget audio button icon image positiondictAudioButton.iconPosition

CSS background-position value.

Data type: string

Dictionary widget audio button mouse hover background colordictAudioButton.hover.backgroundColor

CSS color value for mouse hover state background color.

Data type: string

Dictionary widget audio button mouse hover borderdictAudioButton.hover.border

CSS border shorthand value for mouse hover state.

Data type: string

Inputs
Input borderinput.border

CSS border shorthand value for inputs

Data type: string

Input border radiusinput.borderRadius

CSS border-radius value.

Data type: string

Input small border radiusinput.borderRadiusSmall

CSS border-radius value.

Data type: string

Thumbnails
Thumbnail borderthumb.border

CSS border shorthand value for thumbnails

Data type: string

Thumbnail border radiusthumb.borderRadius

CSS border-radius value.

Data type: string

Small thumbnail borderthumb.small.border

CSS border shorthand value for smaller thumbnails

Data type: string

Small thumbnail border radiusthumb.small.borderRadius

CSS border-radius value for smaller thumbnails.

Data type: string

Large thumbnail borderthumb.large.border

CSS border shorthand value for larger thumbnails.

Data type: string

Large thumbnail border radiusthumb.large.borderRadius

CSS border-radius value for larger thumbnails.

Data type: string

Video play icon image URLvideoPlayIcon.iconUrl

Image URL for "play" icon. Set to "none" for no image.

Data type: string

Video play icon image sizevideoPlayIcon.iconSize

CSS background-size value.

Data type: string

Large video play icon image sizevideoPlayIcon.largeSize

CSS background-size value for large thumbnail video play icon, including the YouTube Instant Answers widget.

Data type: string

Video play icon image positionvideoPlayIcon.iconPosition

CSS background-position value.

Data type: string

Video play icon opacityvideoPlayIcon.opacity

CSS opacity value.

Data type: string

Calculator
Calculator dark mode preset stylescalc.darkMode

Preset calculator styles (can be overridden)

Data type: boolean

Calculator background colorcalc.backgroundColor

CSS color value.

Data type: string

Calculator bordercalc.border

CSS border shorthand value.

Data type: string

Calculator button foreground colorcalc.btn.foregroundColor

CSS color value.

Data type: string

Calculator button background colorcalc.btn.backgroundColor

CSS color value.

Data type: string

Calculator button hover background colorcalc.btn.hover.backgroundColor

CSS color value.

Data type: string

Calculator number button foreground colorcalc.btn.num.foregroundColor

CSS color value.

Data type: string

Calculator number button background colorcalc.btn.num.backgroundColor

CSS color value.

Data type: string

Calculator number button hover background colorcalc.btn.num.hover.backgroundColor

CSS color value.

Data type: string

Calculator special button (e.g. "=") foreground colorcalc.btn.special.foregroundColor

CSS color value.

Data type: string

Calculator special button (e.g. "=") background colorcalc.btn.special.backgroundColor

CSS color value.

Data type: string

Calculator special button (e.g. "=") hover background colorcalc.btn.special.hover.backgroundColor

CSS color value.

Data type: string

Calculator inactive button foreground colorcalc.btn.inactive.foregroundColor

CSS color value.

Data type: string

Calculator inactive button background colorcalc.btn.inactive.backgroundColor

CSS color value.

Data type: string

Calculator output background colorcalc.output.backgroundColor

CSS color value.

Data type: string

Calculator output foreground colorcalc.output.foregroundColor

CSS color value.

Data type: string

Miscellaneous
Search suggestions height (smaller display)searchSuggestions.height.small

CSS length value for pill container height. Useful when modifying pill height.

Data type: string

Search suggestions height (larger display)searchSuggestions.height.large

CSS length value for pill container height. Useful when modifying pill height.

Data type: string

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: string

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: string

styles interface

interface SearchExpanderStyles {
  accent?: string;
  arrowButtonBackground?: string;
  arrowButtonForeground?: string;
  background?: string;
  border?: string;
  borderInner?: string;
  borderOuter?: string;
  borderRadius?: string;
  buttonHighlight?: string;
  calc?: {
    backgroundColor?: string;
    border?: string;
    btn?: {
      backgroundColor?: string;
      foregroundColor?: string;
      hover?: {
        backgroundColor?: string;
      };
      inactive?: {
        backgroundColor?: string;
        foregroundColor?: string;
      };
      num?: {
        backgroundColor?: string;
        foregroundColor?: string;
        hover?: {
          backgroundColor?: string;
        };
      };
      special?: {
        backgroundColor?: string;
        foregroundColor?: string;
        hover?: {
          backgroundColor?: string;
        };
      }
    };
    darkMode?: boolean;
    output?: {
      backgroundColor?: string;
      foregroundColor?: 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;
}

» Search Links