By: Hayley Crook
Thank you for purchasing my theme. 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!
There are 4 options with this theme:
For those familiar with PHP, I recommend using the PHP version. The header and footer are contained in single files, so you just have to change them once and it will update the look/feel on every page of the website. Also, the PHP version comes with additional simple PHP shopping cart, something the HTML version doesn't have. So try to use the PHP version if you can! :)
If you are converting this website theme into an e-commerce solution (such as prestashop or magento) then use the HTML version. It will be easier to copy parts out and place them in the required format for the e-commerce solution of your choice.
|/css||styles.css is the stylesheet that contains all the layout and content CSS.
styles-ie.css contains the ie specific styles (special fonts)
|/font||The special font style that is used for the titles.|
|/images||The images used in the constructed website|
jquery-1.2.1.js: The jQuery library, required for the lightbox and other animations
chilli-1.7.pack.js: animations for the jQuery slideshow on the home page
jquery.cycle.all.js: the jQuery slideshow tool for the home page
|/js/lightbox||This folder contains all the files for the jquery lightbox popup (on the main product page, when you click a thumbnail)|
|/phpsearch_files||This folder contains everything required for the php website search tool to work|
|/simplecart_files||(php version only) This folder contains everything required for the simple php shopping cart to work|
|_footer.php||(php version only) this file contains everything in the website footer.|
|_header.php||(php version only) this file contains everything in the website header (logo, menu, etc..) If you edit this file it will change on every php page.|
|about_us.html||Sample inside page including a tick list item and a table style you can re-use.|
|contact.html||Design for the contact page including a working php contact form|
|formsubmit.php||The file that processes the contact form and emails you (PLEASE OPEN THIS FILE AND SET YOUR EMAIL ADDRESS AT THE TOP!)|
|index.html||The template for the home page|
|product_full.html||Product layout for when your view more about a product|
|collection.html||List of products for sale.|
|sitemap.php||A dynamic page that automatically shows all the pages in your website.|
|search.html||A dynamic page that controls the "search" box and search results on your website.|
|thankyou.html||The page displayed after the contact form is submitted|
This theme is a fixed layout with 3 layers (divs) of background images. This ensures the design tiles correctly in every direction.
The current logo size is 228px wide by 73px high.
If you would like to resize the logo, change the width and height in the source code to match your new logo size:
<img src="images/logo.png" width="228" height="73" border="0" alt="Logo" />
- Menu Change:
The menu is built using a list styled with css. To change the names of the buttons simply edit what is in the <li></li>.
For example: change Home to what you want to appear on the button, change the link to the file name of the page you are linking to.
- To add a new button simply add a new <li></li> like this:
<li><a href="newlink.html">New Link</a></li>
- To change the font, color, size of the menu:
Open the "Styles.css" file and go to line 170, you will see all the menu css styles from there onwards.
The styling is all done through the #navigation tag, you will see the font color and size, you can change these to what you want.
The CSS for this template is all in one file named styles.css. Each section of the website is separated by a comment in this order:
|/*Template Layout*/||This has the body, link colors|
|/*Background graphics*/||All the css for the pictures in the background|
|/*wrapper*/||Width and centering the design on the page.|
|/*header*/||The header, logo and blimp.|
|/*menu*/||the main menu across the top of the website|
|/*Cart box*/||box for the shopping cart on the right of the menu, optionally remove its contents and put in a phone number.|
|/*special fonts*/||The css to use a special font not found on everyone's computer|
|/* General Content*/||Headings, horizontal rules|
|/*footer*/||Text at the very bottom of the website containing the copyright.|
|/*home content*/||the styles for the home page|
|/*product page*/||CSS for laying out the products|
|/*product full description*/||CSS for laying out the full product description, and tick list.|
|/*about*/||About page css|
|/*Contact Page*/||Contact form and layout for phone numbers|
The site structure is pretty straight forward, comments are throughout the CSS file to help you know what each part does.
The main sections of the design are in an id="container", this holds the site together and centers it on the page.
The id="header" includes the logo and menu.
You will notice the menu and titles on the website uses a non-standard font called "Walkway". This font is included in the package. The font for the logo is http://www.dafont.com/sunshine-poppy.font which you can download from that website.
A PHP site map has been included, this page automatically displays every page in your website as a list. It's great for search engines and helps users navigate your website. On line 66 type the extensions you want to display, like .html or .htm or .php, this only supports 1 type of file extension.
The shopping cart included is this one: http://codecanyon.net/item/simple-php-shopping-cart/88625?ref=dtbaker you can read the comments, features, and try the stand alone version of the shopping cart there. You can also ask any shopping cart specific questions on that item, rather than on the theme page.
The shopping cart is a simple shopping cart. It requires PHP5 on a Linux hosting account. I have not tested other hosting accounts. It does not have any database back end, it does not record a history of sales, it does not allow registration. It basically allows people to add a product to a cart, and pay for it. It works GREAT for simple websites that have less than 20 products and need to get up and running quickly. To add a new product to the shopping catalogue, you need to copy and paste html code onto the page (just like placing a widget or youtube video onto your website). There is no easy administration area for adding / removing / modifying products. This only supports PayPal, Google and Bank Transfer payment options. I will not add other payment options, please don't ask for Authorize.net or any others. Again, this is a simple shopping cart, if you can't see a feature in the demo, then it doesn't exist, so please don't ask me about it. If you need advanced shopping cart features then this shopping cart is not for you, you will have to use one of the more advanced free shopping carts out there like oscommerce, prestashop, or magento.
How to add a new product to your website: First go to the shop admin page by going to http://www.yourwebsite.com/cart.php?simpleshop_admin (change to your website address) and then enter the default password: password (you can change this later) Follow the prompts on the screen to change settings and add a new product. There is further help documentation in the admin page which you can read.
The search engine used in this website theme is http://codecanyon.net/item/php-search-engine/89499?ref=dtbaker you can read the comments, features, and try the stand alone version of the search tool there. You can also ask any search tool specific questions on that item, rather than on the theme page.
The search tool requires PHP5 on a Linux hosting account with cURL enabled and no safe mode (majority of hosting accounts should be fine). I have not tested and I cannot guarantee it will work on other hosting accounts (example: windows server/IIS).
To manage the search tool, go to http://www.yourwebsite.com/phpsearch_files/admin.php and follow the settings. The defaults should be fine for most people.
I've included 5 photoshop files for each color with this theme:
The photoshop files contains clearly named folders for each part of the website.
How to edit & replace images:
The Photoshop documents have the slices required to build the layout. Pay special attention to the images that are saved as PNG, these ones need to be transparent and have nothing behind them when you save.
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.