• Recipe Link

This guide describes the HTML block that can be added to the right-hand column of a Moodle space or to the centre and right-hand column on the dashboard. Examples are used to illustrate the ways HTML blocks are used at Warwick.

The HTML block is a versatile block as it is has a content section with the same editing toolbar as most resources. This means that you can use HTML to create custom menus, embed media files as well as Twitter or other social media feeds. Importantly, you can add multiple HTML blocks to a single Moodle space.

Adding an HTML block

Follow the instructions in the Add a block guide to add the HTML block.

Editing an HTML block

1. Click on the Actions menu on the right-hand side of the HTML block.
2. Select Configure (new HTML block) block.
3. Give the block a name using the Block title field.
4. Click on </> to switch to the HTML view in order to add HTML code.

Using an HTML block

Any valid HTML code can be added to the HTML block. However, please note:

You can use:

• inline CSS
• font awesome icons (4.70, currently)
• bootstrap markup

You cannot use:

• an external CSS file
• Javascript

Create a resources or links menu

One of the more effective uses for the HTML block is in providing a module/department wide navigation menu, particularly for links to external (SiteBuilder and elsewhere) pages.

As you can use any standard HTML, including Bootstrap, it is possible to create horizontal menus using tabs or pills, with panes, and even collapsible accordions to create more complex versions.

We have provided an example in our reusable HTML snippets which you can read more about in the Add a course header and other visual elements guide.

Adding a Twitter feed

Display the latest tweets from any Twitter account:

1. Log in to Twitter
2. Follow the instructions to create a timeline widget using https://publish.twitter.com/
3. Add and configure a new HTML block to your Moodle space (as above).
4. Click on </> to switch to the HTML view in order to add HTML code.
5. Copy and paste the code provided by Twitter into the HTML source.
6. Click Save changes.

The new block will appear in the right-hand column.

For more information on this, please contact moodle at warwick dot ac dot uk.

---

More information on HTML Blocks is available in this Moodle Article.