ADDING A SECTION

The screen shot to the left highlights the add section

panel.

There are two options, the position and type of

section you wish to add.

Once you have made your selection press the add

button. The section will then appear.

SECTION CONTROLS

Each section has a set of controls, as shown below.

ENTERING A SECTION REFERENCE

To enter a section reference type in the input box highlighted below. Once you have finished typing press the Save button (this

will appear when you start typing).

EDIT

Press the edit button to change the contents of the section. Detailed instructions for editing each section type is later sections of

this user guide.

The screen shot below illustrates a text only section following the edit button being pressed.

PREVIEW

This will show a preview of how the section will look when applied to your website.

The screen shot below illustrates a text only section following the preview button being pressed.

HIDE/SHOW

The hide/show button, when pressed will toggle the visibility of the section on your website.

A Visible Section

When a section is visible, the section controls will have a solid black border, as shown above. To hide the section press the

“Hide” button.

A Hidden Section

When a section is hidden, the section controls will have a dotted grey border, as shown above. To un-hide the section press the

“Show” button.

ABOUT

This will provide some useful information about the section.

REVERT

Reverting a section will restore it to the last point at which the “Apply Changes” button was pressed.

The “Apply Changes” button applies all section amendments to the live website.

DELETE

This will permanently delete a section.

MOVE SECTION

To move a section up or down press the associated arrow button on the right of the section controls.

CREATING A TEXT ONLY SECTION

In the add section panel choose “1. Text

Only” followed by the add button.

The text only section will then appear in edit

mode as shown on the right.

To edit the content, simply start typing in the

area shown. Use the tools within the editor

to make changes to your text.

When you have added your content, press

the save button. To preview your changes

press the preview button.

For a detailed guide on using the editor, see

Appendix A

CREATING A TEXT AND IMAGE SECTION

In the add section panel choose “2.

Text with Image” followed by the add

button.

The section will appear in the desired

location and open in edit mode, as

shown in the image on the right.

CHOOSING AN IMAGE

Explain>>>

IMAGE PREFERENCES

Image Press the [choose] link to choose an image to display. This will launch the file manager tool which will

allow you to choose from your existing image bank or upload new ones. The file manager is

explained in depth in Appendix B. To clear your image selection press the [clear] button.

Image Resize There are three resize options, as illustrated below:

No Resize The original dimensions of the image will be used.

Proportional A proportional resize will recreate the image based on the width you

specify.

The image height will be automatically calculated based on the width you

specify keeping the image proportions in-tact (aspect ratio).

Original image, 258 x 184 pixels.

Resized image. Width set to 193px

and height automatically

calculated as 136px to keep the

aspect ratio of the image (not

stretched).

Zoom & Crop This will crop the image to best fit the dimensions you specify, whilst zooming in if necessary to best fit the space allocated. You are required to set the width and height for the cropped image.

Original image, 258 x 184 pixels.

Resized image. Width and height

set to 100px. The image has been

cropped along the x axis (width)

and then been resized to fit the

dimensions specified.

When Image Clicked You have the option to choose an action to perform when the image is clicked on.

Do Nothing Nothing will happen if the image is clicked on.

Show Thumbnail Image at Full

Size

The image chosen will be shown at its full size above the

thumbnail image.

Show Another Image Same as above, but you can choose an alternative image.

Go to URL When the image is clicked on the user will be redirected to

another web page. You can paste a URL or choose from a list of

pages from your website by pressing [Choose from List].

There is also the option to link to an external website (such as

www.google.co.uk). When pasting a URL make sure you

include http:// at the start.

You can also specify if you wish to open a new browser window

to load the content in. This is specified by selecting “New

Window” from the Open URL In field. This would normally

occur if you are linking to an external web page so that your

website remains active behind the new window.

Download Document Choose a document to download when the image is clicked on.

When Mouse Over

Image

When the mouse is placed over the image you have two options, as shown below.

Do Nothing Nothing will happen when the mouse passes over the

image.

Fade to Another Image Use this feature to show an alternative image when the

mouse passes over.

Press the [Choose] link to select an image to display. Use

the “Fade Time” to choose the fade speed.

Mouse Over Text This should be set to help a visually impaired reader who is using a screen reader. They will hear this

alternative text in place of the image.

IMAGE BORDER

If you wish, you can add a border to your image.

This is illustrated in the example where the image has a 4 pixels wide black border.

Border Width (Pixels) Set the width of the image border in pixels, as shown below:

If you select that you wish to have a border further options will appear, as illustrated below.

Border Colour Clicking on this will launch the colour chooser where you can pick from a

set of predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as

shown above. When you manually enter a colour code, press the Return

button on your keyboard once complete.

Border Type There are several border types to choose from, as illustrated below.

IMAGE CAPTION

If you wish, you can add a caption to your image.

This is illustrated in the example where the image has a caption with white text

and a black background.

Show Caption

If you select that you wish to have a caption further options will appear, as shown below:

Background Colour This will change the background colour of the caption.

Clicking on this will launch the colour chooser where you can pick from a set of

predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as shown

above. When you manually enter a colour code, press the Return button on

your keyboard once complete.

Text Colour This works the same way as setting the background and will change the colour

of the caption text.

Text Size This will change the size of the caption font. If you are not sure what to enter

here try 12 pixels.

Text Alignment The alignment of the caption text.

Image Caption The caption to use for the image

SUPPORTING TEXT

<< Explaination >>

SECTION HEADING TEXT

If you wish, you can enter a heading for

the section.

The heading will sit above the image

and text for the section, as illustrated.

Heading The heading text

Heading Size This will determine the size of the heading text.

EDIT SUPPORTING TEXT

The supporting text can be

aligned alongside, above or

below the image, but is not

mandatory.

Show Supporting

Text

Choose if you wish to show supporting text.

If you select no, an additional option will appear as illustrated below allowing you to choose the

alignment of your image.

If you select that you wish to have supporting text further options will appear, as shown below:

Text Position Set the text position in relation to the image.

If you choose set the text position to above or below the image an

additional option will appear as illustrated below allowing you to

choose the alignment of your image.

Text Wrapping This is only available if your text is aligned to the left or right of the

image.

If set to yes, when the text exceeds the height of the image, it will wrap

below the image.

When set to no, the text will be displayed alongside the image without

wrapping, as shown below

Padding (Pixels) The padding is the space between the text and the image.

Padding set to 0 pixels. The text

sits flush with the image.

Padding set to 10 pixels leaving

space between the text and the

image.

Supporting Text The text for the section.

CREATING A YOUTUBE SECTION

In the add section panel choose “4.

YouTube Video” followed by the add

button.

The section will appear in the desired

location.

CHOOSING A YOUTUBE VIDEO

Go to www.youtube.com and find the video you wish to embed on your website. If you need to upload your own video(s), first

create an account on the YouTube website and follow the instruction provided.

When you have located the video you wish to

display, press the embed button as illustrated

in the image on the right.

CUSTOMISING THE EMBED CODE

The YouTube embed window allows

you to customise your video settings

and provides embed code required

by the Mistore platform to display

your video.

Once you have customised your

video settings, simply copy the

embed code as highlighted.

Please note: DO NOT choose “Use

iframe embed code (beta)” when

changing the settings.

Copy the embed code from YouTube. Paste the copied code into the Mistore administration area and

press the “Next” button.

EDIT VIDEO SETTINGS

Video Size Choose the video display size.

If you wish to set custom dimensions choose “Custom” from the list. You will then be prompted to enter

the width and height of the video in pixels.

VIDEO BORDER

If you wish, you can add a border to your video.

This is illustrated in the example where the video has a 4 pixels wide

green border.

Border Width (Pixels) Set the width of the border in pixels, as shown below:

If you choose to have a border further options will appear, as illustrated below.

Border Colour Clicking on this will launch the colour chooser where you can pick from a set of

predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as shown

above. When you manually enter a colour code, press the Return button on your

keyboard once complete.

Border Type There are several border types to choose from, as illustrated below.

VIDEO CAPTION

If you wish, you can add a border to your video.

This is illustrated in the example where the video has

caption at the bottom of the video.

Show Caption

If you select that you wish to have a caption further options will appear, as shown below:

Background Colour This will change the background colour of the caption.

Clicking on this will launch the colour chooser where you can pick from a set of

predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as shown

above. When you manually enter a colour code, press the Return button on

your keyboard once complete.

Text Colour This works the same way as setting the background and will change the colour

of the caption text.

Text Size This will change the size of the caption font. If you are not sure what to enter

here try 12 pixels.

Text Alignment The alignment of the caption text.

Image Caption The caption to use for the image

CREATING AN RSS FEED SECTION

In the add section panel choose “6.

RSS Feed” followed by the add button.

The RSS section will appear in the

desired location.

WHAT IS RSS?

To recap, an RSS section allows you to display news from third party websites as long as

they provide a valid RSS feed.

An example of RSS in action

The example on the left illustrates a summary of the latest football news from the BBC

website. Your Mistore website will automatically update each day to reflect the latest

football news from the BBC without you having to perform any additional tasks. When

a website visitor clicks on a link within the news they are then redirected to the BBC

website to read the full news story.

Finding RSS Feeds

If you visit the BBC website you will see RSS icons throughout the website (please note,

RSS feeds could be found on any website, this is just for demonstration purposes).

The arrow highlights the

RSS feed icon shown on

the BBC football home

page.

If you click on this icon

you will be redirected to

the news feed as shown

below

The screen shot above shows the URL of the BBC football news feed. To use this feed

on your website copy the URL shown and apply it to your RSS Feed section. This is

explained in the following sections.

RSS SETTINGS

Within the RSS settings you can choose the source of your RSS feed and how it appears on your website.

RSS FEED SETTINGS

RSS Feed URL The URL of the RSS feed you wish to show on your website

News Items The number of news items you wish to display from the feed.

Please note, when changing this update may take up to 24 hours to show on your website.

RSS NEWS HEADING

Heading Text The URL of the RSS feed you wish to show on your website

Text Colour This will change the colour of the heading text.

Clicking on this will launch the colour chooser where you can pick from a set of

predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as shown

above. When you manually enter a colour code, press the Return button on your

keyboard once complete.

Text Size

(Pixels)

This will change the size of the heading text. If you are not sure what to enter

here try 12.

Text Alignment The horizontal alignment of the heading text

Background

Colour

This works the same way as setting the heading text and will change the colour of the

heading background.

RSS CONTENT

Background

Colour

This will change the background colour of the RSS content box.

Clicking on this will launch the colour chooser where you can pick from a set of

predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as shown

above. When you manually enter a colour code, press the Return button on your

keyboard once complete.

Text Colour This will change the colour of the text and works the same as changing the

background colour.

Link Colour This will change the colour of the link text and works the same as changing the

background colour. If you leave this blank the links will be the same colour as

those throughout your website.

RSS BORDER

Border Width (Pixels) Set the width of the border in pixels, as shown below:

If you choose to have a border further options will appear, as illustrated below.

Border Colour Clicking on this will launch the colour chooser where you can pick from a set of

predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as shown

above. When you manually enter a colour code, press the Return button on your

keyboard once complete.

Border Type There are several border types to choose from, as illustrated below.

SUPPORTING TEXT

SECTION HEADING

If you wish, you can enter a heading for the section.

The heading will sit above the RSS feed and text, as

illustrated

Heading The heading text

Heading Size This will determine the size of the heading text.

SECTION TEXT

The section text can be aligned alongside, above

or below the RSS feed.

Text Alignment

Choose the alignment of the text in relation to the RSS feed.

Aligning the text to the left of the RSS feed Aligning the text to the right of the RSS feed

Aligning the text above the RSS feed. The RSS

feed will use the full width available.

Aligning the text below the RSS feed. The

RSS feed will use the full width available.

Supporting Text The text for the section

CREATING A FLASH SECTION

In the add section panel choose “5. Flash

Animation” followed by the add button.

The Flash section will appear in the desired

location.

CHOOSING A FLASH ANIMATION

Explain >>>

MOVIE PREFERENCES

Movie Press the [choose] link to choose a movie to display. This will launch the file manager tool which will allow you

to choose from your existing movie bank or upload new ones. The file manager is explained in depth in

Appendix B. The clear your movie selection press [clear]

Movie Size Set the width and height of the movie.

Actual This will show the movie at its normal size

Custom Selecting custom allows you to set the height and the width of the movie (in pixels)

IMAGE BORDER

Border Width (Pixels) Set the width of the border in pixels, as shown below:

If you choose to have a border further options will appear, as illustrated below.

Border Colour Clicking on this will launch the colour chooser where you can pick from a set of

predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as shown

above. When you manually enter a colour code, press the Return button on your

keyboard once complete.

Border Type There are several border types to choose from, as illustrated below.

MOVIE CAPTION

Show Caption

If you select that you wish to have a caption further options will appear, as shown below:

Background Colour This will change the background colour of the caption.

Clicking on this will launch the colour chooser where you can pick from a set of

predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as shown

above. When you manually enter a colour code, press the Return button on

your keyboard once complete.

Text Colour This works the same way as setting the background and will change the colour

of the caption text.

Text Size This will change the size of the caption font. If you are not sure what to enter

here try 12 pixels.

Text Alignment The alignment of the caption text.

Image Caption The caption to use for the image

EDIT SUPPORTING TEXT

The supporting text can be

aligned alongside, above or

below the image, but is not

mandatory.

Show Supporting

Text

Choose if you wish to show supporting text.

If you select no, an additional option will appear as illustrated below allowing you to choose the

alignment of your image.

If you select that you wish to have supporting text further options will appear, as shown below:

Text Position Set the text position in relation to the image.

If you choose set the text position to above or below the image an

additional option will appear as illustrated below allowing you to

choose the alignment of your image.

Text Wrapping This is only available if your text is aligned to the left or right of the

image.

If set to yes, when the text exceeds the height of the image, it will wrap

below the image.

When set to no, the text will be displayed alongside the image without

wrapping, as shown below

Padding (Pixels) The padding is the space between the text and the image.

Padding set to 0 pixels. The text

sits flush with the image.

Padding set to 10 pixels leaving

space between the text and the

image.

Supporting Text The text for the section.

CREATING A GALLERY SECTION

In the add section panel choose “3.

Image Gallery” followed by the add

button.

The section will appear in the

desired location and open in edit

mode, as shown in the image on

the right.

GALLERY SETTINGS

GENERAL SETTINGS

The settings view allows you

to define how you wish your

gallery to look.

The gallery thumbnail images

can be auto resized, saving

you time and effort.

Before you select your images,

it is advised you enter your

values in here.

You can always come back and

change them later.

Images Per Row Set how many images you wish to have on each row in your image gallery, as illustrated below.

Images per row set to 4. Images per row set to 8.

Images per row set to 2

Thumbnail Resize There are four thumbnail resize options, as illustrated below:

No Resize The original dimensions of the image will be used.

Proportional The proportions of the thumbnails are kept in-tact (not stretched). You specify the

desired height and the width is determined automatically based on the number of

images on each row of the gallery to best fit the space available.

The above example shows a gallery with 4 images per row and the thumbnail height

set to 120 pixels.

This works well if all your images are the same dimensions. However, if they vary you

may get better results using the Zoom and Crop resize.

Zoom & Crop This will crop the thumbnails to best fit the dimensions you specify, whilst zooming in if necessary to best fit the space allocated.

You specify the height and the width is determined automatically based on the

number of images on each row of the gallery to best fit the space available.

The gallery shown above has the same settings as the proportional resize. If you

compare the two, you will see that the zoom and crop resize thumbnails are all

exactly the same dimensions, giving a slightly improved result.

Zoom and crop is best illustrated when increasing the images per row variant. This is

illustrated below showing how each image has been cropped to fit the space

available.

Non

Proportional

This will stretch the thumbnails to best fit the dimensions you specify. You specify the height and the width is determined automatically based on the number of images on each row of the gallery to best fit the space available.

The gallery shown above is has the same settings as the proportional resize. If you

compare the two, you will see that the non-proportional thumbnails are all exactly

the same dimensions and some have been stretched slightly to fit the space available,

giving a slightly improved result.

The non-proportional resize works well when images have similar dimensions. The

gallery below illustrates the same image gallery but with 8 images on a row. The

resulting images looks distorted as the image stretching becomes very obvious.

Thumbnail

Spacing

The spacing between thumbnail images

Thumbnail spacing set to 0. Thumbnail spacing set to 3 pixels.

THUMBNAIL BORDER

If you wish, you can add a border to your

thumbnails.

This is illustrated in the example where the

thumbnails have a 2 pixel wide black border.

Border Width (Pixels) Set the width of the image border in pixels, as shown below:

If you select that you wish to have an image border further options will appear, as illustrated below.

Border Colour Clicking on this will launch the colour chooser where you can pick from a

set of predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as shown

above. When you manually enter a colour code, press the Return button on

your keyboard once complete.

Border Type There are several border types to choose from, as illustrated below.

THUMBNAIL CAPTION

If you wish, you can add a caption to

your thumbnails.

This is illustrated in the example where

the all thumbnails have an associated

caption with white text and a black

background.

Show Caption

If you select that you wish to have a caption further options will appear, as shown below:

Background Colour This will change the background colour of the caption.

Clicking on this will launch the colour chooser where you can pick from a set of

predefined colours or enter a colour code of your choosing.

If entering a colour code, you will need to enter it in Hex format, as shown above.

When you manually enter a colour code, press the Return button on your

keyboard once complete.

Text Colour This works the same way as setting the background and will change the colour of

the caption text.

Text Size This will change the size of the caption font. If you are not sure what to enter here

try 12 pixels.

Text Alignment The alignment of the caption text.

CHOOSING YOUR GALLERY IMAGES

Here you can choose the images for your

gallery.

Each gallery can have up to 8 images.

Thumbnail Image Press the [choose] link to choose an image to show as a thumbnail. This will launch the file manager

tool which will allow you to choose from your existing image bank or upload new ones. The file

manager is explained in depth in Appendix B. To clear your image selection press the [clear] button.

Thumbnail Clicked You have the option to choose an action to perform when the image is clicked on.

Do Nothing Nothing will happen if the image is clicked on.

Show Thumbnail Image

at Full Size

The image chosen will be shown at its full size above the

thumbnail image.

Show Another Image Same as above, but you can choose an alternative image.

Go to URL When the image is clicked on the user will be redirected to another web

page. You can paste a URL or choose from a list of pages from your

website by pressing [Choose from List].

There is also the option to link to an external website (such as

www.google.co.uk). When pasting a URL make sure you include http://

at the start.

You can also specify if you wish to open a new browser window to load

the content in. This is specified by selecting “New Window” from the

Open URL In field. This would normally occur if you are linking to an

external web page so that your website remains active behind the new

window.

Download Document Choose a document to download when the image is clicked on.

Mouse Over

Thumbnail

When the mouse is placed over the image you have two options, as shown below.

Do Nothing Nothing will happen when the mouse passes over the image.

Fade to Another Image Use this feature to show an alternative image when the mouse

passes over.

Press the [Choose] link to select an image to display. Use the

“Fade Time” to choose the fade speed.

Thumbnail Caption The caption to use for the image.

Mouse Over Text This should be set to help a visually impaired reader who is using a screen reader. They will hear this

alternative text in place of the image.