Documentation for Liquid² - Part 1

First of all thank you for purchasing our product. I will cover each part of the template in help files, each module will have its own help file, so you can get quickly to the point. Hopefully I will try and answer every possible question, but if you wanted to change something and can't find how, then do not hesitate to contact me via my profile page on activeden.

This template is XML driven, which means most of the data is imported dynamically, making the update process very simple.

Content

1) What is XML?

2) Where are the xml files - How does it work?

3) How do I update the menu and background content?

4) How do I add my own logo + copyright text?

5) How do I update the MP3 music file with my own?

6) How do I add my own social icons?

7) How do I embed special characters?

8) How do I link to an external HTML page instead of loading a swf file?

9) How do I change the colors and the transparency of the menu, header etc..?

10) How can I used the same module multiple times?

11) Can I load other SWF files in this template?

12) What files do I need to upload to my server?

13) Can I change the alignment of the menu?

14) How do I change the main page title for the site?

15) Video background settings.

16) SWFFit settings.

17) Where can I find the images of the girls dancing in the preview?

 

1) What is XML?

XML files are text files that can store information and this information is structured using "tags" in a similar way to HTML tags. Tags are defined using brakets, and there is always an "opening" tag and a "closing" tag as follows:

<tag>Some data here</tag>

<tag> is the opening tag and </tag> is the closing tag. Everything in between belongs to that tag.

So, to update your application with your information, you will need to open the files called "someName.xml", which are stored in the xml folder provided in your download. You can open xml files with any text editor such as notepad, although using text editors such as wordpad, notepad++ or dreamweaver will render the xml content with colors and make the updating even easier.

2) Where are the xml files - How does it work?

All the xml files are located in a single folder called "xml". Each module of that template has its own XML file, simply go into the XML folder and update the relevant xml file.

Please refer to each module's help file for more details.

3) How do I update the menu and background content?

To update the content of the menu, open the "main.xml" file in the xml folder using your favourite text editor. There are 2 types of menu items, single menu items, and menu items with sub-menus.

a) Single menu items:

Single menu items look like this:

<!-- start single menu item here -->
<menuItem page_title="HOME" swf="singleVideo_and_rotator.swf" xmlPath = "xml/home.xml" bgType = "image" bgFile = "images/background/1.jpg"/>
<!-- end single menu item here -->

Update menu items parameters as follows:

page_title = The name of the menu item that will display on the site. This also what will be added to the browser URL for deep linking. You can use lower case or capital letters, those will be displayed as is in the site, and the template will automatically set all menu names to lowercase for the browser URL deep linking for SEO purposes.

swf = This is the path to the swf file to load for that menu item. If you want a menu item to get an external URL rather than load a swf file, simply add a full HTTP url instead of the swf file path, as in the "Blog" example:

<menuItem page_title="BLOG" swf="http://marketplace.envato.com/user/LGLab" xmlPath = "" bgImage = ""/>

xmlPath = This is the path to the xml file to be loaded by the swf.

bgType = Here you can choose which file type to load as a background, including: "image", "swf", "video" and "youtube". If you want to use a YouTube background, just put the YouTube video ID, not the URL to the youTube page.

bgSwfSelfAlign = This is an extra parameter if you use a SWF file as background. Some SWF files are coded to align themselves to the screen, in that case set this parameter to "true", otherwise set it to "false"

bgImage = This is the path to the background image to be loaded for the menu item. If you leave this field empty, it will stick to the previous image.

b) Sub-menu items:

Sub menu items look like this:

<!-- start 2-level menu item here -->
<menuItem page_title = "ABOUT US">
<submenu page_title="SERVICES" swf="textContent_and_rotator.swf" xmlPath = "xml/services.xml" bgType = "image" bgFile = "images/background/4.jpg"/>
<submenu page_title="STAFF" swf="staff.swf" xmlPath = "xml/staff.xml" bgType = "image" bgFile = "images/background/3.jpg"/>
<submenu page_title="CONTENT WINDOW" swf="textContent_and_rotator.swf" xmlPath = "xml/contentWindow.xml" bgType = "image" bgFile = "images/background/2.jpg"/>
</menuItem>

<!-- end 2-level menu item here -->

The first menuItem is the main menu item name, then update each submenus the same descibed for single menu items

c) Add/Remove menu items:

To add or remove menu items or submenu items, simply copy a menu item section as above and paste it where you want it, or delete a menu item section to remove it from the site.

4) How do I add my own logo + copyright text?

At the top of the main.xml files, you can find various settings, you can change the logo at the top:

logo = "images/logo2.png" //Update the path to your logo here

At the bottom of the main.xml file, you will find the <copyright> node as follows, update the content highlighted in blue, this can be HTML formatted:

<copyright>
<![CDATA[2009 © <a href="http://marketplace.envato.com/user/LGLab">LGLab</a> - All Rights Reserved |]]>
</copyright>

5) How do I update the MP3 music file with my own?

At the top of the menu.xml file, you can find the following settings:

songPath = "dropBack.mp3" //Update the path to your music file here
soundVolume = ".75" //Change the default volume level for your sound here from 0 to 1

playMusic = "true" //Set the music to play or not, if not set this parameter to false.

You can also change the text that appears in the music button in the footer, in the settings as follows:

soundVolumeTxt = "Music playing"
soundPausedTxt = "Music paused"

6) How do I add my own social icons?

At the bottom of the main.xml, you will find the <socialIcons> node as follows:

<socialIcons>
<icon url="http://marketplace.envato.com/user/LGLab" tooltip = "Follow us on Twitter">images/socialIcons/twitter.png</icon>
<icon url="http://marketplace.envato.com/user/LGLab" tooltip = "Be friends on Facebook">images/socialIcons/facebook.png</icon>
<icon url="http://marketplace.envato.com/user/LGLab" tooltip = "Stay in touch on LinkedIn">images/socialIcons/linkedin.png</icon>
<icon url="http://marketplace.envato.com/user/LGLab" tooltip = "Digg this template">images/socialIcons/digg.png</icon>
</socialIcons>

You can add as many or few icons as you like, just delete or duplicate <icon> nodes, and update as follows:

url = the URL to navigate to when the icon is clicked.

tooltip = the text content for the tooltip that appears when hovering over the icon.

images/socialIcons/twitter.png = the path to the icon to load.

The icons used in the template are the 16x16 icons from the following site, if you wish to use different icons, just go and download the ones you want: http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/#icons

7) How do I embed special characters?

For your peace of mind, the following special characters are already embedded in the template, so you can use them in the XML files by default: À,Á,Â,Ã,Ä,Å,Æ,Ç,È,É,Ê,Ë,Ì,Í,Ð,Ñ,Ò,Ó,Ô,Õ,Ö,Ø,Ù,Ú,Û,Ü,Ý,Þ,ß,à,á,â,ã,ä,å,æ,ç,è,é,ê,ë,ì,í,î,ï,ð,ñ,ò,ó,ô,õ,ö,÷,ø,ù,ú,û,ü,ý,þ,ÿ,ą,ę,ć,ó,ż,ź,ł

If you need to use special characters that are not included in the above list, then you will need to embed them in the FLA files. Let's take the example of the main file, the liquidTemplate.fla, open this file in Flash, in the library, locate the movieclip called "fontEmbedding" and double click it. This will open it on stage, you will see 5 different textfields used to embed the 3 verdana fonts (regular, bold and italic) and the 2 geoSans fonts (regular and italic), select the top one (verdana regular), in the properties panel click the "Character Embedding" button, you will see a field at the bottom called "Include these characters" with some characters already added, add the extra characters you want to use and click OK. Do the same with the remaining 4 textfields. You now need to recompile the SWF file by pressing CTRL+ENTER on your keyboard. You can now use these special characters in the xml files. Note you will need to repeat the above process for each module you want to add these special characters to.

8) How do I link to an external HTML page instead of loading a swf file?

In the main.xml file, each menu item has a swf path parameter:

<!-- start single menu item here -->
<menuItem page_title="HOME" swf="home.swf" xmlPath = "xml/home.xml" bgImage = "images/background/1.jpg"/>
<!-- end single menu item here -->

However, you can point to an external url instead, by just including a absolute url instead of a swf path, like so;

<menuItem page_title="BLOG" swf="http://marketplace.envato.com/user/LGLab" xmlPath = "" bgImage = ""/>

You can also set the window target for the external URL in the settings at the top of the main.xml as follows:

menuExternalURLWindowTarget = "_blank"

9) How do I change the colors and the transparency of the menu, header etc..?

At the top of the xml file, you will find the following parameters, update the content highlighted in red as described below:

headerBgColor = "1B1B1B" //Color for the header
headerBgAlpha = "0.5" //Transparency for the header
footerBgColor = "1B1B1B" //Color for the footer
footerBgAlpha = "0.5" //Transparency for the footer

menuButtonsTextColor = "FFFFFF //Color of the menu text
menuButtonsBgColor = "1B1B1B" //Color for the menu background
menuButtonsBgAlpha = "0" //Transparency for the menu background
menuButtonsBgOverColor = "CCFF00" //Color for the menu background when over
menuButtonsBgOverAlpha = "0.55" //Transparency for the menu background when over

submenuButtonsTextColor = "FFFFFF" //Color of the submenu text
submenuButtonsBgColor = "1B1B1B" //Color for the submenu background
submenuButtonsBgAlpha = "0.5" //Transparency for the submenu background
submenuButtonsBgOverColor = "CCFF00" //Color for the submenu background when over
submenuButtonsBgOverAlpha = "0.5" //Transparency for the submenu background when over

bgPreloaderColor = "CCFF00" //Color of the background preloader
bgPreloaderAlpha = "0.1" //Transparency of the background preloader

10) How can I used the same module multiple times?

You can easily use multiple instances of each modue without having to actually duplicate the flash file itself. Simply add a new menu item, point to the same swf file, and add a different xml path, as follows:

<menuItem page_title="HOME" swf="singleVideo_and_rotator.swf" xmlPath = "xml/home.xml" bgImage = "images/background/1.jpg"/>

<menuItem page_title="HOME2" swf="singleVideo_and_rotator.swf" xmlPath = "xml/home2.xml" bgImage = "images/background/1.jpg"/>

This can be done with any module.

11) Can I load other SWF files in this template?

Sure you can, the template preview includes "test" SWF files, under the SWF menu item.

<menuItem page_title = "YOUR OWN SWF">
<submenu page_title="SELF CENTERED" swf="yourOwnSwf_topLeft.swf" selfAlign = "true" xmlPath = "" bgType = "swf" bgSwfSelfAlign = "false" bgFile = "images/background/swf.swf"/>
<submenu page_title="LAZY SWF" swf="yourOwnSwf_center.swf" selfAlign="false" externalWidth="700" externalHeight="480" xmlPath = "" bgType = "image" bgFile = "images/background/1.jpg"/>
</menuItem>

Note that 2 types of external SWFs are supported, "self-aligned SWFs" or SWFs that expect the template holder to align them. You may or may not know, but some SWF files are coded to align themselves when resizing the browser window, and others don't, which could be a problem with this template.

However, you can set parameters to deal with both situations.

a) Self-aligned

By definition, you don't need to do anything with those, as they will center themselves which is fine. You will still need to set the selfAlign parameter to true in that case as in this example:

<submenu page_title="SELF CENTERED" swf="yourOwnSwf_topLeft.swf" selfAlign = "true" xmlPath = "" bgType = "swf" bgSwfSelfAlign = "false" bgFile = "images/background/swf.swf"/>

Note that unless it is programmed so, you do not need to add an xml path, as most modules will have the xml path hard coded in the actionscript.

b) non-centered SWF files

Those are the ones that would expect my template to do the centering for them, in that case, you will need to set the selfAlign parameter to false, as well as the dimensions of that swf file, as follows:

<submenu page_title="LAZY SWF" swf="yourOwnSwf_center.swf" selfAlign="false" externalWidth="700" externalHeight="480" xmlPath = "" bgType = "image" bgFile = "images/background/1.jpg"/>

12) What files do I need to upload to my server?

You basically need to upload everything single file, exactly the way it is in the download file you got from ActiveDen, except for the FLA files.

13) Can I change the alignment of the menu?

In the main.xml file in the settings at the top you will find the following parameter, which you can set to "left", "middle" or "right":

menuAlignment = "middle"

14) How do I change the main page title for the site?

In the main.xml file in the settings at the top you will find the following parameter, change it to what you want:

BroswerPageTitle = "Liquid² "

15) Video background settings.

At the top of the main.xml you will find the following parameters, update accordingly:

videoBackgrounBufferTime = "5" //The buffer time is seconds for the video
videoBackgroundVolume = ".5" //The default volume leel for the video background
videoBufferBgColor = "1b1b1b" //The color for the video buffer movieclip
videoBufferBgAlpha = ".5" //The transparency for the video buffer movieclip between 0 and 1

16) SWFFit settings.

swffit is a javascript code that will set a minimum height for your flash website until the natural browser scroll bars appear. This template was built to fit most screen resolution, but you may still want to show browser scroll bars when reaching a low resolution.

To do so, open the index.html file in your favourite text editor and locate the following line of code:

swffit.fit("flash",900,600); //Update this line with your own values (Minimum width, minimum height)

You can trurn swffit off all together by "commenting out" the above line by adding 2 forward slashes (//) in front of the line like so:

//swffit.fit("flash",900,600);

 

17) Where can I find the images of the girls dancing in the preview?

You can find those images at the following links:

http://www.fotolia.com/id/21175632
http://www.fotolia.com/id/13803605
http://www.fotolia.com/id/17454067
http://www.fotolia.com/id/21175632
http://www.fotolia.com/id/16143191
http://www.fotolia.com/id/20803897
http://www.fotolia.com/id/13858499
http://www.fotolia.com/id/16651727
http://www.fotolia.com/id/21517963
http://www.fotolia.com/id/20665060

 

That's it for the main part of the site. For instructions about updating each module's content, refer to the relevant help file in the help folder.

Enjoy it! If there is anything that you need help with, please do not hesitate to contact me via my ActiveDen account