Adding borders and colour blocks: Difference between revisions

From Lifeguide Wiki
Jump to navigation Jump to search
 
Line 18: Line 18:
Often colour blocks are used to distunguish menu or header bars from page content. They need to be accurately positioned and the correct size. To size and position colour blocks:
Often colour blocks are used to distunguish menu or header bars from page content. They need to be accurately positioned and the correct size. To size and position colour blocks:
#Click on the first block.
#Click on the first block.
#Under '''Style Properties''' Adjust the '''W''' width and '''H''' Height values. Lifeguide has a standard page width of 800px.
#Under '''Style Properties''' Adjust the '''W''' width and '''H''' Height values.
#:[[File:ResizeBlock1.png|600px|center|alt=Resizing a block]]
#:[[File:ResizeBlock1.png|600px|center|alt=Resizing a block]]
#Click on the second colour block
#Click on the second colour block

Latest revision as of 15:50, 14 March 2017

Adding a colour block

Colour Blocks in Lifeguide are made by colouring an empty text box. To make a colour block:

  1. First create a textbox on the page
  2. Under Style Properties uncheck Use global style
    Uncheck gloabl style
  3. Scroll down the menu until you can see Background, Border and Shadow. If you can't see it, click the minus - button next to textbox-1 Properties to minimise the text editting area.
  4. Check Use background colour
    Allow background colour
  5. Click on the box next to Background colour: to bring up the colour picker
  6. Select your colour from the colour picker by clicking on the 2 colour gradients.
    Lifeguide Toolbox colour picker
    Alternatively, you can use a HTML Color Picker to explore colours and copy the HEX code (e.g. FF0000 for red) into the Hex box in the Lifeguide colour picker. This will help you keep a consistent palette of colours for your intervention
  7. Scroll up to the top of the menu and delete edit me from the text box editor
    Delete colour block text

Resizing and positioning a colour block

Often colour blocks are used to distunguish menu or header bars from page content. They need to be accurately positioned and the correct size. To size and position colour blocks:

  1. Click on the first block.
  2. Under Style Properties Adjust the W width and H Height values.
    Resizing a block
  3. Click on the second colour block
  4. Adjust the Y and X values on the colour block by the using the H height of the previous block and the same X value as the previous block.
  5. Adjust the W width and H Height values of the colour block
    Repositioning a block
    By using Style Properties to position boxes you can space your content evenly throughout the page, making your intervention look more professional.

Adding a Border

You can add borders to textboxes with or without text:

  1. First create a textbox on the page
  2. Under Style Properties uncheck Use global style
  3. Scroll down the menu until you can see Background, Border and Shadow. If you can't see it, click the minus - button next to textbox-1 Properties to minimise the text editting area.
  4. Increase the border width by clicking the up arrow or typing 1px in the Border width text box.
    Adding a border
  5. Click on the box next to Border colour: to change the border colour.
  6. Select your colour from the colour picker by clicking on the 2 colour gradients, or use the HTML Color Picker
    Changing border colour
    Try to be consistent with colours throughout your intervention by copying and saving the Hex codes that you use.
  7. You can give the box rounded corners by changing Top Left TL, Top Right TR, Bottom Left BL and Bottom Right BR under Rounded Corners.
    These do not display correctly in all browsers or in Preview mode.
    Rounding the corners

Adding a Shadow

You can add shadows to boxes, but be aware that modern web styles uses them subtley or not at all. Big shadows may make your intervention look old-fashioned. To add a shadow:

  1. First create a textbox on the page
  2. Under Style Properties uncheck Use global style
  3. Scroll down the menu until you can see Background, Border and Shadow. If you can't see it, click the minus - button next to textbox-1 Properties to minimise the text editting area.
  4. Check Use drop shadow
  5. Here you can select the Shadow Colour, Blur size (how far the shadow spreads) and X and Y offsets (the placement of the shadow behind the box).
    Adding a shadow