# Widgets The following is the Widget Custom Style editor. From here, you can set a Custom Style for the Widget. | Property | Accepted values | Behavior | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `color` | | Sets the text color. | | `backgroundColor` | Any `color` | Applies solid colors as background on an element. | | `background` | | Sets all background style properties at once, such as color, image, origin, size, or repeat method. Component properties not set in the `background` shorthand declaration are set to their default values. | | `borderColor` | | Sets the color of an element's four borders. | | `borderRadius` | Numeric value | Gives any element rounded corners. | | `borderStyle` | | Specifies the type of line drawn around the element. | | `borderWidth` | | Specifies the thickness of the border. | | `header` |

A JSON object containing the following properties, along with valid values for each one:

| Specifies the properties of the selected header. | | `fontSize` | | Specifies the size, or height, of the font. | | `fontFamily` | | Defines the font applied to the selected element. | | `boxShadow` | | Puts shadows on elements | | `fontWeight` | | Sets the weight, or thickness, of a font. | {% hint style="warning" %} * Any accepted value other than a number must be wrapped in double quotes as a string. * Setting any of these properties overrides the value inherited from the Dashboard. * Setting any of these properties prevents the Widget Custom Style from being modified at the Dashboard level. {% endhint %} ## Examples ### Example 1: Set a Widget's header Custom Style Let's give a metric widget a Custom Style with the following changes: * Rounded corners with a border radius of `10` * An outset border style * A bluish background color * White font color * A border width of `1` The following JSON defines that Custom Style: ```json { "color": "#FFFFFF", "header": { "color": "#FFFFFF", "backgroundColor": "#165a72", "borderStyle": "dotted" }, "fontSize": 14, "borderRadius": 15, "backgroundColor": "#000000" } ``` To apply the dotted border to the whole Widget, move `"borderStyle": "dotted"` from the `header` section to the root. You must also set the `borderWidth` property for the border to display correctly: ```json { "color": "#FFFFFF", "header": { "color": "#FFFFFF", "backgroundColor": "#165a72" }, "fontSize": 14, "borderColor": "white", "borderStyle": "dotted", "borderRadius": 15, "borderWidth": 5, "backgroundColor": "#000000" } ``` This is the Widget with no Custom Style applied:
This is the same Widget after applying the Custom Style above:
### Example 2: Set a Widget's Body Custom Style Let's modify the Widget body for the metric widget above. Set the following properties: * Black font color * Font size to `20` * Border radius to `10` * Background color to `#38b01e` * Box shadow to `30px -8px teal` The following JSON defines that Custom Style: ```json { "color": "black", "header": { "color": "white", "borderStyle": "outset", "borderWidth": 1, "borderRadius": 10, "backgroundColor": "#10435b" }, "fontSize": 20, "borderRadius": 10, "backgroundColor": "#38b01e", "boxShadow": "30px -8px teal" } ``` After applying the Custom Style above, the Widget looks like this:
### Example 3: Using linear gradient background Let's use the previous metric Widget again for this example. Instead of a flat green background color, use a linear gradient. Set the `background` property to `linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)` as shown below:
This is the resulting widget:
You can also use the `background` property in the widget header, as shown below: ```json { "color": "black", "header": { "color": "white", "borderStyle": "outset", "borderWidth": 1, "borderRadius": 10, "background": "linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%)" }, "fontSize": 20, "borderRadius": 20, "background": "linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)", "boxShadow": "30px -8px teal" } ```
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://dev.ubidots.com/dashboards-and-widgets/custom-style/widgets.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.