ÌÇÐÄTV

Edit a site style

1. Browse to a page in the site whose style you want to edit.

2. Go to Edit > More:

   

3. On the Current site tab, select Edit site style:

   

   Note: Only users with admin permissions on a site can edit the site's style.

Brand compliance

• All ÌÇÐÄTV sites must follow the ID7 common website template guidelines.
• Requests to display logos, such as funding bodies or project partners, in the footer require approval from the Engagement Group's Head of Digital Product.
• Unique designs for sub-sites or the creation of a sub-site require approval from an administrator of the parent site.
• Hex codes for the ÌÇÐÄTV brand colour palette are on the brand portal.

Accessibility

Site designs must meet the of . Refer to the W3C's for techniques to meet the criteria.

User interface elements and icons

Use UI elements from . See examples on the .

For icons, use 5 Pro. SiteBuilder's Components Editor lets you add icons to your pages quickly and easily.

CSS/LESS

• ID7 you can use in site designs
• for equalising height and making images flush to edges

Graphic designer's QA checklist

1. The masthead background image is 1170 × 110 pixels and less than 100 KB.
2. There is sufficient contrast between the utility bar link text and the masthead background image.
3. The left- and right-hand border images are 375 × 1200 pixels. No white borders – there must be a distinction between the white centre content background and the border images.
4. The key elements are in the borders' essential image area (280 × 700 pixels).
5. Aim for a maximum total of 750 KB for the masthead and page border images.
6. The brand colour's lightness value is between 20% and 40% in the HSL colour space.
7. There is sufficient contrast between text and background colours.
8. Specify the colour for the navigation and footer. The navigation defaults to the site's brand colour; solid footers default to grey.
9. Specify the footer style: solid colour or line.

Implementer's QA checklist

1. All styles on the content – headings 1 to 6, links, box styles, and so on – are readable and have sufficient contrast.
2. The site design renders as intended in all supported browsers.
3. The site design renders as intended at all responsive breakpoints. The short and ultra short site descriptions display sensibly at all screen sizes.
4. The design prints sensibly – check the home page and a sample of sub-pages.
5. If you made any changes to the original design, has the graphic designer approved the final version?
6. Check the home page load time using :
   • Ensure that the page loads in less than 4 seconds
   • For important pages that target an international audience, test the page load time from several countries outside the UK
   • If the page load time exceeds 4 seconds, revisit the page content and site design
7. Ensure that the Google Analytics tracking ID is in the site properties before going live. When you copy a site, the tracking ID isn't copied in site properties.

Related articles

• University common website template
• Site designs
• Use your own HTML & CSS