“Shop Star” Documentation by “Hayley Crook (dtbaker)” v1.0


“Shop Star - HTML/PHP Template”

Created: 18/05/2010
By: Hayley Crook
Email: themeforest@blueteddy.com.au

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!


Table of Contents

  1. File Options
  2. File Structure
  3. HTML Structure
  4. CSS Files and Structure
  5. Font Face - Special Font
  6. Site Map PHP
  7. Shopping Cart
  8. Search Tool
  9. PSD Files
  10. Sources and Credits

A) File Options -

There are 4 options with this theme:

  1. Normal Static HTML Version (Pink Color)
  2. Normal Static HTML Version (White/Silver Color)
  3. PHP Version (Pink Color)
  4. PHP Version (White Color)

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.

B) File Structure -

/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
/js pngfix.js: The javascript files used for displaying PNGs in IE6
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
hide-select.js: javascript for displaying the drop down menu in IE6 correctly
jquery.cycle.all.js: the jQuery slideshow tool for the home page
main.js: various javascript functions for displaying the website correctly.
/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

C) HTML Code Structure: - top

This theme is a fixed layout with 3 layers (divs) of background images. This ensures the design tiles correctly in every direction.

- Logo:
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.

<li><a href="index.html">Home</a></li>

- To add a new button simply add a new <li></li> like this:

<li><a href="index.html">home</a></li>
<li><a href="products.html">products</a></li>
<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.

D) CSS - top

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.

E) Font Face - Special Fonts - top

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.

F) Site Map - top

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.

G) Shopping Cart - top

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.

H) Search Tool - top

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) PSD Files - top

I've included 5 photoshop files for each color with this theme:

  1. Home - The main layout, including slices to help you build it.
  2. Collection - listing of products for sale
  3. Contact - Form & contact information
  4. Product Full - Layout for the product
  5. Bg - the tiling image that will be your page background 2 slices, top one is to repeat-x along the top of the site. The bottom one to repeat to fill in the rest.

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.

  1. First simply make the changes in photoshop
  2. Turn on the slices (view > show > slices) they appear as blue boxes
  3. Some slice boxes overlap, you can move slices into the background or bring them to the foreground using the slice options in the top left of the tool bar.
  4. You may need to hide some of the backgrounds and text when saving certain images. Use the existing images as a guide.
  5. To export the images go to: File > Save for Web, click on the slice you want to export and click save at the bottom of the screen, all the correct image settings will already be there, overwrite the originals in the images folder. 

J) Sources and Credits - top

I've used the following images, icons or other files as listed.

Fonts:

Vectors:

Photos:


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.

dtbaker

Go To Table of Contents