Page tree
Skip to end of metadata
Go to start of metadata

Note: This is work in progress

News items

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.

Dates

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.

Code

   <div class="headingdateBox">  

       <div class="dateBox">

        <div class="dateBoxday ResearchBox">12</div>

        <div class="dateBoxmonth">Feb</div>

     </div><!-- /date box-->

 

   <h3 class="research">Seminar: Exploring Leadership Learning: Experiences of an MBA Elective in South Africa</h3>

   </div>

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.

Headlines

Use sentence case rather than title case:
University wins prestigious award not University Wins Prestigious Award

Time

Use am and pm in the 12 hour clock system:
6am
(note no gap)

Images

Front page image 

height: 960px

width: 275px

the images are stored here and they include guides for the images

X:\Management\Groups\School_Admin\Alumni_and_External\Website\graphics\source\frontpage

 

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  &nbsp<br />&nbsp

<!-- bannerItem -->
<div class="bannerItem" style="background-image: url(/management/images/graphics/frontpage/spotlight/felix-haffa-forbes.jpg);">
<div class="bannerTitleWrap">
<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 &nbsp<br />&nbsp on Forbes 30 Under 30 Europe List</h2>
</a>
</div>
<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>
</div>
<!-- /bannerItem -->

To remove the underline from any image that is a link

Code

<a href="../../faculty/bruce_rayton.html" border="0" class="noUnderLine">...</a> 



Images with dropshadow (used in Alumni section)

Code

<img src="/management/alumni/images/jonpeploe2.jpg" width="140" height="110" title="Jon Webb Peploe" alt="Jon Webb Peploe"  class="profilefloatLeft">

Icons

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.

Code

<img src="/management/images/graphics/externallink_alumni.gif" alt="external website" title="external website" width="9" border="0" height="9">

PDF and Word files

 

Code

<img src="/management/images/pdf.jpg" alt="pdf icon" width="16" height="16" border="0" />

<img src="/management/images/graphics/doc_icon.gif" border="0" width="20" height="12" alt="word document icon">

Phone, email and contact

Code

<img src="/management/images/graphics/bus_tel.jpg" width="9" height="12" alt="telephone icon" title="telephone" />

<img src="/management/images/graphics/bus_email.jpg" width="11" height="8" alt="email icon" title="email"/>

<img src="/management/images/graphics/bus_contact.jpg" width="11" height="13" alt="contact" title="contact" />

 

Faculty profiles

New faculty members please fill out the Faculty Profile Template Doc and send it to Research Office 

When updating a name or title in a faculty profile, don't forget to check/update the following pages:

Updating Faculty Profiles

New faculty members please fill out the Faculty Profile Template Doc and send it to Research Office 

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:

  1. Use the template named 01-new-academic-template.html.
  2. Remember to change the name at the very top of the document (code line 6) <title> About - Prof/Dr/Mr/Ms Firstname Lastname </title>.
  3. When you save, click save as and name the document firstname-lastname.
  4. Please refer to the AMJ style guide (link provided in template) for the format of publications.
  5. Any publications from 2008 or earlier need to be under 'older publications'.

Videos

Code

<iframe width="xx" height="xx" src="http://www.youtube.com/embed/S-fNu32F5JY?rel=0;3&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Use width="490" height="275" for the full width of the main frame (given that there's a box - infoLineout -on the side)

See DMC wiki page about embedding video in CMS: Embedding YouTube videos in the CMS

Pull quote

Use for in-page short quotes (about courses etc.) like the one here.

Code

<div class=”quoteLineout schoolSide”>

<div class=”quoteLineout undergradSide”> 

<div class="quoteLineout postgradSide">

Use <strong> for the name.

There's also a full page-width version for news articles:

<p>Rayner said:</p>

<div class="quotefullWidthStory">

<p>Achieving 100% completing on Grand Theft Auto V is probably my greatest achievement.</p>

</div>

Tables

<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

 <table width="100%" cellpadding="0" cellspacing="0" class="school EvenOdds" >

 

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

.EvenOdds tr:nth-child(even) {
background-color: #f9f9f9; /*#f5f5f5*/
}
.EvenOdds tr:nth-child(odd) {
background-color: #fff;/*#ebebeb*/
}

 

 

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>

Don't add title attributes to hyperlinks.

Title attribute

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)

Styles

h2: top of page

h5: where used?

<p class="firstOne"> is usually used throughout site for first para of page, displays larger opening text .

class="postgrad"

Class  
postgrad#AB0634
research#008DA8
undergrad#004990
mba

Font #39A3A8
(works better
with contrast)

original #73CBCF

but was too light
on white


pink mba colour
#D92967

 

OLD COLOUR

#652C87

left this up in case
searching for old
reference

exec

#2A5769

Pantone
3025

phd#8cc63f

 

Lists


CodeUsed whereExample
<ul class="standardList">Everywherehttp://www.bath.ac.uk/management/courses/undergraduate/bba/
   
<ul class="sideList">Collapsible list right-hand sidehttp://www.bath.ac.uk/management/courses/undergraduate/bba/

Collapsible lists

Make sure you include the jquery links after the meta tags:

 <script type="text/javascript" src="/management/scripts/jquery-1.4.2.min.js" charset="utf-8"></script>

 <script type="text/javascript" src="/management/scripts/generic-toggle-h3.js"></script>

*specify which heading you're using

<div class="demo-show2">
<h3 class="research cursorHand">Header&#8597;</h3>
<div>
...

</div>
</div>

Side box - right-hand side

Code

<div class="infoLineout">

           <p>Find out more about each of our postgraduate programmes</p>

            <ul class="sideList">

             <li><a href="../../phd/">PhD Degrees</a></li>

             <li><a href="/management/courses/">Other programmes</a></li>

            </ul>

           </div>

If a header is used, use h4.

Twitter cards

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

Code

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Dr Jens Roehrich becomes CIPS Fellow ">
<meta name="twitter:description" content="Dr Jens Roehrich, lecturer in Operations and Supply Management, has been appointed as one of the youngest CIPS (Chartered Institute of Purchasing and Supply) Fellows, at the age of just 33. ">
<meta name="twitter:creator" content="@BathSofM">
<meta name="twitter:image:src" content="http://www.bath.ac.uk/management/images/photographs/releases/2-12-13-Jens.fw.png">
<meta name="twitter:domain" content="http://www.bath.ac.uk/management">

When you tweet the link, it looks like this:

Flickr Slideshows

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

Quick coding
http://docs.emmet.io/cheat-sheet/

Github download
https://github.com/emmetio/dreamweaver

Adobe Dreaweaver shortcuts
https://helpx.adobe.com/content/dam/help/en/dreamweaver/pdf/dreamweaver-keyboard-shortcuts.pdf

Shorthand code

ul.navbar-nav>li*5>a{item $}

then click TAB will create this:

<ul class="navbar-nav">
<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>
</ul>

Google Analytics

Events

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.

 

 

  • No labels