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.
Zoom & Crop
Resized image. Width set to 193px and height automatically calculated as 136px to keep the aspect ratio of the image (not stretched).
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.
When Image Clicked
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.
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
When Mouse Over Image
Choose a document to download when the image is clicked on.
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.
Supporting Text
The text for the section.
Padding set to 10 pixels leaving space between the text and the image.
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
VIDEO CAPTION
There are several border types to choose from, as illustrated below.
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
SUPPORTING TEXT
There are several border types to choose from, as illustrated below.
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
MOVIE CAPTION
There are several border types to choose from, as illustrated below.
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.
Supporting Text
The text for the section.
Padding set to 10 pixels leaving space between the text and the image.
CREATING A GALLERY SECTION In the add section panel choose â&#x20AC;&#x153;3. Image Galleryâ&#x20AC;? 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 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.
GENERAL SETTINGS 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 â&#x20AC;&#x153;New Windowâ&#x20AC;? 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
Mouse Over Thumbnail
Choose a document to download when the image is clicked on.
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 â&#x20AC;&#x153;Fade Timeâ&#x20AC;? 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.