Widget Basic Customization#

The following options are basic toggle customizations you can apply to all widgets. These options are also part of the widget preview options when copy-and-pasting code from the O.D.D.S dashboard.

Tip

For more advanced customization using templates see Widget Advanced Customization.

The following document assume you understand the basics about embedding Quarter4 widgets copied from your dashboard. For more information see Embedding Widgets.

Alter Colours#

You can alter the color of the widgets using a hex codes in a number of data attributes:

data-color-background -- The Background color. Default f0f4f9.
data-color-text -- The Text Color. Default 000000.
data-color-high -- The color for the corner indicator when "high". Default 53dc23.
data-color-medium -- The color for the corner indicator when "medium". Default ffa928.
data-color-low -- The color for the corner indicator when "low". Default b83b3b.

For each attribute enter only the hex letters and numbers. Exclude the leading #.

Example

Setting the primary color to red.

<blockquote 
    class="q4-team-current-event" 
    data-sport="american-football"  
    data-q4="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
    data-detail="true"
    data-color-background="bf95f0"
    data-color-text="2d114d"
>

Configuration Example

The colour will automatically be adjusted (lightened or darkened) across the various elements of the embed:

Add Powered By Quarter4#

You may include a "Powered by Quarter4" link using data-powered="true":

Example

Show the Powered By Quarter4 indicator

<blockquote 
    class="q4-team-current-event" 
    data-sport="american-football"  
    data-q4="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
    data-detail="true"
    data-powered="true"
>

Configuration Example

Advanced Customization#

For greater control over the layout of widgets we recommend using the built-in template features as described in Advanced Customization.