Banners for Home-Start

(Updated 27/07/2015)

Please note that due to the rich text in the examples below the code is not usable by copying from this view and pasting into the Text view on your site as shown. Instead download this Text File and copy the code from there, this should work: boxes code  (Click on the link to get the file). 

There are three blocks of code on this page that are used to create the orange bordered images. You need to copy the “CODE” to use them in a page. You may copy the code from this page using the normal editor in VISUAL mode. However when you paste the code into the destination page, you need to paste it into the TEXT view of the page. If you do not do that, it will not work.

(Warning, whether this works or not on your site is dependent on which template your site is based on. Some templates such as the one used on this site will suppress this code if it is added to a Post. So do spend some time experimenting, it is more likely to work in a page if it does not work in a post). 

Steps:

1). Identify which style of box you want to use. Copy the text BELOW the box from <div> to … </div>

2). Go to the page where you want the box to appear. View the page in VISUAL view and put something you can easily locate on the page. Press Return/ Enter to start a new paragraph and enter some text such as XXXXXXXXX

3). Switch from VISUAL view to TEXT view. Locate the XXXXXXXX you entered and highlight it.

4). Paste the code into the page so that it over writes the XXXXXXXX.

5). Switch to VISUAL View

6). Edit the text in the box. Take care not to edit too much text otherwise you may remove the formatting. If you delete something by accident then delete the whole box or remnants of the code and start again.

Note that the box will expand to accomodate the text. The widths are fixed.

Full Width Box

Title for a full width box

Text area for a full width box…. We are recruiting a Data Assistant. See this item for more details

 

(The code for this box is in the downloadable file at the top of this article).


 

Half Width Box – Left

Title for a half width box

This box sits on the left of a page, text should wrap around it.

 

 

 

 

(The code for this box is in the downloadable file at the top of this article).


 

Half Width Box – Right

Text for a half width box

This box sits on the right of a page, text should wrap around it.

 

 

 

 

(The code for this box is in the downloadable file at the top of this article).


 

ADVANCED

If you are feeling brave you can change the colour for the border and the background.

The border is defined as a hexadecimal value in this part of the code:

border: 3px solid #e05206;  In this case #e05206

Home-Start Colours (2007) are as follows:

  • ORANGE #e05206
  • GOLD #efab00
  • LIME #bdd600
  • PURPLE #4f2e7f
  • RASPBERRY #a21a7e
  • RED #d52b1e
  • PINK #e36eb2
  • SKY BLUE #3db8e4

Background Colour

The background colour is defined here:

background-color: #fbfbd8   where #fbfbd8 represents the colour as a hexadecimal value.

You could experiment with different coloured backgrounds. Here are three:

  • White #FFFFFF
  • Very pale Grey #EEEEEE
  • Slightly darker Grey #DDDDDD
  • Often a warmer colour is better. Currently the default is #fbfbd8
  • You can make that slightly darker cream colour #fafaaa

 

 

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail