“Swagger” Documentation by “Outer Spice Web Company” v1.0

Swagger Logo

Created: 2/21/2012
By: Outer Spice Web Company
Email: bmac@outerspiceweb.com

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 user page contact form here. Thanks so much!

Table of Contents

  1. Compatibility
  2. HTML Structure
    1. Single Pages
    2. Archive Pages
  3. CSS Files and Structure
  4. JavaScript
  5. PNG Files
  6. Sources and Credits
  7. PHP Code Explanation

A) Compatibility - top

Swagger is built with valid XHTML. The only XHTML errors are on the single posts page and are due to the social share buttons which have supplied their own code and is not due to the way Swagger is built or caused by any code used in Swagger. It is certified compatible with Google Chrome, Mozilla Firefox, Safari, Opera, and Internet Explorer 7+. Here are a few very minor style differences that happen in IE:

B) HTML Structure - top

Swagger is a 960px fixed-width theme with indented and intuitively spaced HTML. You will find in-line commenting allthroughout the HTML so that you can always figure out what section of the layout you are in. The backbone of every page is as follows:


<body>

    <div id="top-menu-wrapper">
    
        ...page menu, social links, search box...
    
    </div>
    
    <div id="page-wrapper">
    
        <div id="logo-bar">
        
            ...logo, main menu, header ad...
        
        </div>
        
        <div id="content-wrapper">
        
            <div id="cat-menu-wrapper">
            
                ...category/review menu...
            
            </div>
            
            <div id="latest">
            
                ...latest slider...
            
            </div>
            
            <div class="main-content-left"> ...or... <div class="main-content"> (for full-width pages)
        
                ...all page content, including featured slider, post loop, and article slider...
                
            </div>
            
            <div class="sidebar"> (only applies to non full-width pages)
            
                ...all sidebar widget content...
            
            </div>
        
        </div>
        
        <div id="footer-wrapper">
        
            ...footer widgets, copyright bar...
        
        </div>
    
    </div>

</body>

In order to create this HTML structure, each page includes the header.php, footer.php, and sidebar.php files (or sidebar-full-width.php, depending on which layout it is). The rest of the files in the inc/ folder are included in various templates, and commented in each of those places in the code. For instance, the article-slider.php and latest.php files are used on just about every page, but the spotlight.php for instance is only used on the index.php and index-full-width.php.

C) CSS Files and Structure - top

Almost all theme style is located in style.css, which is commented and well-organized. There are only two exceptions to this: 1) IE specific css fixes (located in the css/ folder) and 2) jQuery plugin default styles (located in the js/js.css file). Here is the layout of the style.css file:

        
/*************************************************
css reset and general setup
*************************************************/
The CSS reset which clears out all browser pre-defined styles for elements 
        
/*************************************************
ratings
*************************************************/
How to display the ratings (stars, numbers, letter grades, and percentages) 
        
/*************************************************
section headers
*************************************************/
The light or dark headers that separate content sections 
/*************************************************
top bar
*************************************************/
The dark grey bar full-width bar at the very top of the page 
/*************************************************
header area
*************************************************/
The logo, main menu, and header ad section directly below the top bar

etc, etc.

D) JavaScript - top

Swagger imports 5 javascript files:

  1. plugins.js: All jQuery plugins used by the theme, including jQuery UI, Nivo Slider, etc. This file is minified, so in order to modify this file use the unminified version plugins-expanded.js to make changes and then minify it into plugins.js.
  2. custom.js: All custom javascript functions used by the theme. This file is also minified and is accompanied with the unminified version custom-expanded.js.
  3. https://apis.google.com/js/plusone.js: Google +1 button (external js file imported in the footer)
  4. http://assets.pinterest.com/js/pinit.js: Pinterest Pin It button (external js file imported in the footer)
  5. http://platform.tumblr.com/v1/share.js: Tumblr social button (external js file imported in the footer)

Following is a list of jQuery plugins used in the plugins.js file:

  1. Viewport - jQuery selectors for finding elements in viewport
  2. Mosaic - Sliding Boxes and Captions jQuery Plugin
  3. jQuery EasIng v1.1.2
  4. jQuery jCarousel plugin
  5. jQuery Cycle Plugin (with Transition Definitions)
  6. jQuery Nivo Slider v2.7.1
  7. Superfish v1.4.8 - jQuery menu widget
  8. Twitter - jQuery latest Tweets plugin
  9. Flickr - jQuery Flickr photos plugin
  10. ColorBox v1.3.16 - lightbox plugin
  11. Color picker - jQuery color palette picker

Note: The settings for all jQuery plugins are located in the js/custom-expanded.js file. An explanation of what each setting does is commented in-line. You should only ever need to edit the javascript js/custom-extended.js file, and make sure after you do edits that you minify it into the custom.js file and upload that to your server using a service such as this: http://www.minifyjs.com/javascript-compressor/, since the theme only pulls in the js/custom.js file. For instance, if you want to change the transition method used in the "Latest" slider, you would adjust this code in the js/custom-expanded.js file:

//latest slider	
jQuery(function() {
    jQuery(".latest-slider").jCarouselLite({		
        ...
        easing: "easeInOutExpo",
        ...		
    });	
});

You could change it to something like this instead:

//latest slider	
jQuery(function() {
    jQuery(".latest-slider").jCarouselLite({		
        ...
        easing: "easeInOutBack",
        ...		
    });	
});

And then you would minify it and overwrite the js/custom.js file using a compression service such as the one listed above.

E) PNG and PSD Files - top

Every image used in the Swagger theme has a corresponding layered PNG file located in the main Swagger-Theme folder that you downloaded from ThemeForest, inside of the PNG folder. Look in the source of the code to find the image that you want to edit, and find the corresponding image file located in the PNG folder. Open the file in an image editor that is capable of editing PNG files, such as Adobe Fireworks, edit the file, and export the file to the images folder inside of the swagger theme folder (located inside the main Swagger-Theme folder that you downloaded from ThemeForest).

Additionally, to find the image you wish to edit using a more visual approach, open the PSD folder inside the main Swagger-Theme folder that you downloaded from ThemeForest and open the file that corresponds with the page that contains the image you wish to edit. Then, export the image as a PNG file and place it in the images folder inside of the swagger theme folder (located inside the main Swagger-Theme folder that you downloaded from ThemeForest).

F) Sources and Credits - top

Swagger uses the following images, icons or other files as listed. To see a full list, including licensing for all images used in the live demo, see the Credits page here: http://demos.brianmcculloh.com/swagger/credits/.

G) PHP Code Explanation - top

While the files in the theme are PHP files, there is barely any PHP code actually contained in the theme. The only places you'll see PHP are when files are included inside other files (this is always commented in-line so you know what's being included).

Once again, thank you so much for purchasing this theme. We would be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our 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.

Outer Spice Web Company

Go To Table of Contents