Skip to main content Skip to navigation

IT Services

Use your own HTML and CSS

You can add HTML and CSS to SiteBuilder pages using the raw editor. For CSS, you can add styles directly to a page's <style> element or reference .css files uploaded to the Files tab.

Site-level style sheets are added by the ITS Web Team. To add your own custom styles for the whole of your site, send the .css file to webteam at warwick dot ac dot uk and we'll upload it on your behalf.

In this article:

Raw editor

  1. Browse to the page you wish to edit.
  2. Go to Edit > More, then select the Current page tab.

  3. In the Manage content box, expand the drop-down list and choose Raw editor:

    Select raw editor

  4. Select Edit centre content or Edit right content, as appropriate.

Bootstrap

The Bootstrap framework (v3.3.7) is included in the ID7 common website template. You can use Bootstrap's grid system and user interface elements to design your own pages – see our test card for examples.

We have ready-made layouts you can use on your site, say for a home or landing page, based on Bootstrap. To request a page layout, submit the page layout request form.

ID7 template classes

The ID7 common website template has various classes you can use in your markup. For example:

  • .full-width makes an element flush to its container's left and right edges. You could use this to style a hero image that's 1,170px wide and spans the entire page width.
  • .flush-left, .flush-right, .flush-top and .flush-bottom remove the default margins from an element.

Add your own CSS

You can add styles to a page's <style> element using the raw editor:

<html>
  <head>
    <style>
      <!-- Add your CSS here -->
    </style>
  </head>
  <body>
    <!-- Add your page content here -->
  </body>
</html>

Alternatively, upload a style sheet to the Files tab and reference it with the <link> element:

<html>
  <head>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <!-- Add your page content here -->
  </body>
</html>

LESS and CSS

When you upload a .less file to the Files tab, SiteBuilder automatically compiles it to a .css file. See the list of LESS variables you can use in ID7.

For more information about writing style sheets with LESS, visit lesscss.org.

Site-level CSS

Site-level style sheets are uploaded by the ITS Web Team. To add your own custom styles for the whole of your site, send the .css file to webteam at warwick dot ac dot uk and we'll upload it on your behalf.

Note: the IT Services Web Team does not support the maintenance or fixing of custom style sheets written by departments. We upload style sheets to your site on request. You are responsible for maintaining those style sheets in the future – for example, should they need updating in line with changes to the University's common website template.

Related articles

HTML removed when publishing a page

Support

Email webteam at warwick dot ac dot uk
How to report a problem