Blogs

City University London Web Team

Theme Style Guide

This page describes how various page elements are displayed in the CityWP theme.

Links

Colour is not used as the only visual means to distinguish links. Users should be able to determine the purpose of each link should from the link text alone.

Images

Screenshot of computer room app

An image without a caption, floated left.

scelerisque tortor. Integer neque erat, pellentesque at fermentum eget, iaculis non metus. Suspendisse est erat, sodales quis suscipit non, tempor quis leo.

In euismod elit sed sapien semper sed imperdiet dui blandit. Suspendisse eget ante semper arcu laoreet vulputate. Aliquam quam dolor,

pretium vel scelerisque et, pharetra in quam. Morbi sodales hendrerit mauris ac mollis. Donec pharetra risus eget diam tempus eget tincidunt lorem molestie. Aliquam eget nunc nec leo pharetra accumsan eleifend a quam. Sed non erat vel velit scelerisque cursus eget eget eros. In et libero dolor.

New Header and Footer

Images without explicitly set heights and widths will dynamically resize along with with the responsive design

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

Unordered Lists

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Vivamus vel erat odio, sed scelerisque tortor
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit

Ordered Lists

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  2. Vivamus vel erat odio, sed scelerisque tortor
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Definition Lists

Coffee
– black hot drink
Milk
– white cold drink

Blockquote

Suspendisse eget ante semper arcu laoreet vulputate. Aliquam quam dolor, pretium vel scelerisque et, pharetra in quam. Morbi sodales hendrerit mauris ac mollis. Donec pharetra risus eget diam tempus eget tincidunt lorem molestie. Aliquam eget nunc nec leo pharetra accumsan eleifend a quam. Sed non erat vel velit scelerisque cursus eget eget eros. In et libero dolor.

Tables

Tables should only be used for tabular data

Table Header Table Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Embedded Media

Embedded media such as iframes for YouTube videos will dynamically resize with the responsive design if wrapped in a div with the class of “embed-container”. The html used to embed the video below is:

<div class="embed-container">
    <iframe src="http://www.youtube.com/embed/0px-Y1ZH4lY" frameborder="0" allowfullscreen></iframe>
</div>

You Tube Video

UI Elements

UI Elements such as accordions and tabs can be dropped into a page by applying some simple html.

Accordion

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel erat odio, sed scelerisque tortor. Integer neque erat, pellentesque at fermentum eget, iaculis non metus.

Header

Suspendisse est erat, sodales quis suscipit non, tempor quis leo. In euismod elit sed sapien semper sed imperdiet dui blandit. Suspendisse eget ante semper arcu laoreet vulputate. Aliquam quam dolor, pretium vel scelerisque et, pharetra in quam. Morbi sodales hendrerit mauris ac mollis. Donec pharetra risus eget diam tempus eget tincidunt lorem molestie. Aliquam eget nunc nec leo pharetra accumsan eleifend a quam. Sed non erat vel velit scelerisque cursus eget eget eros. In et libero dolor.

Example Code

<div class="accordion">
    <h3><a href="#accordion1">Section 1 Header</a></h3>
    <div id="accordion1">Section 1 panel content</div>
    <h3><a href="#accordion2">Section 2 Header</a></h3>
    <div id="accordion2">Section 2 panel content</div>
</div>

Tabs

Suspendisse est erat, sodales quis suscipit non, tempor quis leo. In euismod elit sed sapien semper sed imperdiet dui blandit. Suspendisse eget ante semper arcu laoreet vulputate. Aliquam quam dolor, pretium vel scelerisque et, pharetra in quam. Morbi sodales hendrerit mauris ac mollis. Donec pharetra risus eget diam tempus eget tincidunt lorem molestie. Aliquam eget nunc nec leo pharetra accumsan eleifend a quam. Sed non erat vel velit scelerisque cursus eget eget eros. In et libero dolor.
Suspendisse posuere tristique pellentesque. Proin euismod volutpat nunc, non ultricies ligula laoreet ut. Vivamus massa ligula, lobortis vitae congue ac, tempus at nisl. Nunc ipsum massa, adipiscing et tincidunt at, gravida malesuada est. Maecenas aliquam scelerisque nisi in rhoncus. Aenean nec tortor pharetra magna bibendum adipiscing quis at quam. Donec dui dolor, aliquam sit amet elemen

Example Code

<div class="tabs">
    <ul>
	<li><a href="#tab1">Tab 1 Heading</a></li>
	<li><a href="#tab2">Tab 2 Heading</a></li>
    </ul>
    <div id="tab1">
       Tab panel 1 content.
    </div>
    <div id="tab2">
        Tab panel 2 content.
    </div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *

Find us

City, University of London

Northampton Square

London EC1V 0HB

United Kingdom

Back to top

City, University of London is an independent member institution of the University of London. Established by Royal Charter in 1836, the University of London consists of 18 independent member institutions with outstanding global reputations and several prestigious central academic bodies and activities.

Skip to toolbar