Optional Styles

There are several optional HTML "classes" available that will change some of the default heading, paragraph, table, and list styling in Open Berkeley.

Headings

Here is an example of how the "<h2>" and "<h3>" headings look in the Open Berkeley theme.

There are a few additional styling options available that will still be "<h2>" and "<h3>" in the source, but will look a little different based on your needs/preference.

Examples of Heading Styles

Examples of "simple" Heading 2 and Heading 3:

Examples  of "smaller" Heading 2 and Heading 3:

Example of a Heading 2 with "alternate" style, which makes the heading 2 look like a standard heading 3:

Examples of "mini" Heading 2 and Heading 3:

How to Configure Heading Styles

In order to utilize these new heading classes, you will need to go in to the HTML source (see Edit the HTML of a page) and add classes to the headings.

Here is the list of available classes:

  • openberkeley-heading-simple (available for <h2> and <h3>)
  • openberkeley-heading-smaller (available for <h2> and <h3>)
  • openberkeley-heading-alt (available for <h2> only)
  • openberkeley-heading-mini (available for <h2> and <h3>)

To add the classes, click on the "HTML" button in the editing toolbar. Then, find the "<h2>" or "<h3>" in the HTML, and add one of the above classes in the following format preceded by "class=":

<h2 class="openberkeley-heading-simple">This is the Heading 2 text</h2>

Hit "Update", then save your changes.

Paragraphs

From an accessibility perspective, it is important to NOT use headings purely for presentation, and to instead use headings to help organize and structure your content. If you have text that you would like to highlight, however, and if that text shouldn't be added as a heading, then there are a few styles available that you can add to regular paragraph text.

Examples of Paragraph Styles

Example of paragraph text that looks like a heading 2 (<h2>):

Example of paragraph text that looks like a heading 2 (<h2>) with bold styling:

Example of paragraph text that looks like a heading 3 (<h3>):

Example of paragraph text that looks like a heading 3 (<h3>) without bold styling:

Example of paragraph text that looks like a heading 4 (<h4>) without bold styling:

Example of paragraph text that looks like a heading 4 (<h4>) with bold styling:

Example of paragraph text that looks like a "mini" heading 2 (<h2>) or heading 3 (<h3>):

Example of paragraph text that looks like a heading 2 (<h2>) with additional margin (also available for heading 3):

Example of paragraph text that styles text to look like a "lead" paragraph:

How to Configure Paragraph Styles

In order to utilize these new paragraph classes, you will need to go in to the HTML source and add classes to the paragraph tags (<p>).

Here is the list of available classes:

  • openberkeley-serif-large-normal (similar to h2 styling)
  • openberkeley-serif-large-bold (similar to h2 with higher font-weight)
  • openberkeley-sans-medium-bold (similar to h3 styling)
  • openberkeley-sans-medium-normal (similar to h3 with normal font-weight)
  • openberkeley-sans-small-normal (similar to h4 styling)
  • openberkeley-sans-small-bold (similar to h4 with higher font-weight)
  • openberkeley-sans-mini ("mini" heading style)
  • openberkeley-heading-margins (h2/h3 margins)
  • openberkeley-lead-para ("lead" paragraph style)

To add the classes, click on the "HTML" button in the editing toolbar. Then, find the "<p>" tag in the HTML, and add one of the above classes in the following format preceded by "class=".

<p class="openberkeley-serif-large-normal">Paragraph text that looks like a Heading 2</p>

Hit "Update", then save your changes.

NOTE: If you would like to add some additional margin by utilizing the "openberkeley-heading-margins" class, you will need to add both the "openberkeley-heading-margins" as well as one of the other classes listed above.

<p class="openberkeley-serif-large-normal openberkeley-heading-margins">Paragraph text that looks like a Heading 2 with margin</p>

Tables

In the Open Berkeley theme, tables have simple background striping.

This makes it easier to distinguish between the various data rows presented in your table.

There are two options available to remove the background colors of your tables.

  • If you would like to remove the table striping, you can add a class called "openberkeley-no-striping"
  • If you would like to make the background of your table white, you can add a class called "openberkeley-no-striping-white"

Follow the instructions above for adding heading styles, then instead of adding the class to the "<h2>" or "<h3>", add the class to the "<table"> tag.

"openberkeley-no-striping" removes the striping (only the header cell will be darker than the data cells):

"openberkeley-no-striping-white" will remove all background colors from the table (only the header cell will be darker than the data cells):

Lists

In addition to the "List Properties" button (see Add Lists), which allows you to choose bullet styles, you can use an optional class to remove all bullets from your list.

This can be helpful if you would like to have a "block" of related information, such as contact phone numbers and email addresses, that are organized as a list but don't need bullets. A good example of this are the blocks of related information in your site's footer (see "Footer Options" on Berkeley Brand).

Follow the instructions above for adding heading styles, then instead of adding the class to the "<h2>" or "<h3>", add the class to the "<ul"> tag.