Modules from other page types
This section of the style guide details the reusable modules and HTML element styles used on the section index, events, and news page types. The modules are illustrated with screenshots at Desktop size. To find out further styling details about any of these modules you can right click on the relevant section of the page in Firefox, Safari or Chrome to 'inspect element'.
Section index page primary highlight
The section index page primary highlight is similar to the 'main image, header and breadcrumb' module, in that it may be a carousel if more than one image is added. Unlike this module, it sits below the page header and introduction. Images used here should have good contrast and saturation and be closely cropped on the subject area for better impact. Avoid the use of stock imagery and use photos of real people associated with the University where possible.
Screenshot of the section index page primary highlight module (with carousel)
The 'img' element (whether part of a carousel or a single item) is set to 100% width, with height 'auto' so that it maintains its proportions. The surrounding 'div' element with class '.field-name-field-section-primary' is set to position relative, which allows the linked text below to be absolutely positioned over the image. This div in turn is set within an 'a' tag linking to the promoted page.
The link text consists of an 'h2' element and a 'div' element with class '.field-name-field-intro', both wrapped in an 'a' tag with class 'field-group-group_link_wrapper'. The padding on the 'a' tag is set to 3% left and right, and 1.5em at the top. It is absolutely positioned with the bottom value set to '0'.
The 'h2' is set to display inline, and has a font-size of 3.125em (equates to 50px). It has a right-aligned background image to create the arrow which can be found here: http://www.ox.ac.uk/sites/default/themes/custom/oxweb/images/highlight-chevron.png. Its right padding is set to 0.6em in order to create space for the arrow. Its default colour is #333333 but when the surrounding div is hovered it changes to red (#C7302B).
The font size for the intro text below is set to 1.313em (equates to 21px).
Section index page section highlight
Screenshot of the section index page section highlight module
Section highlights are arranged in blocks of three across on the Section index content type. Each one is set to a width of 33.333333% (1/3 of the surrounding content), and is given a left and right padding of 1.4126224653333% to create left and right spacing.
The 'img' element is given a width of 100% and a height of 'auto' to maintain its aspect ratio. The heading below is an 'h2' element whose colour is set to #333333 by default. This changes to red (#C7302B) on hover. The font size of the 'h2' is 1.313em (equates to 21px), and its margin is set to 0.6em top and bottom, and 0.25em left and right.
The text below sits in a 'p' tag with a bottom margin of 1em.
Section index page two-column video highlight
Screenshot of the section index page two-column video highlight module
The video and text elements for this module are surrounding in a div with class of '.field-name-field-video' with position:relative. This allows for a number of elements within it to be absolutely positioned.
The play icon is added to 'before' pseudoclass on a div with class '.field-name-field-video'. The icon can be found at http://www.ox.ac.uk/sites/default/themes/custom/oxweb/images/play.png. It is set as a background-image with opacity 0.85 and a z-index of 10 so that it overlays the video placeholder image.
Within the '.field-name-field-video' div there 'div' element with a class of 'file-video'. This adds a gradient overlay using a 'before' pseudoclass. The overlay element has 100% width and height, and is absolutely positioned.
The video placeholder image is added using an inline style to allow it to be editorially controlled.
The heading and text bottom left are wrapped in a 'div' element with class 'group-meta-wrapper' which is absolutely positioned at the bottom left. The heading is an 'h2' element with font size 1.313em (equates to 21px). The paragraph text below has a bottom margin of 1em.
Section index page side highlight
This module sits to the left of the two-column video highlight, and spans the third column below the section highlights.
Screenshot of the section index page side highlight module
The surrounding div for this module has a width of 33.333333% and a left-padding of 2% to create the space alongside the video highlight.
Within this div it is styled the same as the 'Section index page section highlight' (see above for details).
Latest news listing
Screenshot of the latest news listing module
This module appears in the right hand column and as per other sidebar elements it has a padded #f3f1ee background.
Each news item is an 'li' element in an unordered list. Within the li is a link element which is set to display block, and given a 1px top border of colour #e0ded9. The padding on the link element is set to 1em top and bottom, and 0 left and right (left and right padding is already provided by the surrounding sidebar).
The 'img' element is a teaser image of size 90px x 90px, which is floated right within the link element. It has a left hand margin of 1em to create space between the image and the text.
The title of the news item sits directly within the link element. It is colour #333333 by default but changes to red (#be0f34) on hover.
The date text sits within a 'div' element with class 'field-type-date'. Its colour is set to #7a736e and the text-transform property is set to 'uppercase'. The font size is 0.813em (equates to 13px).
Tags
Screenshot of the tags module on a news article.
Tags are created as a series of link elements. Each link has a 'display' property of 'inline-block' so that they are aligned left to right. They have a 1px border of colour #f3f1ee, and padding of 0.375em (equates to 4.5px). The font-size is 0.75em, and the 'text-transform' property is set to 'uppercase'. They have a right-hand margin of 0.5em to create spacing between each item, and a bottom margin of 1em. By default the text is the usual link colour (#3277ae) but on hover it is reversed out, so the text becomes white with a blue background.
Event page event details
The event details sit below the title on the Event content type.
Screenshot of the event details module.
The event details are grouped within a 'div' element with class 'group-event-meta'. This div has a top and bottom 1px border with colour #e0ded9. Its padding is set to 2em top and bottom, and it has a right margin of 18% and a bottom margin of 2em. The font size is set to 1.125em (equates to 18px).
Each piece of information about the event consists of a 'label' element (for example 'Venue') and corresponding text. The label is floated left and given a width 33.33333%. The 'font-weight' property of the label is set to bold. The corresponding text is floated left alongside the label.
Event listing filtering
Screenshot of the event listing filters module.
The filtering options for the events listing are set within a padded 'form' element with a background colour of #043946. It has a negative left margin of -3.178400547% - this ensures it overflows the surrounding 'main-content' div element and sits flush with the left hand edge of the page. A bottom margin of 1.5em creates space above the listing items below.
Within the form each form field and label sit within a 'div' element which is floated left and given a top and right hand padding of 0.5em and 1em respectively.
The form fields and their labels are styled as per the form elements elsewhere on the site, with the exception that the label is white.
The RSS icon is created by a 32px x 32px right floated div, with a background image of http://www.ox.ac.uk/sites/default/themes/custom/oxweb/images/icon_rss-corner.png.
Event listing summary
Screenshot of the event listing summary module.
Each event in the listing is contained in a 'div' element with a 1px bottom-border of colour #e0ded9. Spacing is created with a bottom margin of 1em and bottom padding of 1em.
The blue date on the left has a background colour of #002147, and is floated left. The text colour is set to white, and it has top and bottom padding of 0.25em, and left and right padding of 0.5em. The calendar date and month are set within individual 'span' elements which are set to display block so that they sit one above the other. The calendar date has font size 1.313em (equates to 21px) and the month has font size 0.813em (equates to 29px).
The event title sits with an 'h2' element with font size 1.125em (equates to 18px), colour #333333 and bold text. The extra information below has font-size 0.813em (equates to 29px), colour #7a736e and the 'text-transform' property is set to 'uppercase'.