Web Tools

Our websites use Bootstrap, a popular website layout framework. If you are trying to achieve something that is not described within this guide, check out the Bootstrap site or contact the webmaster.  If you are comfortable editing content in the “text” view, you will have more options available to you for formatting your content.

Berkeley Brand Style guidelines can be found on the Berkeley Brand website.

To request a new site feature, page, or enhancement, please submit a web request.

Text and Layout

H3 and Other Title Tags

The H3 element automatically clears text/images around it and inserts a line break. You should separate sections of a post using H2 or H3 title tags.  Consider that your content should “read” with a logical hierarchy.  The page title is always H1 (you should only have one H1), section headers can be H2 with subsections being H3.

Copying and Pasting

If you are copying and pasting from Word, it’s a good idea to either paste into the HTML screen editor screen, paste into Notepad/Textedit first, and carefully inspect the code of what you pasted. If you see “mso” code or lots of “span” tags, you need to clean them up.  WordPress also provides a the “Paste as Text” and “Clear Formatting” options in the content editor.

Use Existing Styles

Try not to create custom colors or text styles, this adds unnecessary code to the pages. Simply choose from P, H1-H6 for you text styles. Bolds and italics are fine.

Creating a “Line” to Separate Content/Sections

This can be accomplished by inserting the following in the “Text” code view: <hr>, or by choosing the “Horizontal Line” insert button in the visual editor.

Left, Center, Right Alignments

You can use the text alignment options with the content editor toolbar.  If you need more control, have a look at the Bootstrap alignment classes (called “floats”.)

Creating Tables

Only use tables when representing “tabular data”. You will need to be comfortable with working with HTML in order to create tables. To get started, insert the following code into the “Text” editor view:

<div class=”table-responsive”>
<table class=”table table-bordered table-striped”>
<thead>
<tr>
<th>ONE HEAD</th>
<th>TWO HEAD</th>
<th>THREE HEAD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Grid behavior</td>
<td>Horizontal at all times</td>
<td>Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<td>Grid behavior</td>
<td>Horizontal at all times</td>
<td>Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<td>Grid behavior</td>
<td>Horizontal at all times</td>
<td>Collapsed to start, horizontal above breakpoints</td>
</tr>
</tbody>
</table>
</div>

Creating Links

When linking to a page on grad.berkeley.edu, do not open in a new browser window. For all other links, open in an external window. Text links should be made on descriptive language. Examples…
Good: Find out more by visiting the Career Center website.
Bad: Visit the Career Center on the web.
Baddest: Click here to learn more from the Career Center website.
Badd Too: Find out more by going here http://careers.berkeley.edu.
Equally Not Good:  More information is available from the Career Center website.

To create an email link, consider linking to our Contact Us page first. Whenever possible, refrain from referring to specific individuals, and instead refer to Offices or job title (“contact the Associate Dean of Degrees“.)  To create an email link, select the link text (the persons’ title or the office name) and enter “mailto:officenamehere@berkeley.edu” into the link insert tool.

Post Settings

Make the permalink short and unique. It doesn’t have to be very descriptive. Good: profiles/rob-johnson/. Bad: profiles/the-life-and-times-of-rob-johnson/.

Always include an excerpt. This should be 1-2 sentences long, and usually just the first couple of lines of the article.

Do not allow comments or trackbacks on posts.

Use existing categories.  Only create new categories when adding a new eGrad edition.

Use Tags to create informal collections of content. New tags should be either a Department Name (case sensitive), a broad topic that ties-together similar articles, but not too generalized (Good: Sustainability. Bad: Graduate.)

Images, PDFs and Videos

Replace an Existing File in the Media Library

Use the same filename as the one you are replacing. If you replace the old file with a version that has a different filename, WordPress will correct links to the file on your website only — other sites that link to your file are not changed. To avoid breaking links on other sites that are linking to your media item, replace the old file with a new file of the same name.

  1. From the Media section of the WordPress Dashboard’s left menu, select Library.
  2. Locate the file you need to replace.
  3. Hover your cursor over the item and click the Edit link.Replace a media file
  4. On the media item’s details page, find the Replace media option.
  5. Click Upload a new file.
  6. From the file browser that appears, choose the replacement file you’d like to upload.

If you are replacing an image, you can only upload a new image file. The interface indicates the pixel dimensions of the image you are replacing.
Click the Upload button to replace your media item.

Once uploaded, the old file in your media library will be replaced with the new one. There is no way to undo a media replacement, so proceed carefully.

Big Image Sizes

If you are cropping large images before uploading, you should try to crop to no less than 750 pixels wide.  Height is more flexible. Always try to source images with horizontal formats.  Image quality should be set to “High”, and/or 80% of original.  File size for large photos should be less than 150K.  All photos should be JPEG files.  Text, illustrations, logos, charts/graphs should generally be .gif files.

If you upload images that are larger than 750 wide, WordPress will create a 750 wide version for you.

Featured Image (Thumbnail) Sizes

150Thumbnails will be created by WordPress at 150×150 pixels.  To control which image from a post appears within the “list view” on the homepage or post category archive pages, choose “set featured image” from the “Featured Image” box located along the right-sidebar within the Admin view.

If you don’t like how WP crops an image, you can create your own (a square version) and upload it independently.

Always choose an image from the Media Library if it already exists.

You will not be able to create a “featured image” thumbnail from linked photos…only photos that are within the WordPress Media Library (you have to upload a photo for WP to “crunch” it to the right size).

Editing Images

Screenshot of image editing instructions

Be sure to give the images alt descriptions, and descriptive titles. The title shouldn’t be the file name (.jpg)…but should make it easy to read when you are browsing/searching a list of images. Good: Andrew Szeri Thumbnail Ivy. Bad: DSC_2344-ajs.jpg.

Making sure Images “respond” and shrink to a mobile or narrow screen view

In same cases, full width images do not automatically adjust and shrink to narrower screens (mobile, or laptop). This will push the image into the sidebar.
To resolve this, add “img-responsive” as an additional class to the image tag in the text view of the post.
For example:
<img class="size-full wp-image-20289 img-responsive" src="https://grad.berkeley.edu/wp-content/uploads/springbreak1.jpg" alt="" width="750" height="563" >
Note the img-responsive code in the above. That’s what you need to add.

Preventing Text from Wrapping Around an Image

There are various ways to accomplish this, but you may need to edit your content in the “Text” view, which will allow you to add HTML.

Embed Videos (or other interactive content)

All you need to do to embed something into a post or page is to post the URL to it into your content area. Make sure that the URL is on its own line and not hyperlinked (clickable when viewing the post).

For example:

http://www.youtube.com/watch?v=dQw4w9WgXcQ

WordPress will automatically turn that into a YouTube embed when the post is viewed.

Depending on the source (Vimeo, Flickr, etc.), there might be different embed methods.  See the WordPress site for more tips: http://codex.wordpress.org/Embeds.

GradNews

Setting GradNews Categories

GradNews homepage “Headlines” should be reserved for feature stories.  Announcements (fellowships, events, deadlines) should be categorized within the Announcements category.  Announcements are mostly for our internal audiences, and will mostly be distributed with eGrad, Facebook and Twitter.  Headlines and the GradNews homepage is our more “public” news face.

The GradNews homepage feature photo/headline is the most recent post in the Feature category.  You must have a hiqh-quality large photo to use for a Feature.  Please seek assistance with this.

Choosing Featured Articles for the Homepage

Within the Post Editor, you must select or de-select the Homepage Feature checkbox to choose up to 4 featured articles to display on the Graduate Division homepage. You might need to “remove” ones that are currently featured in order to have your chosen articles display.  Be sure to check the Homepage after you have chosen the featured articles.

Choosing a Featured Deadline for the Homepage

The “Important Dates for Students” section of the homepage includes Deadlines that are selected as “Featured”.  Choose one at a time.

Adding a Link to the In the News Sidebar Section

Be sure to keep the link titles short. 2 lines wrapping in the sidebar at the most.  You can edit any existing link.

1. In the Editor view, click on the “Links” link in the sidebar, then on “Add New”.

 

2. Add the link Name, Web Address, Description, Categories.

 

3. Save and check your work.  Make sure the link works.