WSO Website Style Guide

Following these guidelines helps us keep the WSO website visually consistent, and helps us to keep the site maintainable.

The WSO website uses the WordPress theme CityLogic, and its “child” theme North Shore.

• The themes determine style elements such as colors, fonts, and font sizes.
  • Please use the style defaults for headings, colors, fonts, font sizes, etc.
  • Please avoid modifying these themes, as this impacts site maintainability.
• Theme colors:
  • Dark teal – Use for buttons and dark accents: 004652 (R 00 G 46 B 52)
  • Light teal – Use for table shading and light accents: 33a7a4 (R 33 G a7 B a4)
• Documentation for the themes:
  • CityLogic: https://www.outtheboxthemes.com/documentation/citylogic/
  • North Shore: https://www.outtheboxthemes.com/documentation/north-shore/

Use the Block Editor, also known as the Gutenberg Editor, whenever possible.

• Avoid using the Classic Editor, as WordPress may “deprecate” (drop support for) the Classic Editor in the future.
• Avoid using custom HTML unless necessary, as this impacts maintainability.

Links

• Links to elsewhere on the WSO website should generally not open in a new tab, unless there is a reason to do so.
• Links to other websites should open in a new tab.
• Images displayed at reduced size should link to the full-size image where it makes sense.

Buttons

• For buttons, use the WordPress “Button” block.
• Use style “Fill” and the default text size.
• For the button Background color, use the theme’s Dark Teal: 004652.
• For the button’s Text color, use white (should be the default).
• Bold the text in most cases.
• All other settings should ordinarily use the defaults.
• The result should look like the example below.