Web Banner Documentation by ChiStefan v1.0 Web Banner Created: 04/12/2009 By: ChiStefan Email: Thank you for purchasing my Web Banner. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much! ----------------------------------------------- ----------------------------------------------- Table of Contents ----------------------------------------------- ----------------------------------------------- ----------------------------------------------- 1. HTML Structure 2. CSS Files and Structure 3. Javascript 4. PSD Files 5. Installation ----------------------------------------------- 1. HTML Structure ----------------------------------------------- This banner is a 700 pixels fixed width div element. The banner has 3 basic sections: - the header; - the content - contains the right menu and the center three columns which contain the details for each menu item; - the footer - contains the description for the selected menu item; To modify the content of the three content columns - Bussines/Premium/Unlimited - modify the the divs with the class="tabs", this includes the title, content and the prices at the bottom. To modify the description in the bottom part, modify the appropiate list item in the <ul> list in the div tag with the class="varContent" eg: <li> <img alt="" src="bannerImages/diskSpaceBotImg.jpg" /> <h2>DISK SPACE</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ornare felis at massa porta a suscipit ante ultricies. Suspendisse ut libero porta metus dignissim commodo id ....</p> </li> 2. CSS Files and Structure ----------------------------------------------- This template uses 3 css files: - ie.css - which holds some hacks for the IE 6 browser. This file doesn't need to be modified; - banner.css - this is the main banner stylesheet. Sections in this file: 1. Preformatting elements - some default element formatting 2. Banner definition 2.1. BannerTop 2.2. BannerContent 2.3. BannerBottom If you want to modify the banner's background color to fit your webpage color, just modify the following line in the banner.css file: #banner { .................. background-color: #fff; .................. } 3. Javascript ----------------------------------------------- This banner uses the following javascript files: - iepngfix.htc (includes blank.gif) : This is a fix included only for IE6 which adds the png transparency functionality; - jquery-min.js : JQuery minified library; - banner.js : this is the main banner's javascript functionality file. Here are defined: - the functionality for the top banner open button; - the functionality for the right menu; 4. PSD Files ----------------------------------------------- The .psd file is well organised. Every element has its own folder with a specific name so it is very easy to find and edit. The slices are allready made so if you want to change something and you will have to save the new elements you will allready have the exact slice that you will have to save. 5. Installation ----------------------------------------------- To install the banner follow the next steps: - copy the css files from the 'css' directory into your stylesheet directory; - copy the bannerImages directory into your site's base directory ; - copy the files from the 'js' directory into your javascript directory; - add the following lines into the html page where you will include the banner inside the <head></head> tag <!--[if lt IE 7]> <link href=" <your_css_dir_name> /ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]--> <link href=" <your_css_dir_name> /banner.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lt IE 7]><script type="text/javascript" src=" <your_javascript_dir_name> /unitpngfix.js"></script><![endif]--> <script type="text/javascript" src=" <your_javascript_dir_name> /jquery-min.js"></script> <script type="text/javascript" src=" <your_javascript_dir_name> /banner.js"></script> <your_css_dir_name> = just replace with your directory name eg: myCssDir/banners.css - copy and paste the whole <div id="banner">...</div> into the page ----------------------------------------------------- Thank you again for purchasing this file. Enjoy :D
frodohb