FolioStop Help

Choosing your Layout is done in the SITE DESIGN tab as shown below:




At the top of the SITE DESIGN window you will see a drop down menu with a number of different Layouts. Your choice of layout defines the structure of your FolioStop website.

A layout preview will show you what the layout looks like. Once you have selected one that suits you, SAVE CHANGES.

You can switch between different layouts whenever you want by following the same process.

Remember: you must refresh the page in your browser or click VIEW YOUR WEBSITE, in order to see the changes.

We have designed FolioStop so that your content will work in all the different layouts. However, you may find that you can optimise the dimensions of your graphics (logo, image layers etc) to work better in a particular layout.

With multiple areas which you can customise, we have made it easier for those who are short on time or inspiration to give their website a theme. We have pre-designed a number of themes which you are able to choose from. 

To pick an existing theme, choose one from the drop down menu in the SITE DESIGN tab as shown below:




When you click on a theme, the layout preview will update to reflect the theme chosen. Once you have found a suitable theme, click SAVE CHANGES and your website will be updated.

In order to create a new theme, go to the SITE DESIGN tab, choose a theme you wish to base your new one on and click on EDIT YOUR THEME.

Below is a screenshot of the window which will appear:





This window contains all the options available for editing the colours and fonts used in your website.

NB: Changes to text styles and text colours will only be applied to NEW text pages. Existing text pages will not be effected.

Website Background & Content Area

Background Colour - Sets the background colour to your whole website. This setting will apply to your mobile phone website too. However you style your main website, this colour WILL be visible on the mobile phone version.

Content Area Colour - sets the colour of the area that displays your page content. You can also make this see-through by setting the transparency.

 

Menu

This is where you can specify settings for your site navigation menu.

Menu Font, Style and Size - Choose the typeface, bold and italic styling for your menu.

Text and Rollover Colour - Choose the colour of the font used for your menu both in the deselected state and when a menu item is selected (rollover colour).

Background Colour and Transparency - You can also give each menu item a coloured background by setting the transparency to greater than 0. On certain Layouts the menu background colour plays a more important role, forming large panels of colour behind the menu for example.

 

Your Pages, Text Styles & Colours

Choose a font for your text pages, and also a style for your links. Set the background colour and transparency of your text pages and multimedia pages. Choose colours for your text page scrollbars. You can override the text styles you set when editing the text page itself. 

NB: Changes to text styles will only be applied to NEW text pages. Existing text will not be effected.

Gallery Info, Text Styles & Colours

Each image in a gallery can have some info text that accompanies it. You can choose a font for your image info text, and also a style for links in your image info text. Set a background colour and transparency for the text box and choose colours for the scrollbar. You can override the text styles you set when editing the info text itself.

NB: Changes to text styles will only be applied to NEW image info text. Existing text will not be effected.

 

Gallery Captions

Each image in a gallery can have a small caption that appears when you browse the gallery. You can set the font style for this caption as well as the background colour and transparency.

Gallery Buttons

Some image galleries use numeric selectors (i.e clickable numbers 01  02  03 etc.) or arrows to browse the images instead of thumbnails. You can choose a font style for the numeric selector and background colour and transparency for the buttons.

Movie Player

If you show videos on your website you can set the colours of the video player here. Each video can also have some text to accompany it and you can choose a font style for this text.

NB: Changes to text styles will only be applied to NEW movie player text. Existing text will not be effected.

 

Audio Player

If you have an audio gallery on your website you can set the colours of the audio player here. Each track can also have some text to accompany it and you can choose a font style for this text.

NB: Changes to text styles will only be applied to NEW audio player text. Existing text will not be effected.

 

Once you are happy with the updated colours, click SAVE AS NEW THEME and enter the name.

In order to edit an existing theme, choose one from the drop down menu in SITE DESIGN and then click EDIT THEME.

There are many features of your website which can be given a colour. All of these colour settings are editable in the Themes window. Editable colours are as follows:

Website Background
The colour of the website's background which is visible on your mobile phone version at all times, regardless of whether you have layers that obstruct the background colour on your main website.

Content Area
The area of your website where the content is displayed. This can also have a transparency which allows for some interesting effects such as background image layers being partly visible through your content area.

Menu Background
This is the area over which the menu is displayed.

Text
Text can appear in a number of different places on your website. It appears as your website menu, on text pages, on multimedia pages, as info for your galleries and captions buttons and links. All these different instances of text can be assigned a colour from the Themes window.

Pages
Text and multimedia pages have background colours which when set give the effect of text sitting within a coloured box. These colours are NOT relevant for video, audio or movie galleries.

Info background
Each gallery item can have info text accompanying it. This colour option controls the area in which this info text appears giving the effect of the text sitting within a coloured box.

Caption background
Each gallery item can have a caption. These captions will appear if you hover over the thumbnail of an unselected image in the gallery. This colour option controls the area in which this caption appears giving the effect of the caption sitting within a coloured box.

Audio and Video players
Control the colours of the audio and video players.

Audio and Video player buttons
Control the colours of the audio and video player buttons that enable you to play, pause fast forward and rewind.

Audio and Video button rollover
Control the colour of the rollover when you hover over a button with the mouse.

Scroll bar track
The scroll bar track is the track in which the grip (see below) sits. The scroll bar will automatically appear if the content entered in the designated field exceeds the amount of space visible on the screen.

Scroll bar grip
The scroll bar grip is the button with which you can scroll up and down a page. It sits in the track.

NB: Some of these features can also be given transparency effects. The transparency determines the level of transparency of the relevant area. For example, if you wish to see a hint of your background image from behind the content area decrease the content area's transparency value. The more transparency you want, the lower the value you enter.

There are several ways to style your website text.

• Individual text pages can be styled manually using the text styling controls at the bottom of the text page editing window.
• New text pages will automatically use the styling you give them in your Theme (NB: Existing text pages will not be affected by changes to the Theme).
• Text can be styled using the TEXT STYLE drop down at the bottom of the editing window.

Styling Text Manually

Double click the text page icon -  - representing the page you wish to edit. This will open the text editor window for that page as shown below:

INSERT SCREEN HERE

Text can either be typed in directly, or pasted from another document. Existing text can be edited or deleted as you wish.

Text can be styled using the tools at the bottom of the text page edit window. You can select fonts, different font sizes, font colour, bold or italic styling and set text alignment.

You can save text styling to use on other pages by selecting the text and hitting SAVE STYLE. This will open a window allowing you to give the style a name and it will be saved in your Text Styles window.

 

Theme Text Styles

Your Theme will control the default styling of text page and gallery info text. Within your Theme you can choose a font for your text pages, and also a style for your links. These styles will be applied when you start typing into NEW text pages or gallery info. In order to crete your Theme, follow the instructions under the Creating A New Theme section.

NB: Changes to text styles will only be applied to NEW text pages. Existing text will not be effected.

Text Styles

A very effective way to apply quick styling to text is to create all the different styles you might need prior to editing your text pages or gallery info. You can create these text styles by going to the TEXT STYLES section of the main FolioEdit window as shown below:

 

To create a new text style, click NEW STLYE and give the style a name. You can then use the text editing controls to create styles such as Body Text, Heading 1, Heading 2, Italic etc so that when you come to edit text pages or gallery info, these styles are available to you in the Text Styles drop down. Be sure to give your text style a name by double clicking its exisitng name and giving it a new one, so that you can recognise it when choosing the style for your text

When you come to edit a Text page or gallery info, these styles will be available in the drop down as shown below:



INSERT SCREEN

Styling Your Menu

It is also possible to style the text used for your website menu. Go to the Theme editor and select the required font and styling under the heading 'Menu'. Please see 'Creating A New Theme' for further info.

Styling Gallery Captions

You can style the text used for your gallery captions. Go to the Theme editor and select the required font and styling under the heading 'Gallery Captions'. Please see 'Creating A New Theme' for further info.

When you edit or create a new theme, you will use the colour swatch in order to choose your colour. Below is a screenshot of what the theme window looks like once the colour swatch is open:

 

The colour swatch displays all of the colours that you are able to use for your site. There are various ways to choose your colour: either pick a colour or enter a 'hex' value in the field in the bottom right corner. Hit SAVE SWATCH to save the swach for future use or click OK to use the colour.

The logo that you upload will be resized to fit your chosen layout automatically, while preserving the proportions. However, you may find that you can improve space usage by choosing logo dimensions that work well for a specific layout. To do this you would need to edit the logo in a program such as Photoshop.

The editing options for your logo are found in the logo section of the GRAPHICS window, as illustrated in the screenshot below:

 

Blend mode:
You may apply a blend mode to your logo image. This affects how the image colours blend with the background colour of your site. Select 'normal' if you are unfamiliar with blend modes, or experiment!

Transparency:
If you wish to add transparency to your logo you can add the transparency value in the field provided. The lower the number, the more transparent the logo.

Link to Home Page:
You may wish your logo to act as a link to your home page. If so, tick the box.

NB: FolioStop sites are designed to work with a logo. However, if you don't want your logo to show on the website click REMOVE.

If you want to use images rather than colours to enhance the look and feel of your website then you are able to upload images to your website background, content area and foreground. You are able to add multiple layers and/or Flash animations to each of these areas of your website, and apply position, tiling, rotation, transparency and blend mode settings to each one. This gives you plenty of scope for creating a visually interesting website environment.

Foreground image layers can be clickable allowing you to create buttons that link internally, externally, to email or file downloads. 

NB: This function can help you add social media icons (facebook etc) that act as links to whatever social media pages you have set up. 

To add an image to an image layer, first of all decide which area of your websie you want to upload to; background, content area (the area of your website which displays your page content) or foreground. Select the tab representing the desired area from the GRAPHICS Tab as shown below:





Click ADD, and choose an image file from your computer. Once it has finished encoding, hit SAVE. Refresh your website to see the image layer in position. Dont forget - a foreground image layer may well partially obstruct your website content if not positioned correctly, a large image may obstruct it completely.

You can also add Flash animations to your website. For more information see Adding Flash animation to your site

Preview and Edit Layer

If you wish to preview and edit the image layer, click PREVIEW & EDIT LAYER(S) (only possible once you've saved the image) and the following screens will appear:

The small window above is the layer editing window. Choose from the drop down menu the layer which you want to edit, and then choose from the options listed below:

Positional points:
You are able to position an image using the 9 positional points. Selecting any of these points will move the image to the relevant position. For example, selecting the top right position will align the top right corner of your graphic with the top right corner of your screen, selecting the middle position will align the centre of your image with the centre of your screen.

If you wish to pinpoint more specifically the position of the image, pick a point which is closest to the desired position, and then enter how many pixels across (x) and up or down (y) from that point you want the image to go.

NB: If you can't get the image to move in the direction you want it, try using negative values in the X and Y fields.

Manipulating the image:
It is also possible to manipulate the appearance of the image. This is achieved by using the options below:

No scale - no change
Repeat - repeats the image either vertically or horizontally, or both.
Stretch - Stretches the image either vertically or horizontally, or both.
Keep ratio - If you wish the image to retain its proportion either horizontally, vertically, or both, keep ratio will ensure you do.

Rotation:
Each layer can be rotated independently. You can rotate repeated images. There are 4 presets or you can enter the rotation yourself. Angles are in degrees going clockwise.

Blend mode:
You may apply a blend mode to your layer. This affects how the image colours blend with the background colour of your site. Select 'normal' if you are unfamiliar with blend modes, or experiment!

Transparency:
Allow other layers of your website to show through the image layer by setting the transparency to anything lower than 100%.

Mouse Click/Rollover (Foreground Layers Only)

A foreground image layer can act as an external, internal, email or file download link. Once the layer is uploaded and saved, hit PREVIEW & EDIT LAYER to access the window as shown above.

Image Preview Window

The second window to open when you click PREVIEW & EDIT LAYER(S) is shown below:

This window gives you a preview of the layer(s) on various different screen sizes, allowing you to see how they will work on different sized monitors. By selecting the various screen sizes that appear in the drop down on this window, you can be sure that your image layers work for everyone, regardless of the size of their screen.

NB: These screen sizes are proportional - not actual size.

NB: It is very important to check that your image layers work on all the different screen sizes before you can be sure all visitors to your website will see the same layout.

If you want to include animation in your website but don't have the necessary skills, it might be worth considering our optional design service. See below for more details.

For a quick sneak preview of a FolioStop site using lots of animation see:
http://foliostop.com/animationexample

In the same way as you add images to your graphics layers, you can also add Flash animations (SWF) to your graphic layers, to really bring your site to life.

You can mix and match images and animations in the layers, and apply all the usual settings such as transparency and blend mode to each. However, you cannot apply scaling, repeating, or rotation to SWF files loaded into a layer.

Frame Rate is 60 fps
It is important to appreciate that FolioStop websites use a frame rate of 60 frames per second and this will also apply to any animations that you add to your site. Hence, an animation initially created at 24 fps will play really fast when added to your FolioStop site.

You can add simple timeline-based animations, or you can add complex Actionscript 3 based applications. You will probably need to know something about Flash in order to get started with this part of FolioStop.

However even if you don't know anything about Flash but you have a SWF file that you want to add, upload it and play with the positioning to get it into the correct position.

Adding a SWF file to a layer

To add a Flash animation to a layer: click 'Add', and in the subsequent file browser pop up be sure to select Flash SWF in the drop down next to 'Files of Type' at the bottom of the pop up. You won't see SWF files for upload unless you select this. Once selected, hit SAVE. Once it has uploaded you can edit the name of the layer and all the other settings as usual.

Advanced Flash Animation

This section is aimed at users who have an understanding of Adobe Flash or Flex.

Handling the Stage size

Although it is simple to upload a SWF file to your FolioStop website, positioning it where you want it will depend on how the SWF file was made.

Simple Positioning

For a standard timeline animation created in Adobe Flash, the default size of the loaded animation will be the stage size that was set when the file was created. This is the important thing to consider when setting the position in the layer preview and settings editor. The position will refer to the top left of the stage.

Creating animations that fill the screen

For an SWF coded in Actionscript 3, you can cater for visitors with different screen sizes.

Lets say for example that you want to create an animation that always fills the screen, your SWF will need to know the width and height of the browser window. In addition it will need to know if this changes so it can respond to the change in width or height.

When the FolioStop layout loads in your custom SWF, it executes a try-catch statement, and attempts to call a function in your SWF:

public function resizeStage(w:Number, h:Number):void{}

If you make sure that your SWF has this public function in its main class, then at initialization and also anytime the browser window changes size, this function will be called. This allows your SWF to know what the available screen width and height is at all times.

Please note: do not attempt to gain access to the stage from your loaded SWF as attempts to do so may cause a runtime error. The recommended way to get the stage width and height is to implement the public function above, and use the supplied arguments.

If you do not have this function in your SWF then it fails silently.

Content Area
For SWF files loaded into the Content Area Graphic Layer, the width and height arguments passed to the 'resizeStage' function are the width and height of the content area of that layout rather than the width and height of the whole browser window.

A favicon is an icon which you can choose to be displayed in the URL bar every time someone types your web address. It will look similar to this:



It will also display on the tab of your browser page like this:



A favicon helps your site to stand out. Generally they are created from the company logo or from a part of the logo. You can try to use your logo for this purpose.

To upload a favicon, go to the favicon window of the GRAPHICS window, as illustrated in the screenshot below:

 

Hit 'BROWSE' and select the image you want to use. For best results, choose an image that has square dimensions. The image will be resized automatically when you select it.

We hope that you will find FolioEdit easy to use for your website design. However, we understand that not everyone has design skills themselves, so for a small fee we do provide an optional design service which you may be interested in.

We can set you up with a suitable colour scheme and site graphics (background and / or content area images) that will help set the right tone for your website. Or if you think your website would benefit from a little animation, we would be able to help you create one.

We can also design you a logo or help you integrate an existing logo.

Once we know what you want we will be able to give you an estimate of the cost. This reflects the amount of time we spend on the site, and is based on our hourly rate of £80+VAT.

Please email us at enquiries@foliostop.com to discuss this further and request the service.