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 colors
property
of the sxpr()
settings object.
Here's a simple example:
sxpr({
se: 'your-id',
colors: {
foreground: '#EAEAEA',
background: '#333',
foregroundEmphasis: 'blue',
border: '#FAFAFA',
},
// ... other settings
});
(Note that due to some widget behaviour, it is best to avoid using transparent
and inherit
for background colors.)
A darkPlaceholderImages
boolean setting is available for the case where you want thumbnail placeholder images to
follow a dark color scheme. Placeholder images are visible when a thumbnail image has not yet loaded, or where a
thumbnail image is missing for any reason.
sxpr({
se: 'your-id',
darkPlaceholderImages: true,
// ... other settings
});
You can try out these properties via your search engine's preview page.
If you want to update the colors of widgets that have already rendered, but do not want to make an additional API request,
you can use the sxpr.updateColors()
function. This can be useful if you have a dark mode switch which updates
your page's theme dynamically. This function accepts a colors
argument and a darkPlaceholderImages
argument.
The colors
argument is the same object as the colors
argument described above, and the darkPlaceholderImages
is a boolean
which has the same effect as the darkPlaceholderImages
setting described above.
For example:
// Apply a dark color scheme
sxpr.updateColors({
foreground: '#FFF',
background: '#313',
foregroundEmphasis: '#DCDADA',
border: '#EEE',
}, true);
Color properties
Property values in the colors
object can be any valid CSS color value.
Property | Description |
---|---|
background |
Main widget background color |
foreground |
Main text color |
foregroundEmphasis |
Text color for some important contexts, including the knowledge panel title |
foregroundAlt |
Color of some special text and symbols |
accent |
Used in various contexts for highlighting/aesthetics |
border |
Widget border color |
tabLinkHover |
Mouse hover foreground color for knowledge panel tabs |
popupBackground |
Background color of knowledge panel image popups |
popupForeground |
Main text color of knowledge panel image popups |
popupForegroundEm |
Color of some important text in knowledge panel image popups |
popupUrl |
Color of URLs in knowledge panel image popups |
thumbAlt |
Color of some special text inside thumbnails |
buttonHighlight |
Background color of highlighted button |
weatherBackground |
Background color of weather widget |
weatherForeground |
Text color of weather widget |
loadingBars |
Color of the widget placeholder loading bars |
darkIcons |
Color of various dark-colored icons, including Spotify play buttons and some social icons |
arrowButtonBackground |
Arrow button background color |
arrowButtonForeground |
Arrow button foreground color |