Special HTML Classes for Editors

Editors:

Please insert class=”…” to the appropriate HTML tags, such as <p class=”announcement”>, <div class=”table-responsive”> and <table class=”table”>.

We use many classes to accomplish multiple goals. It is understandable that you might not be able to follow all the steps. Please don’t hesitate to reach out to the SA Comms and our web team will be happy to complete your task, or provide more specific instructions on how to use these classes.

Announcement text:

class=”announcement”

Holiday Closures: December 17th: Close at 1:30pm, December 19th: Closed, December 21: Close at 3pm, Dec. 22, 2018 – Jan. 2, 2019.

Intro text:

class=”Intro”

Edwards track is a facility managed by Intercollegiate Athletics and is not currently open to the public. Please visit our Program and Service Updates page for our current offerings.

Blockquote’s author citation

Insert <cite title=”Source Title”> inside the <blockquote> tags to indicate the source.

<blockquote><cite title=”Source Title”>…</cite></blockquote>

“Our job and privilege is to introduce students to the intellectual life of the Berkeley campus. We want them — each and all — to feel comfortable with us as faculty members and individuals who can provide guidance in their academic development and in their personal lives.”

Professor Genaro Padilla, former Resident Faculty member at Clark Kerr Campus.

Insert texts:

Use <div class=”insert-special”> to create a block on the right corner.

 

 

 

Images:

To center an image, please manually add “center-img” to the class attribute inside the <img> tag.

Such as <img class=”alignnone size-full wp-image-730 center-img” src=”https://sat.berkeley.edu/wp-content/uploads/2018/10/ContentHub_Thumbnails_Week4_78F-400×300.png” alt=”” width=”400″ height=”300″ />

 

 

To ensure a large (full-width image) will have the proper ratio on different browsers (responsive), please add “img-auto” to the class attribute. Also, please remove the width and height attributes manually.

Such as <img class=”alignnone size-full wp-image-730 center-img img-auto” src=”https://sat.berkeley.edu/wp-content/uploads/2018/10/ContentHub_Thumbnails_Week4_78F-400×300.png” alt=”” width=”400″ height=”300″ /></p>

 

Buttons

We use 3 sets of buttons (3 large, 3 medium, and 3 small sized)

Large Buttons

Use special classes in the <span> tags:

<a href=”target-URL”><span class=”btn btn-lg bk-blue cal-gold-text”>Button Text (California Gold Text on Berkeley Blue)</span></a></p>
<p><a href=”target-URL”><span class=”btn btn-lg bk-blue white-text”>Button Text (White Text on Berkeley Blue)</span></a></p>
<p><a href=”target-URL”><span class=”btn btn-lg cal-gold black-text”>Button Text (Black Text on California Gold)</span></a></p>

California Gold Text on Berkeley Blue

White Text on Berkeley Blue

Black Text on California Gold

Medium Buttons

<a href=”target-URL”><span class=”btn bk-blue cal-gold-text”>Button Text (California Gold Text on Berkeley Blue)</span></a></p>
<p><a href=”target-URL”><span class=”btn bk-blue white-text”>Button Text (White Text on Berkeley Blue)</span></a></p>
<p><a href=”target-URL”><span class=”btn cal-gold black-text”>Button Text (Black Text on California Gold)</span></a></p>

California Gold Text on Berkeley Blue

White Text on Berkeley Blue

Black Text on California Gold

Small Buttons

<a href=”target-URL”><span class=”btn btn-sm bk-blue cal-gold-text”>Button Text (California Gold Text on Berkeley Blue)</span></a></p>
<p><a href=”target-URL”><span class=”btn btn-sm bk-blue white-text”>Button Text (White Text on Berkeley Blue)</span></a></p>
<p><a href=”target-URL”><span class=”btn btn-sm cal-gold black-text”>Button Text (Black Text on California Gold)</span></a></p>

California Gold Text on Berkeley Blue

White Text on Berkeley Blue

Black Text on California Gold

Iframes

We use 4 kinds of iframes wrapper, to accommodate iframes with width:height ratios of 21:9. 16:9, 4:3, and 1:1.

Please add <div class=”embed-responsive embed-responsive-21by9″><iframe>…</iframe></div> to the <iframe>…</iframe> codes. Or

<div class=”embed-responsive embed-responsive-16by9″>

<div class=”embed-responsive embed-responsive-4by3″>

<div class=”embed-responsive embed-responsive-1by1″>

Google Calendars

To insert a Google Calendar, you must insert it twice, one set for desktop, and one set for mobile devices. Only one of these two will be displayed depending on the viewer’s browser width.

Add <div class=”desktop-cal”> for desktop, or

add <div class=”mobile-cal”> for mobile devices. For example:

Tables

To ensure the responsiveness of the tables, please ensure that <div> tags are added to the beginning and the end of the tables, and add class=”table” to the <table> attribute:

<div class=”table-responsive”>

<table class=”table”>

Your Table

</table>

</div>