Note: This is work in progress
- News items
- University style guide
- Abbreviations & Titles
- Faculty profiles
- Updating Faculty Profiles
- Pull quote
- Title attribute
- Collapsible lists
- Side box - right-hand side
- Twitter cards
- Flickr Slideshows
- Dreamweaver Emmet shortcuts
- Google Analytics
When creating a new news item, make sure you:
- Refer to our guidelines on creating them
- Change the title tage in the head
- Change the url in the Facebook share button
- Don't use capitals in heading, title unless it's a name. Never use capitals in url
- Check that the Facebook share button is working. If not, try pasting the link to the Facebook debug tool and clicking 'fetch new scrape information'
University style guide
For information on quotations, numerals, titles and much more see the University's editorial style guide.
In text, use day, date, month, year: Tuesday 28 March 2006 (note no punctuation).
This can be abbreviated if space is short, when it should appear as 28/03/06.
For events, we use an image of a calendar page to show the date.
Tip: some dates won't fit in the dateBoxday div class. This happens with events taking place over more than one day (e.g. 11-15 May). Fix this by adding span tags to the dates which reduce the font size e.g.: <div class="dateBoxday execdevBox"><span style="font-size:0.7em;">11-12</span></div>
Abbreviations & Titles
Abbreviations should be avoided unless there is no room to spell out the words in full (see acronyms).
Dr is an exception and should always be used rather than Doctor.
Professor can be abbreviated to Prof (no full stop) only when there are space issues.
Always abbreviate Doctor to Dr
Give one forename in full and avoid initials.
Use sentence case rather than title case:
University wins prestigious award not University Wins Prestigious Award
Use am and pm in the 12 hour clock system:
6am (note no gap)
Front page image
the images are stored here and they include guides for the images
Here's that code that calls the pic on the front page, the bits you need to change are the picture name and link to the news story (in bold below)
a little code quirk if the headline wraps onto 2 lines use this code to help  <br />
<!-- bannerItem -->
<div class="bannerItem" style="background-image: url(/management/images/graphics/frontpage/spotlight/felix-haffa-forbes.jpg);">
<a href="/management/news_events/news/2016/01-02-graduate-named-on-forbes-30-under-30-europe-list.html?from=banner" style="text-decoration: none">
<h2>Business Administration alumnus  <br />  on Forbes 30 Under 30 Europe List</h2>
<a class="bannerReadMore" href="/management/news_events/news/2016/01-02-graduate-named-on-forbes-30-under-30-europe-list.html?from=banner" > <img src="/management/images/graphics/externallink.gif" alt="external link" title="external link" width="9" border="0" height="9">Read more <img src="/management/images/graphics/frontpage/arrow_pink.png" alt=">" border="0" /></a>
<a class="bannerReadMore bannerMoreNews" href="/management/news_events/index.html?utm_source=home&utm_medium=banner&utm_campaign=morenewsevents_banner" >More News & Events</a>
<!-- /bannerItem -->
To remove the underline from any image that is a link
Images with dropshadow (used in Alumni section)
We use icons next to a link to show that the link is on an external website, or that you're about to download a pdf or word doc.
PDF and Word files
Phone, email and contact
When updating a name or title in a faculty profile, don't forget to check/update the following pages:
- A-Z: http://www.bath.ac.uk/management/faculty/
- Subject groups: http://www.bath.ac.uk/management/faculty/subject.html
Updating Faculty Profiles
An example of what a profile looks like can be seen here on the test server: http://mnsv-laszlo.campus.bath.ac.uk/management/faculty/01-new-academic-template.html.
For anyone adding new profiles on Dreamweaver please read the main points below:
- Use the template named 01-new-academic-template.html.
- Remember to change the name at the very top of the document (code line 6) <title> About - Prof/Dr/Mr/Ms Firstname Lastname </title>.
- When you save, click save as and name the document firstname-lastname.
- Please refer to the AMJ style guide (link provided in template) for the format of publications.
- Any publications from 2008 or earlier need to be under 'older publications'.
See DMC wiki page about embedding video in CMS: Embedding YouTube videos in the CMS
Use for in-page short quotes (about courses etc.) like the one here.
<tr class="odd"> and <tr class="even"> are being used.
default style: class="school"
Other table styles: class="research"
Table code to make it easier for odds and evens coloured background
delete all the <tr class="odd"> and <tr class="even"> with <tr>
and then use this nifty little code (currently in shared.css) to target the alternate rows in the table
All external links to open in the same window. Add an external link icon to all links that point to pages outside of School of Management website.
All hyperlinks should have a meaningful anchor text. Avoid using 'click here', etc.
All hyperlinks linking within the /management/ folder should link as follows e.g. <a href="/management/about/deans_message.html">dean's message</a>, rather than <a href="http://www.bath.ac.uk/management/about/deans_message.html">dean's message</a>
We no longer use title attributes in hyperlinks. The title attribute is 'title="...".
Relying on the
title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet). (source: http://www.w3.org/html/wg/drafts/html/master/dom.html#title)
h2: top of page
h5: where used?
<p class="firstOne"> is usually used throughout site for first para of page, displays larger opening text .
|<ul class="sideList">||Collapsible list right-hand side||http://www.bath.ac.uk/management/courses/undergraduate/bba/|
Make sure you include the jquery links after the meta tags:
*specify which heading you're using
Side box - right-hand side
If a header is used, use h4.
Twitter Cards make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a "card" added to the Tweet that’s visible to all of their followers.
The summary card is designed to give the reader a preview of the content before clicking through to your website.
I've added the Twitter Card code to this page: http://www.bath.ac.uk/management/news_events/news/2013/02-12-Jens-Roehrich-CIPS-fellow.html
When you tweet the link, it looks like this:
Flickr no longer allows to embed a slideshow of a set using iframe. This 3rd party tool does the trick though: http://flickrslidr.com/
Dreamweaver Emmet shortcuts
Adobe Dreaweaver shortcuts
then click TAB will create this:
<li><a href="">item 1</a></li>
<li><a href="">item 2</a></li>
<li><a href="">item 3</a></li>
<li><a href="">item 4</a></li>
<li><a href="">item 5</a></li>
The category Homepage Tab: The School refers to users who are on The School tab on the homepage and click on the links within that tab.
The category Homepage: The School Tab refers to users who are on the homepage and click on the The School tab.