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 Customisation > Custom HTML:

   

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

   

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:

   

   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 make it easier to select them.

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

Edit a Custom HTML component

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

2. In the component toolbar, 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.

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:

   

   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.

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. Select Customisation > Edit page head:

   

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

     <style>
       Your Custom CSS here
     </style>
             

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

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:

   

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.

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.

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.

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.

Related articles

• HTML removed when publishing a page
• View HTML in the Components Editor