Chap WordPress theme

CSS helper classes

Helper classes are CSS classes that are included with the Chap theme and can be used with shortcodes or plain HTML to tweak the content to suit your needs.

Text color

Color classes use Semantic UI color values defined in globals/site component,
customizable in the theme options under Chap Theme -> SUI.
Text color classes

Gray text

Red text

Orange text

Yellow text

Olive text

Green text

Teal text

Blue text

Violet text

Purple text

Pink text

Brown text

Muted text

Black text

White text

[p gray text]Gray text[/p]
[p red text]Red text[/p]
[p orange text]Orange text[/p]
[p yellow text]Yellow text[/p]
[p olive text]Olive text[/p]
[p green text]Green text[/p]
[p teal text]Teal text[/p]
[p blue text]Blue text[/p]
[p violet text]Violet text[/p]
[p purple text]Purple text[/p]
[p pink text]Pink text[/p]
[p brown text]Brown text[/p]
[p muted text]Muted text[/p]
[p black text]Black text[/p]
[segment inverted compact]
  [p white text]White text[/p]

Text style

Text style classes

Bolding removed

Bolding added

Italic added

Bolding and italic added

Color, bolding and italic added

[p normal text]Bolding removed[/p]
[p bold text]Bolding added[/p]
[p italic text]Italic added[/p]
[p bold italic text]Bolding and italic added[/p]
[p red bold italic text]Color, bolding and italic added[/p]


Borderless class can remove borders.
[segment borderless]Segment[/segment]

Paddingless class can remove padding.

[segment paddingless]Segment[/segment]

Marginless class can remove margin.

Text after

Text after
Text after

[button marginless]Button[/button]
Text after

Shadowless class can remove text-shadow (useful in slides) and box-shadow.

[segment shadowless]Segment[/segment]


Breakpoints are defined in the chap/core component,
customizable in the theme options under Chap Theme -> SUI.
Visibility classes
Shown only on AMP pages
Hidden on mobile breakpoint
Shown on mobile breakpoint
[div invisible]Hidden text[/div]
[div amp-invisible]Hidden on AMP pages only[/div]
[div amp-only]Shown only on AMP pages[/div]
[div mobile-invisible]Hidden on mobile breakpoint[/div]
[div mobile-only]Shown on mobile breakpoint[/div]

Responsive visibility


Mobile invisible

Mobile only

  [header]Mobile invisible[/header]
  [button mobile-invisible]Button[/button]
  [header]Mobile only[/header]
  [button lg-invisible sm-invisible tablet-invisible]Button[/button]

Tablet invisible

Tablet only

  [header]Tablet invisible[/header]
  [button tablet-invisible]Button[/button]
  [header]Tablet only[/header]
  [button lg-invisible sm-invisible mobile-invisible]Button[/button]
Small screen

Small screen invisible

Small screen only

  [header]Small screen invisible[/header]
  [button sm-invisible]Button[/button]
  [header]Small screen only[/header]
  [button lg-invisible tablet-invisible mobile-invisible]Button[/button]
Large screen

Large screen invisible

Large screen only

  [header]Large screen invisible[/header]
  [button lg-invisible]Button[/button]
  [header]Large screen only[/header]
  [button sm-invisible tablet-invisible mobile-invisible]Button[/button]

Mobile alignment

Mobile text alignment
Left aligned text, mobile right aligned.
Center aligned text, mobile left aligned.
Right aligned text, mobile center aligned.
Center aligned text, mobile justified.
[grid equal width stackable]
  [column left aligned mra]Left aligned text, mobile right aligned.[/column]
  [column center aligned mla]Center aligned text, mobile left aligned.[/column]
  [column right aligned mca]Right aligned text, mobile center aligned.[/column]
  [column center aligned mj]Center aligned text, mobile justified.[/column]


Mobile alignment classes allow to specify different alignment at mobile resolutions.
Class name Meaning
mla mobile left aligned
mca mobile center aligned
mra mobile right aligned
mj mobile justfified