Cookies on our website
Big Blast Design
Take control of your business

Call us now on 01279 755155

Connect with me at Twitter (click here) Click here for my LinkedIn page Click here to join me at Google Plus
Home > Website CMS > Editing tools > Text formatting

Editing tools
Below is a copy of the tools available within the web builder. Click on each for the relevant help files:

Edit content boxesPublish or republishPage choicesHelp filesPreview pageSave page
Find and replaceCutCopyPastePaste from external sourceUndoRedoTable - insert or editInsert or edit an imageInsert or edit mediaInsert an emoticonAdd rule offAdd or edit a linkInternal page linkInsert or edit bookmarkInsert special charactersAdd a formAdd a text fieldAdd a text area (form)Add a buttonAdd a drop down list (form)Add a tick boxAdd radio buttonInsert content markerInsert roll over image
StylesFontSizeBoldItalicUnderlineMore font optionsFont colourHighlightAlign leftAlign centreAlign rightFully justifyMore paragraph optionsNumbering - ordered listBullet points - unordered listMore list optionsDecrease indentIncrease indentAdd or edit html snippetsAdd image galleries to pageAdd content box

Text formatting.

Text can be formatted in a number of standard ways. While most common formatting of text such as size, colour and font and heading colour and size should take place using CSS (Cascading Style Sheet), certain functionality is still needed, including the ability to put in headings, and is provided within our CMS.

We advise you use colour sparingly and do not use more than one font, as it starts to make a page look scruffy.

The following facilities are explained (click the button or scroll down the page to reach the topic).

StylesFontSizeBoldItalicUnderlineMore font optionsFont colourHighlight

Headings

Headings are reached using the following button

Styles

Once pressed, you get to a drop down menu.

Heading 1 (H1) to H6 etc.

Set a paragraph format for selected text or text of the current cursor position by clicking on the desired heading - H1-H6 and preformatted, normal and address. Under this button, you can also clear styles of highlighted or selected text.

TIP: Only use one H1 heading per page.

TIP: Use the CSS (Cascading Style Sheets) within your template to define the font colour, size and type for the headings you use overall on your website.

TIP: As with size settings , it is better to use H1-6 for headings as it allows global control of how the site looks at a later date, for example H1 can be formatted using CSS to a certain size, font and colour, and that will take effect site-wide for any headings used.

 



Font type

Font

Font type

Change font of selected text or text of the current cursor position - highlight the text and select the font or choose the font from the cursor position onwards. We would strongly advise this option is not used. You should set fonts within your template so that the extra formatting is not necessary on the page. This saves time, means you can change font universally across the site from one place and makes the user experience faster at the website.

 


 

Change text size

Size

Set font size for selected text or text of the current cursor position


 

Make text bold

BoldHighlight the text that you wish to be bold. Then click the symbol or user the short cut [ctrl]+[b].

Do a second time to remove bold.

This is some text and this is some text made bold.

Make text italic

 ItalicSet /unset italic style to selected text or to text of the current cursor position (unset if the text is italic and set otherwise).

Firstly highlight the text you wish to be italic and then press the 'italic' button. To remove this, press the italic button again.

This is some text and this is some text made italic.

 Underline text

UnderlineSet/unset underlined style to selected text or to text of the current cursor position (unset if the text is underlined and set otherwise).

This is some text. Using the underline it looks like this.

Superscript, subscript and strikethrough

To get to this option use the More font options button and select from the drop-down list:

Set / unset superscript style to selected text or to text of the current cursor position

This is some text. Using the superscript it looks like this.

Set / unset subscript style to selected text or to text of the current cursor position

This is some text. Using the subscript it looks like this.

Make selected text or to text of the current cursor position striked / unstriked through (unstrike if the text has been striked before and strike otherwise).

This is some text. Using the strikethrough it looks like this.

 

Change text colour

Font colourChange colour of selected text or text of the current cursor position

First select the text you wish to change the colour of, then select the text colour option (using the Font colour symbol above). The default is white but to change this, simply click on the colour of your choice from the pop up colour picker.

Colour Picker

TIP: You can type colours also - try it! Where there is an HTML colour equivalent this generally works. For instance, type gold in the box when selecting the text and see what happens!

Advanced tip: In addition, if you have a specific colour and know the hexadecimal code for it, it will also accept the code (most graphic / image editors show you this) and give you your exact colour. This can be important for the more advanced designer who has a specific colour requirement, specified by a graphic artist.



This is some text. Using the text colour picker and selecting blue, it looks like this.

 

Change text background colour

Change background colour for selected text or text of the current cursor position.

First select the text you wish to change the background colour of, then select the text colour option (using the symbol above). The default is white but to change this, simply click on the colour of your choice from the pop up colour picker.

Colour Picker

TIP: You can type colours also - try it! Where there is an HTML colour equivalent this generally works. For instance, type gold in the box when selecting the text and see what happens!



This is some text. Using a blue text background colour it looks like this.

 

Advanced tip: In addition, if you have a specific colour and know the hexadecimal code for it, it will also accept the code and give you your exact colour. This can be important for the more advanced designer who has a specific colour requirement, specified by a graphic artist.

 

 

 

 


Last update: 29.03.2017