Custom Text - HTML Editor

This is feature is not available for Core clients, you will not see this option in your menu. You also have the ability to create bespoke custom text homepages for groups of contractors. Go to bespoke contractor dashboards on how to assign homepages. 

Custom Text Screens

Above the menu you will see> Custom Text. You will be presented with a list of screens where custom text can be added, similar to the below.

Select the screen you want to edit. The new editor is a WYSIWYG (What You See Is What You Get) HTML editor.

A full user guide for the editor can be accessed by clicking the help icon  in the toolbar and following the link displayed.

You can preview your custom text at any point by clicking the Preview button. The current custom text will be displayed at the bottom of the screen.

Note: If custom text has been enabled on the worker dashboard you must have [summary] underneath the custom text to have the dashboard widgets displayed below the custom text. 


Including Images In Your Custom Text

To add an image to your custom text you will first need to upload it by clicking the green Upload Images button. This is available from the list screen and from within the edit screen.

NOTE: We recommend uploading all the images needed before editing your custom text. When you upload the image you have to click 'Save New Image' to upload further images and repeat this process until all images have been uploaded. 

Once you have uploaded your images, they will be displayed below the editor, with the appropriate URL needed when adding an image.

Click the Insert Image button on the editor toolbar to insert an image, then enter the url of the image you wish to insert and click OK.



Carousel

It is possible to add a carousel (also known as an image slider) to your custom text screens. To achieve this you will need to be comfortable editing html source code. You will also need to have some images uploaded to use within the carousel. From the editor toolbar click the Source button  and paste in the relevant html source. Example carousel source code is shown below:

<div data-carousel-delay="3000" data-carousel-height="200" data-carousel-width="1200" id="carousel">
    <div class="cover" style="font-family:gotham; font-size:15px;">
        <div class="carouselpanel">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <img border="0" height="200px" src="/uploadedImage/view/image1.png" width="900px" /></td>
                        <td style="padding:20px;">
                                                       
                            <p style="font-size:20px; padding-bottom:20px;">
                                1 Lorem Dolor Ipsum...</p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                                        </td>
                    </tr>
                </tbody>
            </table>
        </div>                
        <div class="carouselpanel">
            <table>
                <tbody>
                    <tr>
                        <td style="padding:20px;">
                            <p style="font-size:20px; padding-bottom:20px;">
                                2 Lorem Dolor Ipsum...</p>
                            <p>
                                Etiam tempor condimentum tristique.</p>
                        </td>
                        <td>
                            <img border="0" height="200px" src="/uploadedImage/view/image2.png" width="900px" /></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


Related Topics

Custom Text Screens