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.

» Search Links