Style Guide

The Style Guide is here to help you keep your website in keeping with the Milk & Honey brand. It is not a subsitute for training or intended to be a full reference.

For further instructions please see the Quick Start Guide and the Help Manual.

Adding Text

This is a paragraph. It starts with a and ends with a in the source code. By pressing enter in your web browser will create a new paragraph.

Make sure that there are no line breaks. That is to say in the source code there should be no symbols.

Occasionally you may see   or you may see  . These want deleting and can be done usually by pressing the backspace or deleting in the source code.

Adding Headings

Make sure all headings and subheadings are in Title Case not Capitals.

This is a Main Heading (h2 heading)

This is a Sub-heading (h3 heading)

This is a Sub-sub-heading (h4 heading)

Adding Links

Make the linking text understandable on its own. E.g. You can search for information here. Not click here to search for information.

Go to the web page you want to link to and copy the web address (URL) e.g. www.google.co.uk
Highlight the text you want to be a clickable link with the mouse
Click the icon that looks like a chain. A dialog box will open, input the URL that you want your link to go to, then click OK

For email links, choose Email instead of URL as the Link Type in the drop down box.

Adding Images

Images need to be resized in a graphics package first. Max width for images is 576px. Images can either be aligned left or right.

Put the cursor where you want to place the image.
Click on Insert/Edit image icon. This will take you to the Image Properties sreen.
Click on 'Browse Server’ this will open the Resources Browser.
Select ‘Image folder' as the Resource Type.
Click the Browse button.
Locate the file on your computer then click Open. This takes you back to Resources Browser.
Click Upload.
Select the image you want to use (you’ll go back to the ‘Image Properties’ screen)
Add brief Alternative Text to describe the image in context. Alternative text is required by users with accessibility requirements or people using text-only browsers.
Click the Advanced Tab. To align the image left add 'imageleft' in the Stylesheet Classes field. To align the image right add 'imageright'.
Click OK.

Example images

The images below are 240px wide.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non ante. Suspendisse potenti. Vivamus neque enim, dignissim eu, molestie vel, convallis sed, est. Aliquam augue. Nam non metus. Quisque congue consequat nisl. Proin ullamcorper. Phasellus posuere. Donec non nisi sed nisi gravida sagittis. Vivamus sagittis feugiat justo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non ante. Suspendisse potenti. Vivamus neque enim, dignissim eu, molestie vel, convallis sed, est. Aliquam augue. Nam non metus. Quisque congue consequat nisl. Proin ullamcorper. Phasellus posuere. Donec non nisi sed nisi gravida sagittis. Vivamus sagittis feugiat justo.

Adding PDF, Word and other Documents

In your text add the file type and size in brackets after the name of the document e.g. (PDF 147K)
Highlight the name of the document or text you want to be a clickable link with the mouse.
Click the icon that looks like a chain. A dialog box will open.
Click on 'Browse Server’ this will open the Resources Browser.
Select ‘File folder' as the Resource Type.
Click the Browse button.
Locate the file on your computer then click Open. This takes you back to Resources Browser.
Click Upload.
Select the file you want to link to (you’ll go back to the ‘Link’ screen)
Click Target tab and choose New Window (_blank) from the Target drop down menu. This step is optional but is recommended for documents.
Click OK

E.g. This is a test document (text doc, 1k)

Adding Lists

Numbered (orderded) lists and Bulleted (unorderded) lists can be used.

Numbered List

To add a numbered list select the Insert/Remove numbered list icon.

This is point 1
This is point 2
This is point 3

Bulleted List

To add a bulleted list select the Insert/Remove bulleted list icon.

This is point 1
This is point 2
This is point 3

Adding Style

Bold

To apply bold, click on the Source icon and add strong tags around the word(s) you want to make bold. E.g. this is bold This is bold.

Blockquote

The blockquote tag defines the start of a long quotation. For example:

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non ante. Suspendisse potenti. Vivamus neque enim, dignissim eu, molestie vel, convallis sed, est. Aliquam augue. Nam non metus. Quisque congue consequat nisl. Proin ullamcorper. Phasellus posuere. Donec non nisi sed nisi gravida sagittis. Vivamus sagittis feugiat justo."

Click on the Source icon and add blockquote tags around the text you want to quote. <blockquote>"This is in blockquotes."</blockquote>

"This is in blockquotes."

Do not use blockquote tags just to make text Italicalised!

Adding Departments

Select shop builder then click on add department

Add a department title. e.g. Gadgets

Select a layout

layout.htm (use on all pages except home page)
layout_home.htm (only used for home page)

Select a template

department.htm (used in majority of cases)

Click Add Department button.

Adding Products

In the Shop Builder, select the desired department in which to add your product by clicking on the department’s title. Click on the Add New Product to access the Product Builder page.

Product title refers to the name of the product.
A unique Product code is needed for each product.
A Price is required.

Select a layout Same as for departments, see above.

Select a template

product.htm Used in majority of cases
productpackage.htm Used for product packages.

There are 3 image options available for each product:

Image a (small) 140 x 140 – shown next to the short item description
Image b (medium) 220 x 220 - shown next to the full item description
Image c (large) 350 x 350 – this is optional, used as large image or detail view

Make sure images have been optimised and saved in the correct format for the web. This is usually a jpg file for photos. It is best to resize images first in a suitable graphics package.

Short description – This is where you put in a short description of the product. The description will be shown alongside the thumbnail image (‘image a’).

Long description – This is where you put in a full description of the product using the text editor. The description will be shown alongside the ‘image b’.

Use the On/Off button to set whether or not the unit will be visible and live on the website.

Make sure the Add to Basket is checked. If left unchecked then the button will change to Enquire, allowing visitors to submit a form enquirng about a product instead of been able to purchase it.

Click Add Product to upload to the website.

Validation

After adding/editing a page please validate it by going to http://validator.w3.org/ and pasting the web address of the page to validate in to the Validate by URI page.

For example the address of this page is www.milkandhoneykids.co.uk/department/style_guide/. You can only validate once the website is live.

Milk & Honey

Departments

My Tools

Top Nav