Sport Grunge WordPress Theme Documentation

Download Sport Grunge WordPress Theme here: http://themeforest.net/item/sport-and-grunge-wordpress-shop-newsletter/237444
Support Forum: http://dtbaker.net/forums/forum/sport-grunge-wordpress-theme/
FAQ #1: http://dtbaker.net/envato/documentation-and-faq/?faq_product_id=7
FAQ #2: http://themeforest.net/item/sport-and-grunge-wordpress-shop-newsletter/237444/support

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our support forum by clicking here. Thanks so much!

Table of Contents

  1. Installation
  2. CSS
  3. Special Font
  4. Rounded Corners
  5. Setting up the Home Page
  6. Setting up the Contact Page
  7. Sidebar Widgets/Full Page
  8. How the Shop works
  9. Setting up the Shop
  10. Setting up the Main Menu
  11. Email Newsletter
  12. WordPress widgets
  13. PSD files
  14. Credits

A) WordPress Installation – top

Installing the theme is easy. Login to your wordpress blog, click the “Appearance” tab, click the “Themes” tab, click the “Install Themes” tab, click the “Upload” button, click “Browse” to select a file. Select the zip file sport_grunge_wordpress_theme.zip that comes in your download. Click “Install Now”.

Important: Once the theme is uploaded and installed, click on the new “Options: General” menu item underneath “Appearance” to complete the installation.

I also strongly recommend you install the re-captcha plugin for wordpress (available here:http://wordpress.org/extend/plugins/wp-recaptcha/) this will give you re-captcha spam prevention on the contact page, the product review page, and the product ask-a-question page.

Default content: The default content file is located here: http://tf.dtbaker.com.au/wordpress/sport_grunge/sport_grunge.xml (right click – save as)


B) CSS: – top

The CSS for this template is all in two files. The main CSS file is called styles.css
Each color has its own stylesheet..


C) Special Fonts – top

This site is setup to use Cufon and all google font options. You can change these font options in the “Appearance” > “Options: General” area. Try out the different available fonts to see which you like best


D) Grunge Borders– top

Photos in this website are using Javascript and CSS classes to apply a pre-made grunge border to your images. Follow this screencast for adding the “grunge” border to images: http://www.screenr.com/UFi

Steps to adding a 300 pixels wide border to any image in your website:

  1. In wordpress click on your photo
  2. Click the image settings icon
  3. Go to the advanced settings tab
  4. In the CSS class box, add on this code to the end of the existing text. _grunge_border_300
  5. click update, save your post and view your website in the browser to see the change.

There are 2 sizes available 200 x 144 pixels and 300 x 214 pixels.

Grunge border transparent PNG
it gets overlayed onto gallery images automatically.
Photo that is overlayed
gallery_photo_border
photo1_gallery
Grunge border transparent PNG
add class _grunge_border_300 onto any image that is 300 pixels wide. 
Photo that is overlayed
photo_300_borderphoto_300

 


E) WordPress Home Page – top

Setting up the wordpress home page is easy. Simply go to the “Appearance” » “theme header” are in your WordPress admin console. Here you will be able to upload a new PNG logo for the top of your website. The current logo size is 363 x 44 px, I recommend using a transparent GIF or PNG.

The phone number at the top of the website are also controlled in the “Appearance” » “theme header” section.


F) WordPress Contact Page – top

The contact page allows your customers to email you through the website. The settings page allows you to enter (optional) SMTP details for email delivery incase your web provider has normal php mail() issues.

On this page you can also enter the email address that contact form will be delivered to. You can enter multiple email addresses here separated by a comma (,) if you wish the form to go to more than 1 person.


F) Sidebar Widgets/Full Page – top

To change available widgets please navigate to the desired page and use the “Left/Right Column” menu at the top. You can change the sidebar to be on the left, right or hidden:


G) How the shop works – top

The preferred shop here in Jigoshop. When you install this theme you will be prompted to install Jigoshop. Instructions on how to use jigoshop are available here: http://jigoshop.com/.


H) WordPress Shop – top

Support for the wordpress shop Jigoshop is now available via the jigoshop website: http://jigoshop.com/


I) WordPress Main Menu – top

The menu in this theme is controlled by standard WordPress menus. Please go to the “Appearance” > “Menus” tab to setup the menu. Consult wordpress documentation on how to setup a menu. (note: you can use custom shop categories in this menu as well!)


J) Newsletter – top

The newsletter plugin (http://codecanyon.net/item/wordpress-email-newsletter-plugin/149180) comes with this wordpress theme. Please visit the newsletter support forum if you have any questions: http://dtbaker.com.au/support-forum/categories/wordpress-newsletter-plugin.

Go to plugins, click add, click upload, and upload the wp3newsletter_plugin.1.2.zip file. Once it’s uploaded, click activate. Then click on the ‘Newsletter’ tab on the left and follow the steps.

To adjust the newsletter template, look in this folder: wp-content/plugins/wp3newsletter/ext/templates/sport_grunge
You might want to adjust the newsletter banner located here: wp-content/plugins/wp3newsletter/ext/templates/sport_grunge/images/newsletter_header.jpg

There is a photoshop file with the newsletter header in it /photoshop/newsletter.psd There are a group of folders for each color, turn on the colour you need in the background, change your logo and phone number and ‘save for web’ the header slice.


K) Widgets – top

Click on Appearance > Widgets. There is a “Product Categories” widget there. This will display categories from your shop. There is also the “Your Cart” widget which will display the number of items in the customers shopping cart and allow them to checkout.


L) PSD Files – top

I’ve included photoshop files with this theme, a home page, alternative home page, photo gallery page and button & icons files. All files include the slices to help you edit it. The photoshop file 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.

 


M) Sources and Credits – top

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

Java Script:

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

Fonts:

  • Logo font: UrsaSerif – : http://www.dafont.com/ursa-serif.font
  • Menu & title font: Copse – http://code.google.com/webfonts/family?family=Copse#download
  • Extra font: I used Arial for the standard text.

Vectors:

  • Star – standard photoshop shape

Photoshop Brushes:

  • http://akumac.deviantart.com/art/Trash-Grunge-Photoshop-Brushes-25101917
  • http://eliburford.deviantart.com/gallery/#/dzbodu
  • http://browse.deviantart.com/?qh=&section=&q=Grunge+Corner+Pack#/dl74py
  • http://browse.deviantart.com/?qh=&section=&q=headone#/d1zotvj

Photos:

  • skate ramp – http://www.flickr.com/photos/22806008@N07/2385411389/
  • boards – http://www.flickr.com/photos/50852241@N00/3372329798/
  • air – http://www.flickr.com/photos/9224879@N06/4826257129/
  • ramp 2 – http://www.flickr.com/photos/57389319@N00/246878324/

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *