Optional Styles

Here is an example of how the Heading 2 (<h2>) and Heading 3 (<h3>) headings look in the Open Berkeley theme. 

There are a few additional options available that will still be <h2> and <h3> in the HTML source, and will provide some variations on the styles.

Examples of Optional 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 will make a 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>)

Create your Heading 2 or Heading 3 text first by using the editing toolbar (see Add and Use Headings). To add the classes, click on the "HTML" button in the editing toolbar. Find the <h2> or <h3> tag 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.

There are styles available for Heading 2 text that will make the text look like a Color Band, utilizing Berkeley Brand colors(link is external). With this option, you can use the Color Band display on Content pages, and in layout regions other than the Hero region.

The Color Band styles are available in addition to the separate optional heading styles, outlined above in the "Headings" section. Unlike the other optional heading styles, you will need to add two HTML classes to the h2 in the HTML source in order to use the Color Band styles. 

Examples of Color Band Styles

Examples of Heading 2 text that looks like Color Bands in Berkeley Blue, Founders Rock, and Medalist:

How to Configure Color Band 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 two classes to the h2 tag. The first class will always be the same, and the second class will be different, depending on which Berkeley Brand color you would like to use.

Here is the first class that you will need to add:

• openberkeley-heading-color

Here is the second class that you will need to add. After adding the above openberkeley-heading-color, choose one of the following classes per h2:

• openberkeley-berkeley-blue (Berkeley Blue)
• openberkeley-founders-rock (Founders Rock)
• openberkeley-medalist (Medalist)
• openberkeley-wellman-tile (Wellman Tile)
• openberkeley-rose-garden (Rose Garden)
• openberkeley-golden-gate (Golden Gate)
• openberkeley-lap-lane (Lap Lane)
• openberkeley-soybean (Soybean)
• openberkeley-south-hall (South Hall)
• openberkeley-pacific (Pacific)
• openberkeley-stone-pine (Stone Pine)
• openberkeley-grey (Grey)

Create your Heading 2 text first by using the editing toolbar (see Add and Use Headings). To add the classes, click on the "HTML" button in the editing toolbar. Find the <h2>tag in the HTML, and add one of the above classes in the following format, preceded by class=:

<h2 class="openberkeley-heading-color openberkeley-berkeley-blue">Heading 2 that looks like a Color Band in Berkeley Blue</h2>

Hit "Update", then save your changes.

From an accessibility perspective, it is important to NOT use headings purely for presentation(link is external), and to instead use headings to help organize and structure your content. If you have text that you would like to look different from standard paragraph text, and if that text shouldn't be added as a heading, then there are a few styles available for this purpose.

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 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-heading-margins (h2/h3 margins)
• openberkeley-lead-para ("lead" paragraph style)

Type your paragraph text first. To add the classes, click on the "HTML" button in the editing toolbar. 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>

In the Open Berkeley theme, tables have simple background striping (light gray and darker gray). This makes it easier to distinguish between the various data rows presented in your table.

Examples of Table Styles

Example of a table with no striping on the data cells (the header cell will be darker than the data cells):

 Example of a table with no background colors (the header cell will be darker than the data cells):

How to Configure Table Styles

If you would like to remove the background colors of your tables, there are two options:

• openberkeley-no-striping (removes darker gray)
• openberkeley-no-striping-white (removes all gray and leaves the table white)

Create your tables first (see Add Tables). To use these classes, 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.

In the Open Berkeley theme, ordered lists are numbered, and unordered lists are bulleted. 

Examples of List Styles

The openberkeley-list-unbullet class 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).

The openberkeley-list-brand can be used for any unordered list where you'd like something more substantial for the style of the bullets, while still adhering to the Berkeley Brand guidelines.

How to Configure List Styles

In addition to the "List Properties" button (see Add Lists), which allows you to choose bullet styles, there are two optional HTML classes available for configuring lists: 

• openberkeley-list-unbullet (removes all bullets from the list)
• openberkeley-list-brand (replaces bullets with small arrows with a gold background, a Berkeley Brand(link is external) style)

Create your lists first (see Add Lists). To use these classes, follow the instructions above for adding heading styles, then instead of adding the class to the <h2> or <h3>, add the class to either the <ul> or <ol> tag. The openberkeley-list-unbullet class can be used on both ordered (<ol>) and unordered (<ul>) lists. The openberkeley-list-brand class can only be used on unordered (<ul>) lists.