How to customize the Flash Templates

This FAQ will try to explain how our templates are structured, how they work, and ultimately, how the users are supposed to customize them.

The FX templates are an ingenious blend of all FlashXML components, brought together in one website. You can check all the FX components that go into a template by checking the components folder in the template’s folder. 

Now, there are two types of components that we use in our templates. We have site-wide components and page specific components. Below you can see the diagram to how a typical template looks.

Site-wide components

The navigation menu

- requires little explanation, opens the different pages of the site;

- the text in the navigation can usually be changed from the navigation.xml file, or menu.xml file. The CDATA tags tell the menu what text to add to the menu;

- if the menu doesn’t have CDATA tags, the “text” in the menu is created with images;

- it usually has an action attribute (tells the template what page to open), but can contain url and target attribute (use them for external links).

The template’s logo

- this is usually an image or sometimes text. It is usually added with a Spacer component (a basic component to add image/text). the XML that adds this image is usually found in header/Spacer/images.xml;

- some templates (Challenge You, Dance Floor, Evolva, REM, Spark) add the logo through an XML in the template’s folder header_settings.xml;

- other templates (Monochrome) add the logo in the template’s background;

- logos are usually transparent background PNG files, to allow the template’s background to be seen.

The Sharer        

- this controls the social sharing, like Facebook and Twitter. It can usually be found either in the footer, or header;

- it can do 2 things: share your site on your user’s social accounts; or your users can access your social account;

- when you edit the Sharer’s settings.xml you can see that each icon has an attribute called action;

- let’s take the Facebook icon, if you have action=”http://www.facebook.com/flashxml”, when you click the Facebook image, you will be taken to the Facebook account specified; 

- when action=”facebook”, if you click on the FB icon, your users will share your site on their accounts, or whatever site you entered in the shareURL attribute.

Copyright text 

- requires little explanation, provides users with the designer’s or company’s name;

- it’s added with a simple component called Spacer, that we created especially for our templates;

- to change the text, usually find the text.xml in the footer/Spacer/ folder;

- you can add links in the Spacer by adding a <a href=””> </a> tags, in the CDATA tags in the text.xml;

- you can also add linked images, by adding a <img src=””> tag inside the <a></a> tags, in the CDATA tags in the text.xml, but you must make sure that you add the <imageScale value="1"/> line in the Spacer's settings.xml.

MP3 Player   

- the normal MP3 Player has been redesigned to show just the little visualizer, that you can see in the template;

- it can either be found in the footer folder or in the header and you can turn it off, by editing one value in the settings.xml, changing the <autoStart value="true"/> to <autoStart value="false"/>;

- Don’t delete the MP3 Player’s files or you will crash the template.

Fullscreen button

- makes the template fullscreen; 

- the image used can be changed by editing the footer/assets/skin.xml

This concludes the  presentation for the site-wide components in the templates. It’s usually easy to find them. The components which are in the top section of the template are usually in the header folder, and the components which are in the bottom third of the template are usually in the footer folder. 

Since our templates’ design varies so much, it’s difficult to make a comprehensive rule about what each of these folders contain. You will have to explore a bit, in order to figure out which components are in which folder.

Page specific components

Each template has a number of pages, each page usually having one or more components. Usually the slideshow and gallery pages only have one fullscreen component, while other pages may have more.

Usually every template has at least these pages - Home, Contact, About, Video

Some templates might also feature a News page, a Gallery page, a Slideshow page etc.

All the information found on all the pages is found in the pages folder. This folder contains more folders, one for each page in the template - the Home page is in the pages/home/ folder; the Contact page is in the pages/contact/ folder.

Template pages in general

- all pages in the template have their own folder and their own settings.xml; you can control each page with this XML;

- typically you can change the size of the “page” in the template; you can do this with the <componentWidth/> and <componentHeight/>. This only works for those pages where the component isn’t fullscreen, lik e most Gallery/Slideshow pages;

- you can also change the background settings for the page; to use an image for a background the typical values would be <fillType value="image"/> <backgroundImagevalue = "pages/contact/image.png"/> <backgroundFitting value = "repeat"/>;

- each component, on each page is positioned on the “page” using the components.xml file. Most components are positioned with 3 attributes, position (a 3x3 grid position of the page), paddingH (horizontal position, relative to the position) and the paddingV (vertical position, relative to the position).

The Home page

- the images/text are found in the pages/home folder;

- to change the images on the Home page you need to open the images.xml of each component in the home page folder.

The About page

- the text/images are found in the pages/about folder;

- this page usually uses our HTML Content Scroller, which reads a HTML file, called text.html, usually found in the pages/about/HTMLContentScroller/assets/ folder;

- some other about pages use other components to display the text, like the Spacer component, which also adds text from the CDATA tag, in the text.xml, usually found in the pages/about/Spacer/assets/ ; 

- some about pages can also have another gallery component, like in the example bellow, where on the same page you have a HTML Content Scroller, a Spacer, and the ArcGallery. To modify the images in the ArcGallery you’d need to edit the images.xml in the pages/about/ArcGallery/ folder. 

The Contact page

- to customize the contact page you’d need to change the files in the pages/contact folder;

- to make the Contact Form work you will need to enter your e-mail address (the e-mail where your visitors’ messages will be sent). You need to add your e-mail address in a PHP file, called send_email.php, in the pages/contact/ContactForm/assets/script/ folder;

- since most webservers allow sending e-mails from script, you only need to add your e-mail address like this: 

define('EMAIL_RECIPIENT', 'bob123@gmail.com');

- you only need to complete the rest of the SMTP information in the PHP if your server doesn’t support sending e-mails from script;

- in the example below you can see that the Contact page has 3 components, the Contact Form FX, and 2 Spacer components:

- to change the text on the right, to add images, etc, you’ll need to edit the text.xml in the pages/contact/Spacer/ folder;

- to change the “Leave a message” text, you will need to edit the text.xml in the pages/contact/Spacer2/ folder;

- the text is added in the CDATA tags in the XML fles.

The Video Page

- the videos list is found in the pages/video/YoutubeVimeoPlayer folder;

- you can use Youtube, Vimeo users and channels, instead of individual videos. Please see the Youtube Vimeo Player’s installation instructions for more details;

- the video player doesn’t have a fullscreen mode available - however you should usually be able to resize the player if you want to make it bigger.

- if there are text fields outside the player, like titles, quotes, they are probably added with a Spacer, and you can change them from the text.xml in the pages/video/Spacer/ folder

This section of the FAQ will present miscelaneus information about what you can do and don’t in our templates.

Template DOs

1. You can add almost any of our components to the templtes, but this requires custom work; please request any modifications using this contact form;

2. You can add hyperlinks in the menu, to take you offsite, like your Blog. You can even configure pop-out scripts using the Menu links, to open webpages over the blog;

3. You can add images to all the Spacer components;

4. You can have a multilanguage site - just add the necessary links to the Copyright Spacer, to take you to a different copy/language of the template;

5. Almost all of the customizations and features of the stand-alone components, like the 3D Banner, Banner Navigator, are also available in the template. See the individual component’s pages for details about this;

6. You can manually add pop-out scripts to open larger images to most of the components in the templates.

7 You can use local FLV and MOV files in the video player too.

Template DON’Ts

1. Never delete files from components you don’t want; this will crash the template;

2. You can’t always duplicate pages, as most of our fullscreen, or stretch width pages are hardcoded. You should contact flashxml support to request to duplicate pages;

3. Deleting the MP3 player’s files will cause the template to crash; set the autostart attribute to false, to stop the music;

4. Adding an image like image.jpg in any images.xml and your file is called images.JPG (capital lettering for the extension) will not be found, and cause the template to crash;

5. Flash template’s don’t have links in the propper sense of the word for the pages within; you stay on the same page;

6. Flash in fullscreen disables your keyboard, so you can’t type in the Contact Form in fullscreen; 

7. The Youtube Vimeo Player doesn’t work in fullscreen because of ireconciliable conflicts between the template and the player;

8. The integrated Colorbox feature is disabled in the templates.