“Brave Zeenat” Documentation by “Amar Saleem” v1.0


“Brave Zeenat”

Created: 06/02/2010
By: Amar Saleem
Email: design@dizenoco.com
Website: Dizeno Co

Thank you for downloading my theme. On this page I will try to list all possible information to help you customize this theme according to your needs. 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. Page Structure
  2. CSS Files and Structure
  3. JavaScripts & Plugins
  4. PSD Files
  5. Sources and Credits
  6. Configure Slider at Homepage
  7. Twitter Feed Configuration
  8. Top Navigation
  9. Using Custom Fields
  10. Using Services Page Template

A) Page Structure - top

This Wordpress theme is a fixed layout with a mix of single and two column templates. The sidebar is located on the right except for Home Page, Portfolio Category pages and Full Width Pages. We will talk about them later.

Home Page

The home page (index.php) consists of 4 sections.

  1. Header
  2. Slider Area
  3. Bottom Area with Slider Navigation buttons, Twitter Feed and Search Box.
  4. Footer

Index Page

Following are the templates (for categories and pages) included in this theme.

  1. Portfolio Category (category.php & archive.php): Displays each post's thumbnail and title only. Thumbnails are linked to full scale image, displayed through FancyBox overlay.

Portfolio

  1. Corporate Branding Category (category-corporarte-branding.php): Displays each post with a medium size thumbnail, post title, post meta and excerpt.
  2. Blog Category (category-blog.php): Displays full post content with medium size thumbnail, post title and post meta.
  3. Services (services.php): A template specifically designed for Services section of the site. It contains three tabs; service details, random sample work and hire me contact form.

Services

  1. Contact Page (contact-page.php): A Page template with a default contact form. Just create an empty page and select this template to create a simple contact form.
  2. Full Width Page (fullwidth.php): A fill width page without sidebar.
  3. Page (page.php): Standard page template with sidebar. Simply create a page without selecting any template.
  4. Search, Tag & 404 (search.php, tag.php, 404.php): Page templates to display search results, tags and error page.

B) CSS Files and Structure - top

I'm using two CSS files in this theme. [style.css, and ie-7.css] Both are located in the root of theme folder. As the names suggest, first one is the standard stylesheet while the ie-7.css contains fixes for styling in Internet Explorer 7. Both stylesheets have the following structure:

  1. Universal Settings: Contains standard body and container settings
  2. Typography & General Styles: All headers, text, link and meta styles are listed here
  3. Header & Logo: Header and logo :)
  4. Top Navigation Columns: Styling for three columns at the right of logo in header
  5. Home Slider Styles: The slider that runs on the home page
  6. Post Styles: Most of the content styling is covered in Typography, the rest of post specific styling is here
  7. Sidebar Styles: The lists, widgets and image ads
  8. Comments Styles: Comments Styles :)
  9. Portfolio Styles: The portfolio page (the one with 10 thumbnails) is styled in this section
  10. Services Page Navigation Tabs: The Services pages with 3 tabs are styled in this section
  11. Full Width Page Styles: For a simple, sidebar free page
  12. Footer: Copyright notice and css and xhtml validation images
  13. Twitter Feed on Homepage: The way its displayed
  14. Search Form, Search & Tags Page Title: Styling for search form and titles for Search results page and tag pages
  15. Page Navi Containter & WP PageNavi Styles: Styles for the page numbers at the bottom of category, search and tag pages.

C) JavaScripts & Plugins- top

This theme imports these Javascript files & Plugins.

  1. jQuery: (jquery-1.4.min.js)
  2. Jquery Tools Scroll
    1. This javascript file is what makes the slider on the home page go round. Its located in the "js" folder and called in the header.php.
  3. Jquery Tools Tabs
    1. This javascript file is working behind those three tabs in services page templates. It is located in the "js" folder and called in the header.php.
  4. Limit Post plugin
    1. This is a cool plugin to control the number of characters display for post content on home page and archive pages. You can find this code in index.php, archive.php, tag.php, search.php, services.php etc.
    2. <?php if (function_exists('the_content_limit')) { the_content_limit(350, ""); } else { echo 'You have not uploaded and acivated the limit posts plugin. This is required.'; } ?>
    3. 350 is the character limit.
    4. The code will first check if the plugin has been installed or not, if not, it will display the message ... You have not uploaded and acticated the limit post plugin. This is required. ... So it it is imperative that you do so :)
  5. WP-pagenavi Plugin
    1. This is another handy plugin to display page numbers in style at the bottom of your archive pages (archive.php, tag.php, search.php)
    2. Install the plugin and activate it first.
  6. timthumb.php
    1. One of my all time favorites. This little file, placed in the root of the theme directory is what controls the post thumbnails.
    2. It uses the custome field "Thumnbail" to get the post image attachment.
    3. You can define width and height of the thumnail to be displayed inside the code.
    4. <?php $thumbnail = get_post_meta($post->ID, 'Thumbnail', true); ?>
      <?php if($thumbnail !== '') { ?>
      <a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>">
      <img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $thumbnail; ?>&amp;h=200&amp;w=537&amp;zc=1" alt="<?php the_title(); ?>" /></a>
      <?php } ?>
    5. TimThumb script is created by Tim McDaniels and Darren Hoyt with tweaks by Ben Gillbanks
      http://code.google.com/p/timthumb/.
  7. FancyBox
    1. This plugin overlays the full size image when you click on the thumbnail image in Portfolio category as well as on a single page.
    2. It is located in /js/fancybox folder and is called in the header.php
    3. Images and css file (jquery.fancybox-1.2.6.css) for this plugin is located in /js/fancybox.
 

D) PSD Files - top

I've included these psd files with this theme; all these files are placed in the folder called "psd".

  1. The main Template
    1. You can change the basic graphic layout and background through main-template.psd
  2. The logo
    1. There is enough space in the header for any logo to fit in. Replace the existing logo with your own. If you want to edit the existing logo, feel free to do so by editing the file logo.psd.

    2. The fonts used in logo is Arial and Arial Black, which are pre-installed on almost all computers.
    3. If you drastically change the size of your logo, you will need to make changes to header and logo divs in style.css

  3. Homepage Buttons
    1. Those five buttons below the slider, which allow you to navigate through the slider can be edited using homepage-buttons.psd

    2. If you are ok with using 5 buttons then keep the size of the buttons as is, which is 180x65px. However if you want to add a button or two or reduce the number of buttons then you would want to change the width of the buttons to accomodate the width of the bottom container which is 900px.

  4. Page Headers
    1. This file (page-headers.psd) contains the headers for these pages: Hire My Services, Contact Me, Page Not Found, About Me, Thank You, Ad Campaigns, Content Management, Graphic Designs, Online Marketing and Web Development..

    2. Just make sure to keep the dimensions of the image at 900 x 200. If you want to increase or decrease the height of the header image, just make sure that you change the container height in the css as well. You will need to adjust the height of the #panes div in Services Page Navigation section of the style.css.

  5. Portfolio Title Background
    1. A small file (portfolio-title-bg.psd) to be used to create category title background on the portfolio page.
  6. Service Page Buttons
    1. Source file for three buttons used at the bottom of the service page to navigate through the tabs . Edit them in service-page-buttons.psd

E) Sources and Credits - top

All the images you see in demo site are purchased by me to use on my website. They are NOT included in the theme and are for demo purpose ONLY. Other external resources used in the development of this theme include:

  1. timthumb.php
    1. TimThumb script created by Tim McDaniels and Darren Hoyt with tweaks by Ben Gillbanks
      http://code.google.com/p/timthumb/
    2. MIT License: http://www.opensource.org/licenses/mit-license.php
  2. Jquery Tools (Scrollable and Tabs scripts)
    1. I have used two scripts from Jquery Tools (http://flowplayer.org/tools/index.html)
    2. Scrollable is used at homepage and Tabs is used in Service pages.
    3. You can find original code and documentation at Jquery Tools website (http://flowplayer.org/tools/index.html)
  3. WP-Pagenavi Plugin
    1. This plugin is available for free download at http://lesterchan.net/portfolio/programming/php/
  4. Limitpost Plugin
    1. This plugin is available for free download at http://labitacora.net/comunBlog/limit-post.phps
  5. FancyBox
    1. Fancybox is available at (http://fancybox.net/)

Please note that all these scripts and plugins are already avialable in theme directory.

F) Configuring Slider at Homepage - top

You can do two things on home page.

  1. Define how many and which categories you want to display on your homepage.
  2. Define how many posts for each category will show in the slider.

In the demo I have used 5 categories (Websites, Print Media, Corporate Branding, Logos & Icons and Themes & Templates) and last 3 posts for each category are displayed in the slider. To define your categories and number of posts, do the following:

  1. Open index.php file in a text editor. There are 5 page sections here marked as <!--page#1--> <!--page#2-->and so on. Define one category in one section. For example, in Page # 1, I have listed category 'websites' and I am showing 3 posts from that category. See the code below. Repeat this for all sections.

Slider Configuration

  1. If you added or reduced the number of pages, then make sure you do the same for navigation buttons as well. Below I have listed 5 buttons, each corresponding to the above pages in sequence.

Slider Navigation

Thats it :)

G) Twitter Feed Configuration - top

This is simple. Just ad your twitter username where my twitter username (amirsaleem) is displayed right now.

Twitter

H) Top Navigation - top

Due to design and space considerations, I have manually listed some selected categories (and page links such as Contact Us) on the home page. This you will have to do once, enter the category names and respective short slugs and link them to their pages.

  1. Open header.php and edit the following code to list your categories and pages

Top Navigation

I entered an invalid link for Subscribe for Updates in order to display the 404 page.

I) Using Custom Fields to Show Post Images - top

The images you see associated with each post or page are defined while writing the post/page. You can do it afterwards too. Simply define a custom field called "Thumbnail" and enter the URL of the image you want to associate with that post.

  1. You have to make sure that the image is placed in a directory on your website and not coming from any other source.
  2. Also, the ideal dimensions for your images would be 900x300 pxs.

J) Using Services Page Template - top

There is a services page template included in the theme to display your Services. You can find this file titled services.php.

  1. This template consists of 3 tabs.
    1. Tab 1 shows text of your service details.
    2. Tab 2 displays a random post to show sample work
    3. Tab 3 has a contact form for those who are interested in hiring your services.

Contact Form

In the contact form part of the services.php, you will need to replace the existing email address with your own where you would want to recieve emails.

Once again, thank you so much for downloading 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.

Amar Saleem

Go To Table of Contents