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
- Browse to the page you wish to edit.
- Go to Edit > More, then select the Current page tab.
-
In the Manage content box, expand the drop-down list and choose Raw editor:
- 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.