HTML block appearance styles settings - buttons, slots, and tabs

When you select an appearance style for a Sitecore Discover HTML block widget, you set up some variables to personalize the buttons, slots, and tabs of the widget. These variables are grouped into different settings.

Button container style settings

Set up some or all of these button container style variables:

Variable	Description
Button Container Background	Background color for the widget container. Use the `color` CSS property. Default: none.
Button Container Padding	Padding around the widget container for desktop and tablet devices. Use the `padding` CSS shorthand property. Default: 10px.
Button Container Padding (mobile)	Padding around the widget container for desktop and tablet devices. Use the `padding` CSS shorthand property. Default: 10px.

Variable

Description

Button Container Background

Background color for the widget container. Use the color CSS property.

Default: none.

Button Container Padding

Padding around the widget container for desktop and tablet devices. Use the padding CSS shorthand property.

Default: 10px.

Button Container Padding (mobile)

Padding around the widget container for desktop and tablet devices. Use the padding CSS shorthand property.

Default: 10px.

Button style settings

Set up some or all of these button style variables:

Variable	Description
Button Position (desktop & tablet)	Vertical alignment of the button for desktop and tablet devices. Enter left, right, or center . Default: center.
Button Position (mobile)	Alignment of the button for desktop and tablet devices. Enter left, right, or center . Default: center.
Button Border Radius	Corner roundness of the container border. Use the `border-radius` CSS property. For example, set this variable to: 50% to get a circular shape. 5px 5px 0 0 to apply a 5 pixel radius to the top-left and top-right corners, and no radius to the bottom-left and bottom-right corners. Default: 4px
Button Label Font Family	Font family of the text on the button. Use the `font-family` CSS property. Default: `inherit`.
Button Label Font Size (desktop & tablet)	Size of the text on the button for desktop and tablet devices. Use the `font-size` CSS property. Default: 16px.
Button Label Font Size (mobile)	Size of the text on the button for desktop and tablet devices. Use the `font-size` CSS property. Default: 16px.
Button Label Font Weight	Weight, or boldness, of the text on the button. Use the `font-weight` CSS property. Default: normal.
Button Height (desktop & tablet)	Height of the button for desktop and tablet devices. Use pixels (`px`), percentage (`%`), viewport height (`vh`), or `em`. Default: 40px.
Button Height (mobile)	Height of the button for mobile devices. Use pixels (`px`), percentage (`%`), viewport height (`vh`), or `em`. Default: 40px.
Button Width (desktop & tablet)	Width of the button for desktop and tablet devices. Use pixels (`px`), percentage (`%`), viewport width (`vm`), or `em`. Default: 250px.
Button Width (mobile)	Width of the button for mobile devices. Use pixels (`px`), percentage (`%`), viewport width (`vm`), or `em`. Default: 100%.

Button normal state style settings

Set up some or all of these button normal state style variables:

Variable	Description
Button Background	Background color of the button when it is in the normal state. Use the `color` CSS property. Default: none.
Button Border	Border around the button when it is in the normal state. Use the `border` CSS shorthand property that sets the same width, color, and style for all four borders. Default: 1px solid #55595c
Button Label Color	Color of the text in the button when it is in the normal state. Use the `color` CSS property. Default: #55595c.

Variable

Description

Button Background

Background color of the button when it is in the normal state. Use the color CSS property.

Default: none.

Button Border

Border around the button when it is in the normal state. Use the border CSS shorthand property that sets the same width, color, and style for all four borders.

Default: 1px solid #55595c

Button Label Color

Color of the text in the button when it is in the normal state. Use the color CSS property.

Default: #55595c.

Button hover state style settings

Set up some or all of these button hover state style variables:

Variable	Description
Button Background Hover	Background color of the button when the user hovers over it. Use the `color` CSS property. Default: #55595c.
Button Border Hover	Border around the button when the user hovers over it. Use the `border` CSS shorthand property that sets the same width, color, and style for all four borders. Default: 1px solid #55595c
Button Label Color Hover	Color of the text in the button when the user hovers over it. Use the `color` CSS property. Default: #FFF.

Variable

Description

Button Background Hover

Background color of the button when the user hovers over it. Use the color CSS property.

Default: #55595c.

Button Border Hover

Border around the button when the user hovers over it. Use the border CSS shorthand property that sets the same width, color, and style for all four borders.

Default: 1px solid #55595c

Button Label Color Hover

Color of the text in the button when the user hovers over it. Use the color CSS property.

Default: #FFF.

Slot settings

For the image grid appearance style, you can add up to ten images to the grid. Set up some or all of these variable for each slot:

Variable	Description
Image Url (desktop & tablet)	Source URL of the slot image for desktop and tablet devices.
Image Url (mobile)	Source URL of the slot image for mobile devices.
Clickthrough URL	Destination URL that the user goes to when they click the slot.
Label	The label text that appears above, below, or in the middle of the image. The position of this text depends on the Label position variable.

Slot style settings

Set up some or all of these slot variables:

Variable	Description
Label position	Horizontal alignment of the label for desktop and tablet devices. Enter top, middle, or bottom. Default: bottom.
Label Font Color	Font color of the label. Use the `color` CSS property. Default: #000
Label Font Family	Font family of the label. Use the `font-family` CSS property.
Label Font Size	Size of the label font for desktop and tablet devices. Use the `font-size` CSS property. Default: 16px.
Label Font Size (mobile)	Size of the label font for desktop and tablet devices. Use the `font-size` CSS property.
Dark overlay on the image	Whether you want a transparent black background color over the image. Use 1 if you want the transparent black background and 0 if you do not want it. Default: 0.
Image Border	Border around the image. Use the `border` CSS shorthand property to set the size and color. Default: none.
Image Border Radius	Corner roundness of the image border. Use the `border-radius` CSS property. For example, set this variable to: 50% to get a circular shape. 5px 5px 0 0 to apply a 5 pixel radius to the top-left and top-right corners, and no radius to the bottom-left and bottom-right corners. Default: 0.
Image Max Width	Maximum width of the image. Use pixels (`px`), percentage (`%`), viewport width (`vm`), or `em`. Default: 100%.
Slot Padding	Padding around the slot for desktop and tablet devices. Use the `padding` CSS shorthand property.
Slot Padding (mobile)	Padding around the slot for desktop and tablet devices. Use the `padding` CSS shorthand property.

Tab settings

Set up one or both of these tab variables:

Variable	Description
Tab x label	Text that appears on the tab.
Rfkid of widget to use for tab x	Sitecore Discover RFKID of the widget used for this tab.

Tab style settings

Set up some or all of these tab style variables:

Variable	Description
Tabs Background	Background color for the widget container. Use the `color` CSS property. Default: transparent.
Tabs Border	Border around the tab. Use the `border` CSS shorthand property to set the size and color. Default: 1px solid #ccc.
Tabs Border Radius	Corner roundness of the tabs border. Use the `border-radius` CSS property. For example, set this variable to: 50% to get a circular shape. 5px 5px 0 0 to apply a 5 pixel radius to the top-left and top-right corners, and no radius to the bottom-left and bottom-right corners. Default: 5px 5px 0 0.
Tabs Margin	Margin around the tab for desktop and tablet devices. Use the `margin` CSS shorthand property. Default: 0 5px
Tabs Margin (mobile)	Margin around the tab for desktop and tablet devices. Use the `margin` CSS shorthand property. Default: 0 5px
Tabs Padding	Padding around the tab for desktop and tablet devices. Use the `padding` CSS shorthand property. Default: 15px.
Tabs Padding (mobile)	Padding around the tab for mobile devices. Use the `padding` CSS shorthand property. Default: 10px.
Tabs Label Font Size	Size of the tab label font for desktop and tablet devices. Use the `font-size` CSS property. Default: 16px.
Tabs Label Font Size (mobile)	Size of the tab label font for mobile devices. Use the `font-size` CSS property. Default: 14px.
Tabs Label Font Family	Font family of the tab label. Use the `font-family` CSS property.
Tabs Label Font Color	Font color of the tab label. Use the `color` CSS property. Default: #000
Tab Active Label Font Color	Font color of the active tab label. Use the `color` CSS property. Default: #000
Tab Active Background	Background color of the active tab. Use the `color` CSS property. Default: `#efefef`.
Tab Active Border	Bofrder around the active tab. Use the `border` CSS shorthand property. Default: `1px solid #efefef`.
Tab Active Content Background	Background color of the content container of the active tab. Use the `color` CSS property. Default: #efefef
Tab Active Content Border	Border around the content container of the active tab. Use the `border` CSS shorthand property. Default: `1px solid #efefef`.
Tab Active Content Border Radius	Corner roundness of the content container of the active tab. Use the `border-radius` CSS property. For example, set this variable to: 50% to get a circular shape. 5px 5px 0 0 to apply a 5 pixel radius to the top-left and top-right corners, and no radius to the bottom-left and bottom-right corners. Default: 5px.

Do you have some feedback for us?

If you have suggestions for improving this article,