Canvas Docs

Styling Widgets

Widgets are styled once, site-wide, from the Widgets tab of Theme Options, and the styles apply to every sidebar widget area at the same time, the main sidebar, the footer and the shop. That single point of control is what keeps a sidebar looking consistent as its content changes, so resist the urge to style widget groups one by one in the editor. Read this page when the sidebar's look needs a change.

How The Styling Attaches

The Widgets tab styles anything built in the widget structure: a group carrying the widget class, with a heading for its title. The parts Canvas ships already follow it, and Widget Areas In Canvas shows how to keep it when adding your own groups. Style set here reaches all of them at once, which is also why a group without the class stays unstyled.

The Three Groups Of Settings

Starting screenCanvasTheme Options, the Widgets tab.

The tab is organised by what is being styled, and empty values inherit from the theme, so you only set what should differ:

  • General styles the widget container: background, text colour, padding, margin, border, radius, shadow, and an optional separator line between widgets.
  • Title styles the widget headings: the heading tag they render as, colour, size, weight, transform, spacing, the border beneath them, and a set of quick presets. Custom values win over a preset, so a preset is a starting point rather than a lock.
  • Links styles the link lists widgets are mostly made of: link colours, sizes, per-item padding and dividers, an optional icon before each link, and the tag cloud's visual style.

Pitfalls

A title style does nothing. The title settings style widget headings. A widget group without a heading has nothing to style, and a preset you chose is overridden by any custom value set in the fields above it.

The separator line does not appear. Separator Color only takes effect once Show Separator Line is on, and the line draws between widgets, so a sidebar holding a single widget shows none.

One widget needs to differ from the rest. The tab is site-wide by design. For a single exception, style that one group directly in the Site Editor, and accept that it now maintains itself.

Every Setting

The three groups are listed below, generated from the product, so they are current by construction:

  • Widget Background ColorDefaultEmpty

    Background color for each widget container. Leave empty for transparent.

  • Widget Text ColorDefaultEmpty

    Default text color inside widgets. Leave empty to inherit.

  • Widget PaddingDefaultEmpty

    Space inside every widget box in your sidebars and footer, written as a length such as 20px. It is what turns a bare widget into a card with room around its content.

  • Widget Bottom MarginDefaultEmpty

    Space below each widget.

  • Widget BorderDefaultEmpty

    Outline around every widget box, written as thickness, style and colour. Use it to mark each widget as a distinct card rather than a run of stacked text.

  • Widget Border RadiusDefaultEmpty

    How rounded the corners of every widget box are, written as a length such as 8px. Match it to the corners your buttons and cards already use.

  • Widget Box ShadowDefaultEmpty

    Shadow cast by every widget box, written as offset, blur and colour. A soft shadow lifts widgets off the page without needing a border as well.

  • Show Separator LineDefaultOff

    Display a horizontal line between widgets in sidebar areas.

  • Separator ColorDefaultEmpty

    Color of the separator line between widgets.

    Shown when Show Separator Line is on

  • Title HTML TagDefaultH4

    HTML heading tag for widget titles across all sidebar areas.

    ChoicesH2H3H4H5H6

  • Title ColorDefaultEmpty

    Color for widget titles. Leave empty to inherit.

  • Title Font SizeDefaultEmpty

    Font size for widget titles.

  • Title Font WeightDefaultEmpty

    Font weight for widget titles.

    ChoicesInherit (empty)300 - Light400 - Normal500 - Medium600 - Semi Bold700 - Bold

  • Title Text TransformDefaultEmpty

    Text transformation for widget titles.

    ChoicesNone (empty)UppercaseLowercaseCapitalize

  • Title Letter SpacingDefaultEmpty

    Letter spacing for widget titles.

  • Title Bottom MarginDefaultEmpty

    Space below the widget title before the content.

  • Title Border BottomDefaultEmpty

    Rule drawn under every widget title, written as thickness, style and colour. It separates the heading from the widget content beneath it.

  • Title Padding BottomDefaultEmpty

    Padding below the title text (before the border).

  • Title Style PresetDefaultEmpty

    Quick style preset for widget titles. Custom values above will override the preset.

    ChoicesDefault (empty)Underline AccentHighlight BackgroundLeft Border AccentSmall Uppercase

  • Link ColorDefaultEmpty

    Default color for links inside widgets.

  • Link Hover ColorDefaultEmpty

    Color for widget links on hover.

  • Link Font SizeDefaultEmpty

    Font size for links in the Links widget and widget_links lists.

  • Link Item PaddingDefaultEmpty

    Vertical padding for each link item in widget_links lists.

  • Link Item DividersDefaultOff

    Show a subtle border between each link item in widget_links lists.

  • Divider ColorDefaultEmpty

    Border color between link items.

    Shown when Link Item Dividers is on

  • Link List IconDefaultEmpty

    Optional icon displayed before each link in widget_links lists.

  • Tag Cloud StyleDefaultEmpty

    Visual style for the Tag Cloud widget.

    ChoicesDefault (Flat) (empty)OutlineFilledRounded Pills

  • Tag Cloud ColorDefaultEmpty

    Base color for tag cloud items.

Was this page helpful?