Text / HTML Module Documentation

Introduction

Group Package 1 websites contain a mix of default verbiage and imagery, with your group's details. This is managed for you by Scouts Online. There is no ability change the settings.

If you'd like to upgrade to a higher package level, please contact us.

The Text/HTML module is a flexible tool to add text, images, tables and more to site pages.

The rich text editor provides UK Scouting font styling to keep you on-brand. The text on your website pages can be personalised for your specific requirements.

Use Cases

The following panels show specific tasks. Click on a panel to see the procedures.

Change Text / HTML

Personalise the default Scouts Online text to your requirements.

You may personalise the text and HTML (scripting language used on web pages) within any HTML/Text module on your websites.

To edit a module, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Tick Hide Bottom Margin if you want your text to appear above another module, without a spacer. This is useful for a title above another module.
Set the Animation Fields as required
Amend the text
Use the editor tools to format your text as required
NB. If you have an understanding on HTML, you may find it easier to click the Source button and edit the raw HTML
Click to keep your changes or to abandon your changes

NB. If you make a mistake, you may reverse the change in the Admin/Admin Audit Trail

Editor Tools

When using the editor tools, highlight the text you want to format and click oe of the buttons below:

Set the background colour of the selected text

Set the text to bold

Change the font to italic

Underline text

Strikethrough text

Remove the formatting of the selected text

Cut text

Copy text

Past the cut/copied text

Add numbered bullet point

Add bullet points

Justify text to the left

Justify text to the centre

Justify text to the right

Justify text across the page

Change the view, to see the raw HTML

Set the styling of text to a predefined format

Add an image

Add a table

Add a hyperlink to the selected text

Remove the hyperlink

Undo a change

Redo a change that has been undone

Fig. 2: Edited Text/HTML module

Edit Raw HTML

Administrators with an understanding of HTML may want to edit the raw HTML.

Administrators with an understanding of HTML may want to edit the raw HTML.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here)
OR add a module to your own pages, using the Page Designer
Click the Source button
Edit the raw HTML. See Fig. 2
To revert back to the standard view, click the Source button again
Click to keep your changes or to abandon your changes

NB. If you make a mistake, you may reverse the change in the Admin/Admin Audit Trail

Fig. 1: Source button

Fig. 2: Raw HTML

Bootstrap 4

Use Bootstrap 4 text/HTML formatting on your text/HTML.

Scouts Online websites use the Bootstrap 4 framework to format text/HTML for different device screen sizes.

You can find out more about Bootstrap 4 here.

To do use Boostrap 4 on your pages, edit the raw HTML of using these steps here.

HTML Snippet: Displaying text in Columns

Each 'row' is divided into 12 columns. You can decide how many 12ths your column should be, depending on the browsers screen width (sm=Small, md=Medium, lg=Large, xl=Extra-large).

The first example below shows 12/12ths wide for very small screens and 6/12ths wide for small screens. Resize your browser to see how this works.

Column 1

Column 2

This example shows 12/12ths wide for very small screens, 6/12ths wide for small screens and 3/12ths wide for large screen sizes.

Column 1

Column 2

Column 3

Column 4

This example shows 12/12ths wide for very small screens, 4/12ths wide for small screens, 3/12ths for medium and 2/12ths for large.

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

HTML Snippets

Here is a collection of useful HTML snippets for your website.

Here is a collection of useful HTML snippets for your website.

Click the Copy to Clipboard button below the HTML snippets below and paste into a Text/HTML module on your Scouts Online website.

NB. The fonts and formatting may vary from what you see on this page, as your website uses a different styling set.

Home Page Safeguarding Block

You could add this to a Text/HTML module towards that bottom of your home page.

Young people first: safeguarding and safety in Scouting

Wherever we go and whatever we do, we put young people’s safety and wellbeing first. Here's how.

Questions? Give us a call on 0345 300 1818.

Safeguarding concerns? Contact our team directly at safeguarding@scouts.org.uk

Give As You Live Link Button

If you have a Give as You Live campaign, use this HTML and change the YOUR_CAMPAIGN_ID to your campaign number.

Google Calendar iFrame

Use this HTML to show a Google calendar on a page. Change the GOOGLE_CALENDAR_EMAIL_ADDRESS to your calendar ID and the Height to 600.

Scouts Online Facebook Page

Scouts Online YouTube Channel

Text / HTML Module Documentation

Introduction

Editor Tools

Young people first: safeguarding and safety in Scouting

Follow Us

Scouts Online