This article covers the process of adding HTML and CSS to a page in SiteBuilder.
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 email@example.com and we'll upload it on your behalf.
When adding custom HTML or styling to a page, keep in mind the guidance on making accessible web pages.
In this article:
To use your own HTML in the Components Editor, add a Custom HTML component:
Browse to the page where you want to add your custom HTML content.
Go to Edit > Edit centre content.
Place the cursor where you want to insert the Custom HTML component.
Go to Add special features > Custom HTML:
The HTML pop-up appears, where you can enter your custom HTML:
When you're finished entering your content, select Add HTML.
Your content appears on the page with a dotted purple outline to indicate where the Custom HTML component is located:
Note: Custom HTML components without any content are not visible when the page is published, but retain their dotted line border in the editor to indicate their position and enable you to select them.
When you're finished editing your page, select Publish.
Select the Custom HTML component whose content you want to edit.
In the menu that appears at the top of the component, select Settings to reopen the HTML pop-up.
Make the required changes, then select Update HTML.
When you're happy with your page content, select Publish.
When creating a Custom HTML component, you can choose to make some parts of the text alterable without requiring users to edit the HTML directly.
Create or edit a Custom HTML component, as above.
In the HTML pop-up, add
<editable-block>tags. Any content between these tags will be visually editable once you select Add HTML (or Edit HTML, if you're adding an editable section to an existing Custom HTML component).
For example, entering the following code:
<p>The first paragraph is not visually editable, and must be changed by editing the HTML.</p> <editable-block> <p>The second paragraph is visually editable. Any content here can be changed or formatted from within the Components Editor.</p> </editable-block> <p>The third paragraph cannot be visually edited.</p>
Produces the following in the Components Editor:
Any changes made to the content inside the editable block while visually editing will be immediately reflected in the HTML.
When making future changes to the page, editors will not have to manually edit the HTML to change the content of these editable blocks, but can make changes as they normally do in the Components Editor.
Tip: It's also possible to edit the Custom HTML component as before if you want to apply more advanced formatting to content that was entered into an
<editable-block>via visual editing.
- Once you're happy with your page content, select Publish.
You can directly edit the HTML of old visual editor pages using the raw editor. To access it:
Browse to the page you want to edit.
Go to Edit > More, then select the Current page tab.
In the Manage content section, expand the drop-down list and choose Raw editor:
Select Edit centre content or Edit right content, as appropriate.
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.
The Components Editor enables you to create your own layouts by arranging components on the page. Alternatively, you can copy one of our ready-made page layouts, then customise it as required in the Components Editor.
The ID7 common website template has various classes you can use in your markup. For example:
.full-widthmakes 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. The Hero block component in the Components Editor natively displays this way.
.flush-bottomremove the default margins from an element.
Browse to the page you want to apply your CSS to.
- Go to Edit > Edit centre content.
At the top of the Components Editor, go to More page tools > Edit page head:
The Edit head pop-up appears.
There are two ways to add CSS:
Upload your custom .css file to the Files tab, then include it in the page head as follows:
<link href="./custom-style.css" rel="stylesheet" type="text/css">
This is the method we recommend for adding custom styles, as it enables you to simultaneously update all pages using the same CSS file by uploading a new version.
Alternatively, you can enter your custom CSS code directly into the page head by putting it between
<style> <!-- Your Custom CSS here --> </style>
You can add styles to a page's
<style> element using the raw editor:
<!-- Add your CSS here -->
<!-- Add your page content here -->
Alternatively, upload a style sheet to the Files tab and reference it with the
<link href="style.css" rel="stylesheet">
<!-- Add your page content here -->
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 style sheets are uploaded by the IDG. To add your own custom styles for the whole of your site, send the .css file to firstname.lastname@example.org and we'll upload it on your behalf.
Note: We do 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.
Error: Access denied for the source page. from 8a1785d884ab003d0184c9158b583945