Skip to main content Skip to navigation

Use your own HTML and CSS

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 webteam@warwick.ac.uk 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:

Add a Custom HTML component

To use your own HTML in the Components Editor, add a Custom HTML component:

  1. Browse to the page where you want to add your custom HTML content.

  2. Go to Edit > Edit centre content.

  3. Place the cursor where you want to insert the Custom HTML component.

  4. Go to Add special features > Custom HTML:

    The 'Add special features' menu, with the 'Custom HTML' option highlighted

  5. The HTML pop-up appears, where you can enter your custom HTML:

    The 'HTML' pop-up

  6. When you're finished entering your content, select Add HTML.

  7. Your content appears on the page with a dotted purple outline to indicate where the Custom HTML component is located:

    The Components Editor screen with a custom HTML component

    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.

  8. When you're finished editing your page, select Publish.

^Back to top

Edit a Custom HTML component

  1. Select the Custom HTML component whose content you want to edit.

  2. In the menu that appears at the top of the component, select Settings to reopen the HTML pop-up.

  3. Make the required changes, then select Update HTML.

  4. When you're happy with your page content, select Publish.

^Back to top

Make Custom HTML content visually editable

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.

  1. Create or edit a Custom HTML component, as above.

  2. 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:

    An editable block between two non-editable blocks in a Custom HTML component

    Any changes made to the content inside the editable block while visually editing will be immediately reflected in the HTML.

  3. 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.

  4. Once you're happy with your page content, select Publish.

^Back to top

The raw editor

You can directly edit the HTML of old visual editor pages using the raw editor. To access it:

  1. Browse to the page you want to edit.

  2. Go to Edit > More, then select the Current page tab.

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

    The 'Manage content' section of the SiteBuilder edit screen, with the Editor drop-down open and 'Raw editor' highlighted

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

^Back to top

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.

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.

^Back to top

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. The Hero block component in the Components Editor natively displays this way.
  • .flush-left, .flush-right, .flush-top and .flush-bottom remove the default margins from an element.

^Back to top

Add your own CSS in the Components Editor

  1. Browse to the page you want to apply your CSS to.

  2. Go to Edit > Edit centre content.
  3. At the top of the Components Editor, go to More page tools > Edit page head:

    The 'Edit page head' menu option

  4. The Edit head pop-up appears.

    The 'Edit head' pop-up, with some example CSS entered

    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> tags:

      <style>
        <!-- Your Custom CSS here -->
      </style>

^Back to top

Add your own CSS to visual editor pages

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>

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.

^Back to top

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.

^Back to top

Site-level CSS

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 webteam@warwick.ac.uk 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.

^Back to top

Related articles

Support

Email webteam@warwick.ac.uk
How to report a problem