¹û¶³´«Ã½

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 you can use in ID7.

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

Site-level CSS

Site-level style sheets are uploaded by the IDG 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.

Related articles

• HTML removed when publishing a page
• View page HTML