Mistore Userguide
-
Upload
facemediagroup -
Category
Documents
-
view
233 -
download
2
description
Transcript of Mistore Userguide
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.