These guides are specific to content in T4's legacy templates. If your content uses T4's responsive templates, please see our user guides for web publishers in SharePoint.
Last updated: 23/11/2015
Do
- contact the organisation to ask for permission to use the logo (you should get this in writing and keep it safe);
- ask the organisation to supply the logo image file.
Don’t
- copy or download logos from websites unless they are specific download files.
How to add logos for a group of partners
To show a consortium of partners, logos should be displayed at the bottom of the website's home page.
When the University of Bristol is a partner, add the University logo as the first logo (see steps below).
A group of logos should be formatted as a list. You won't want bullet points appearing next to each logo, so our styling removes these whilst retaining the logos within the list code (see example below).
1. Optimise the logo images
- keep logo dimensions small. They should be legible but shouldn’t be larger than the University logo
- maximum width of 140px (if landscape)
- maximum height 100px (if portrait)
- See our optimising images for the web instructions
2. Upload the images
Upload the images to your site’s images folder in the T4 Site Manager Media Library.
3. Add the logos to a new content block
- Create a new content block called 'multiple logos - content'. Make sure it sits below your main content block. This will ensure the logos fit to the width of the page rather than within a
column grid_8.
- Use the content block's WYSIWYG editor to add the first logo you want to appear using the ‘Insert Media’ button. In most cases this will be the University of Bristol logo and the Media Library location is: shared > logo > University of Bristol logo.
- Within the WYSIWYG editor, select the logo image. Whilst selected, ‘Insert’ a link to the external organisation.
- Start the bulleted list by selecting the logo again. Select the 'Unordered list' button. A bullet point will appear to the left of the image
- Click to the right of the logo and hit 'Enter' to create a second bullet point
- Repeat above steps until each logo has been added
- Select 'Edit HTML Source' and add
<div class="logo-multiple"> around the unordered list <ul>. Remember to close it with </div>, then add class="list-no-style" to the <ul>, as in the following example:
