Skip to main content

How can I specify colors for custom CSS in my EmbedSocial widget?

Customizing your EmbedSocial widget's appearance, including its colors, can significantly enhance its integration into your website. This article will guide you on how to specify colors using custom CSS for your widgets.

Marija avatar
Written by Marija
Updated yesterday

Supported Color Formats

You can use the following formats to define colors in your EmbedSocial widget's custom CSS:

  1. HEX Codes: These are six-character codes preceded by a #.

    1. For instance, #000000 for black or #FFFFFF for white.

    2. Ensure the # prefix is included when entering a HEX code.

  2. Named Colors: Simply specify a color name like green, blue, or red.

    1. Do not include the # prefix when using named colors.

Both methods are supported, so you can choose the one that best fits your styling preferences.

Example Usage

Here’s an example of how you might use both formats in your custom CSS:

.es-header-btn  {
background-color: #ff5733;
}

.es-widget-header-details-text {
color: green;
}

Tips for Best Results

  • Always validate your HEX codes to ensure correctness.

  • Use color contrast checkers to make sure text remains readable against chosen background colors.

By following these guidelines, you can easily customize your EmbedSocial widget’s color scheme to match your website.

For further assistance, feel free to contact our support team.

Did this answer your question?