shared on wplocker.com
Dear buyer,
First of all, let me thank you for showing your trust in my theme and purchasing it. I have handcrafted this document to lessen your efforts in configuring and using this theme seamlessly. If you find any bug or issue which is beyond the scope of this documentation file, feel free to contact me through my Themeforest profile page here. Thanks so much!
Cruz theme for Wordpress is a blend of clean, modern and minimalist design style, exclusively crafted for modern business requirements and corporate web sites. You can equally use this theme for personal blogging, portfolio and freelance business ventures. With genuine features and supportive documentation, the theme is easy-to-use for beginners as well as developers. The theme also supports language localization, so that you can easily convert message strings into your own language. The theme is built on Wordpress v3.1.2 with latest functions and code. Without much delay, let's dive into the installation.
If you have not set up your Wordpress installation yet, you can grab a copy of latest Wordpress version here.
Next, go through the installation instructions inside readme.html file and set up your Wordpress installation.
In order to install Cruz Theme, follow these steps:
1. Extract your download package .zip file and look for the folder named "cruz".
2. Next, upload this folder to http://yourdomain.com/your_wordpress_dir/wp-content/themes/ directory via any FTP program like filezilla or CuteFTP.
Note: Do NOT install this theme directly via Wordpress Theme install option.
Speed Install: To save time, zip your "cruz" folder and upload via FTP or File manager of your website Control panel. The upload will take only a minute on broadband line.
Next, you can extract the folder inside your file manager of Control panel, and delete the .zip file.
Timthumb is a php script used to resize and crop images on-the-fly. i.e. We do not have to upload multiple sized images for our website. If we provide a largest size image, this script will automatically create instances of different sized images, as directed in the code.
For proper functioning of this script, we need to set permissions for the following files and folders:
wp-content/themes/cruz/scripts
wp-content/themes/cruz/scripts/cache
wp-content/themes/cruz/scripts/timthumb.php
You can set permissions inside Control Panel > File Manager of your web hosting account.
Change the permission of the "scripts" folder to 755
Change the permission of the timthumb.php file to 644
Change the permission of the "cache" folder to 777
If you are using a custom folder for images, change its permission to 777 as well. However, this will not be required as we are going to use Wordpress "Add Image" option which stores all images in ‘Uploads’ folder.
We have set files and folders. Let’s now activate the theme. Log into your Wordpress admin using the following URL: http://yourdomain.com/your_wordpress_dir/wp-login.php
Next, go to Appearance > Themes. Here, you should see a thumbnail of Cruz theme. Click on the ‘Activate’ link to activate this theme.
After activation, preview this theme by right-clicking on your blog name (top left corner) and selecting "Open in new tab". Your theme should look very similar to the image below:
Looks empty and weird? No problem. It will start taking shape as we configure our theme in later stages. Let’s configure some basic things.
As of Wordpress version 3.1, you will see an Admin Bar at the top of your theme page. You can disable it inside Users > Your Profile link, as shown below:
Next, scroll down and click on "Update Profile" button to save the changes. The admin bar will hide now.
There are a few different ways in which you can set up your home page. For example, you can have content with sidebar, a blog page with sidebar, or a full width page. By default, your home page will show blog posts. So, we will see how to set up a full width page as Home Page.
For that, go to Pages > Add New.
Inside the title field on top; enter a title for your home page. Say – "Home".
Next, scroll down to "Page Options" section and select "none" from Sidebar Placement drop down.
Leave everything empty for now and click on "Publish". (We will configure page contents later in this documentation).
Next, we will set up this "Home" page as "Front Page". For that, go to Settings > Reading. Inside "Front page displays", select "A static page" and assign "Home" to "Front Page". Leave "Posts page" to none. Next, click on "Save Changes".
Now your site will show "Home" page as your front page. Check it by refreshing your site browser window. You will see an empty full width home page with no posts.
Before creating the slider, let's take a brief look at its working. The home page slider fetches image attachments from posts residing in a particular "Category" or a list of "Categories". These images are assigned to each post via "Featured Image" input field option.
So, before configuring the slider, we need to prepare some images, create a category, and publish some posts in it.
Image Preparation: The maximum possible width of any image we will use in this theme will be around 960px. So prepare some 4-5 images of 960px by any height and save them in web-optimized .jpeg or .png format on your hard drive. (These images will be cropped proportionally by timthumb php script on various elements of this site).
Create a category: Inside your Wordpress, go to Posts > Categories. Next, enter a name for the category. Say – "Featured".
Leave rest of the fields to default, scroll down and click on "Add new Category".
Your newly created category "Featured" will appear on the right side.
Next, hover your mouse on the category name and watch the link in status bar. You should see something like this:
&taxonomy=category&tag_ID=XX&post_type=post
This XX is the category ID of "Featured". Note down this ID as we will use it for configuring the slider.
Prepare Posts: For preparing posts for slider, go to Posts > Add New.
Enter a title for your post. Next, click on "Add an Image" icon to upload an image for this post.
In the upload box, use "Add media files from Computer" section and click on "Select Files". Browse your image file on hard drive (the 960px image which we created earlier).
Once the upload is done, the resulting window will show image details.
Copy the File URL. Next, click on "Save all changes" and close the window.
Okay, we are back to our post, (with image URL still copied). Inside the content editor, write your post content. (You can also write a custom excerpt for this post inside the excerpt area).
Next, scroll down to "Post Options" section.
Inside the "Featured Image URL" field, paste in the URL of your newly uploaded image. (The image that we just uploaded into the media library).
You can choose to hide caption for slider, create a custom HTML caption, manage custom links and choose to disable links on slide images using the options above.
Finally, select appropriate category – "Featured" from the "Categories" section on right side and click on "Publish".
Our first slide is published.
Repeat the above mentioned steps to publish more slides. Once you have handful of slides, you can configure slider via CRUZ Options Page inside Wordpress.
For that, go to Appearance > CRUZ Options. Next, click on the "Slider" tab, and fill up some basic information.
Enter a category ID of "Featured" or any category that hold posts for your slider. For example, let's provide "3". Next, provide a number of slides to show. We have provided "2" here.
Note: You can opt to show/hide a slider, choose between Nivo or Cycle slider, and control slider height too. For now, simply provide a category ID and number of posts to show. You can of-course play with the slider options later.
Next, scroll down and click on "Save changes" button to save the settings.
After saving the changes, return back to your site and refresh it. You should now see a slider with images in it. Something like the image below:
Important: You will need to create at-least TWO slides, so that slider can work.
Note: The page content is still empty. For that, you can use column short-codes via visual editor or any custom content to insert in to the Home Page.
For your convenience, I have created a set of dummy content for all the pages I have shown on live preview of this site. This dummy content can be found inside dummy_data folder of your theme. For example, if you wish to use dummy data for your home page, open home.txt file, copy all the text and paste inside the content editor of home page. Save the changes and you are done. Later on, you can replace dummy text with your custom text. I have also provided a sample data in .xml format. You can use wordpress importer to use that data as well.
Tip: While using the dummy data, you may need to replace image URLs with your own ones. i.e. the dummy data image URLs will point to my server, which you will need to change to yours by uploding images to your media library.
In later part of this documentation, we will see how to use layout short-codes to create a page content
At this stage, you are done with Home page and Slider configuration. Let's see how to use Nivo Slider:
In order to use Nivo Slider, you can follow these steps:
1. Go to Appearance > CRUZ Options page. Next, click on the "Slider" tab.
2. Select "Nivo" from Slider Type.
3. Scroll down and save the changes. That's all. Your site will now show a Nivo slider.
For setting animation effects and slider JS options, you can edit js/nivo_init.js file. For effect options and details, you can visit Nivo Slider Home Page.
The Slider images link to their permanent posts by default. You can choose to create a custom link or hide the link using the post options. For that, edit your post, scroll down to post options and use the sections, as shown below:
Inside "Slider image links to" field, you can enter a URL to which the image should link. Further, you can de-activate the link using the option "Do not link slide images".
Cruz comes with 4 different portfolio style templates to choose from. Once you have a set of posts, you can easily assign appropriate portfolio template to a page and use these posts. You can show posts from either one category or multiple categories.
Important: Before you start creating a Portfolio gallery page, make sure you meet the following requirements:
1. Create a category for portfolio and publish some posts in it. (For example, create a category called "web_design").
2. Each post in a portfolio category must have a featured image set via the "Featured Image URL" inside Post Options. (Just as we did for creating a slider post).
1. Go to Pages > Add New. Next, enter a title for your portfolio page, say "My Portfolio".
2. Enter some content for your page. This can be a heading or some description that should appear just above the entire image gallery.
3. Scroll down to "Page Options" section. Next, go to "Category for Posts" field, and enter the category ID of your portfolio posts.
4. Inside "Posts per page" field, enter a number of posts to show.
5. If you wish to hide portfolio titles, you can check "Hide Portfolio Captions" option.
Next, on the right side of page, select a Portfolio template from "Template" dropdown list.
Note: All the template names starting with "port" are the portfolio templates.
6. Finally, click on "Publish" to save all changes.
Tip: You can play around with different templates and check how they look.
Click on "view page" button to check your newly created portfolio page. In our example, we have chosen "port 3col wide", which looks like the image below:
Below is a quick reference to available portfolio templates:
| Template Name | Description |
| port 2col w/sidebar | A two columnar portfolio page with sidebar |
| port 3col wide | A three columnar portfolio page with full width |
| port 4col wide | A four columnar portfolio page with full width |
| port list style | A list style portfolio page with sidebar |
Note: You can create as many pages as you want with different or same portfolio styles. You can create different categories and assign those cat IDs inside the newly created pages.
The process of creating a Blog page is similar to what we did for Portfolio page. Here are the steps:
1. Go to Pages > Add New. Next, enter a title for blog page. Say - “Blog”.
2. Leave the content section empty, and scroll down to “Page Options” section.
3. Next, go to "Category for Posts" field, and enter the category ID of your Blog posts.
4. Inside "Posts per page" field, enter a number of posts to show.
5. Next, inside "Page Attributes" section, select "Blog Page" from the template dropdown list.
6. Finally, click on "Publish" button to save the changes.
That’s all.
So far, we have seen Home, Portfolio and Blog pages. Just one more page, and then we will populate our Navigation Menus.
Creating a Contact Page is again same as what we have done so far.
1. Go to Pages > Add New. Next, enter a title for contact page. Say - "Contact us".
2. Inside content editor, write some content that should appear just above the contact form.
3. Next, from the “Template” drop-down list on right side, select a template called “Contact Page” and click on “Publish” to save all changes.
This will create a contact form with ajax/php form validation.
In order to configure your email address, go to Appearance > Cruz Options > General. Next, scroll down and configure your email address and mail sent message, as shown below:
Finally, click on "Save Changes" to have these settings into effect.
Wordpress introduced a very useful feature "Menus" from WP 3.0 onwards. Cruz supports TWO menus - Primary Menu and Secondary Menu. The primary menu resides on the left-bottom side of header section, whereas, secondary menu floats to the right side. Let's see how to create these menus:
1. Go to Appearance > Menus.
2. On the right side, you will see a form for adding new menu. Enter a menu name; say "menu-1" and click on "Create Menu" button.
Inside "Theme Locations" section, choose your menu from "Primary Menu" dropdown list and click on "Save".
Next, scroll down to "Pages" section and select the pages you wish to show on menu. Click on "Add to Menu" button.
These pages will now appear on the right side.
Tip: You can drag menu items up-down to manage the order of appearance. You can drag them left-right to set as sub-page. You can also edit "Navigation Label" and "Title Attribute" if you wish to do so.
Finally, click on "Save Menu" on top right side. Your primary menu is created.
Similarly, create secondary menu, and allocate theme location to this menu.
Following the same process, you can add pages, categories or custom links inside this menu.
Note: Secondary menu is only one-level deep. i.e. it will not show any sub pages. The secondary level menu items will be hidden by default.
Cruz comes with simple theme options for basic settings and organization of your theme.
In order to configure theme options, go to Appearance > CRUZ Options. You will see FOUR different sections (in form of tabs). All these options have a description field along with them, let’s cover a brief introduction on each section, so that you get an idea what each section is meant for. Here we go:1. General
This section contains general settings for your theme. For example, in-built color schemes, custom Logo management, navigation menu settings etc.
2. Slider
This section covers all the Slider related settings. You can choose to hide a slider, show Nivo or Cycle slider, configure slider category etc. Most importantly, you have a useful option of setting a Slider height inside this section.
3. Single
This section covers settings for single post pages. You can opt to show author bio and related posts using this section.
4. Headings
Using this section, you can control fonts, colors and style for Headings throughout the theme.
Once you are done with settings, you can click on "Save Changes" button at the bottom of page. You can also reset all settings to default by clicking on "Reset all settings" button.
Widget area is a place where you can drag and drop widgets for your theme. Cruz supports SEVEN widget areas (One in header, one in featured, one in the sidebar, and four in the footer). Additionally, we have an option for creating unique widget areas for each page (if you wish to do so). This means, you can have different widgets on featured area, sidebar and footer for each page.
In order to access your widget areas, go to Appearance > Widgets. You will see SEVEN widget areas, as shown below:
These are default widget areas. i.e. If you do not create a unique widget area for a particular page, the theme will use these default widget areas.
Important: Please note that Blog related pages like single, search, author, archives, date, category etc will use these default widget areas. Unique widget areas are ONLY FOR PAGES.
Let’s have a quick look on each widget area.
Default Header Widget Area: The default widget area on Header Section.
Default Featured Widget Area: The default widget area on Featured Section.
Default Sidebar: The default widget area on sidebar.
Default Secondary Column 1: This is the first column on left-most side of footer section.
Default Secondary Column 2: This is the second column of footer section.
Default Secondary Column 3: This is the third column of footer section.
Default Secondary Column 4: This is the fourth column of footer section.
As I mentioned earlier, Cruz supports SEVEN unique widget areas for each page. As an example, let’s create unique widget areas for "About Us" page.
1. Go to Pages > Add New, and create a new page called "About Us".
2. Scroll down to "Page Options" section and check the exclusive widget area options, as shown below:
Finally, click on "Publish" to save the changes on this page. This will create SEVEN unique widget areas for "About Us" page.
Next, go to Appearance > Widgets. You should now see SEVEN more widget areas added into your theme. These widget areas will look as:
About Us Header Widget Area
About Us Featured Widget Area
About Us Sidebar
About Us Secondary Column 1
About Us Secondary Column 2
About Us Secondary Column 3
About Us Secondary Column 4
This way, you can create unique widget areas for individual pages. This option is not compulsory. You can either create a widget area for featured, or just for sidebar, or for all. The choice is yours.
Important: The full width portfolio pages have only footer widget areas. So, if you wish to create unique widget areas for wide portfolio pages, you should only create exclusive secondary area. These pages do not show sidebar.
Important: The Header and Featured widget areas are meant for "Search" widget or "Text Widget" without title. DO NOT use other widgets inside this area.
Now we have default widget areas and unique widget areas. Let’s have a look on our widgets.
Wordpress provides handful of useful widgets for your themes. Apart from these default widgets, Cruz comes with TEN custom widgets crafted for your needs.
In order to use these widgets, go to Appearance > Widgets. You will see custom widgets with "Cruz" name. Let’s have a quick look on each widget.
Cruz Categories: Use this widget if you wish to show a list of particular categories. For example, on home page, you may only wish to show categories such as "products", "news", "awards" etc. In such case, you can use this widget. Drag the widget into appropriate widget area and enter the category IDs separated by commas. These cat IDs will be excluded from the list, and rest of the available categories will be shown.
Cruz Content Slider: This widget can be used to generate a slide show of your custom HTML content. In most cases, this widget could be useful in showing Client Logos, testimonials, latest news etc. While using this widget, wrap each entry inside an <li> tag. An example usage is shown below:
<li>This is my first testimonial.</li>
<li>This is my second testimonial</li>
Cruz Flickr Widget: This is another useful widget to show your Flickr photo-stream on your website. You can display Flickr photos via a user, userTag, userSet, all or allTag. Drag this widget into your widget area and play with the available options.
Cruz Mini Slider: Use this widget to display a mini slide-show of your post images from a particular category. You can control animation options, speed, delay, number of slides and much more using this widget. Once you drag the widget into a widget area, you can go through the instructions and available options.
Cruz Popular Posts: Use this widget to display popular posts with thumbnails. The popular posts are chosen from most commented posts. You can also opt to hide thumbnails for popular posts.
Cruz Recent Comments: Use this widget to display most recent comments on your blog. This widget will show the comment, along with user gravatar and a link to the post which contains that comment.
Cruz Recent Posts: Use this widget if you wish to show your latest posts from a particular list of categories. For example, on a "News" page you may wish to show latest posts only from "News" category. Similarly, you may wish to show "Latest works" only from "Portfolio" category. At such stage, this widget comes in use. You can either include or exclude category IDs. Both options are available. For example, category IDs to include will be 3,4,6,8. And category IDs to exclude will be -3.-4,-6,-8.
Cruz Twitter Widget: Use this widget to display recent tweets from a particular twitter username.
Cruz Mini Folio: Use this widget to display a mini portfolio gallery on sidebar. This widget generates a grid of thumbnails from posts of particular category.
Cruz Social Icons: A social networking icons widget with 13 useful social icons. You can configure your social networking links, RSS etc via this widget.
As you work more and more on widget areas, you will get familiar with their usage. Let’s now proceed towards content and styling.
Cruz comes with handful of short-codes for layout and content formatting. These short codes are placed in form of buttons inside the "Visual Mode" of content editor. These short-codes include basic layout columns, tabs, accordions, toggles, lists, information boxes, pricing, tour, line separators, FAQ set and image frames. In order to use these short-codes, you would insert them inside the content editor of a post or page. Let's see how to do that:
Short codes can be inserted inside a post or page using the rich content editor. When you will add a new post or page, you will see a set of 16 short code buttons inside the "Visual Mode" of content editor, as shown below:
In order to use the short code, you will need to place your cursor inside the content editing area (at the point of insertion) and click on the short code button. Next, you can control parameters as directed by the short code. Although each short code button is self-explanatory, let's take a few examples so that you get familiar with their working.
1. Insert Layout Columns
You can insert a set of layout columns using this short code. For insertion, place your cursor inside the content editing area and click on the button as shown above. A modal window will open which will guide you for various parameters, as shown below:
First of all, you will need to specify whether you are using a "Full Width" page or a "Page with sidebar". Depending upon that, you can choose a set of layout columns from the options below. Let's pick a set of one_third columns on a "Page with sidebar". Finally, click on "Insert Columns" button.
As you can see in the image above, a set of three one_third columns is inserted. You can now start editing the content as shown with yellow circles.
Important: If you wish to add more columns, you will need to place the cursor at one complete carriage return (enter key), as shown below:
This method will apply for all short codes. i.e. each short code should be inserted at the next line (NOT on the same line). Adding a short code on same line may prevent them from working, or may result in to unwanted line breaks.
2. Insert image frames
This short code is very useful for inserting images and re-sizing them using the timthumb script. You can choose various border styles, manage image dimensions and enable prettyPhoto modal box using this short code. Below is a quick reference to the available options:
You can upload an image to the WordPress Media Library first, and then provide the image URL here. After selecting the options, click on "Insert image frame" to insert the short code.
Just as we saw in the above examples, you can insert
Each of these short codes have their own options panel that will take different parameters from you. You just need to keep one thing in mind - "Insert each short code on a next line".
There are a few short codes whose implementation method is slightly different than others. These are:
For using these shortcodes, you will need to select a bunch of text first and then click on the short code button. For example, let's convert a line of text into a "Quote". For that, select a line and click on the "Quote" short code:
After clicking on the "Quote" button, this line will be wrapped inside a short code, as shown below:
You can follow same procedure for Pullquote and Dropcap. In case of Dropcap, you will need to select the first letter and click on a "Dropcap" short code button. Once you try these short codes, you will get more familiar with their working.
There are situations when you may need to use shortcodes adjacently. Consider the following example:
[frame src="some_image_url" align="left"][dropcap]T[/dropcap]his is a testIn the above example, a left aligned image is inserted using the [frame] short code, followed by a [dropcap] short code. In this case, the later short code will not get executed. This is a parsing bug as of WordPress 3.0 where adjacent short codes do not get parsed properly. In such situation, you may need to give a spacing between the two short codes. You can also put the short code on next line but then it will cause a line gap between the image and the text. Another better alternative is to use the HTML markup directly, as in the example below:
[frame src="some_image_url" align="left"]<span class="dropcap">T</span>his is a testHow to find the HTML markup? You can first use the short code and see its HTML source code inside the browser. Next, come back to the page/post editor and paste that markup directly. This situation will come across rarely, but I feel I should let you know about it's workaround.
There is no particular short-code for creating tables. However, I have included basic CSS for tables. You can generate a table by directly pasting the following code inside your content area of Wordpress in HTML mode.
<table class="mytable" cellspacing="0">You can add or remove table rows and columns by following the pattern in the table above.
<tr>
<th scope="col" class="flat">My Table</th>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col">Column 4</th>
<th scope="col">Column 5</th>
</tr>
<tr>
<th scope="row">Row 1</th>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
<td>R1C4</td>
<td>R1C5</td>
</tr>
<tr class="alternate">
<th scope="row">Row 2</th>
<td>R2C1</td>
<td>R2C2</td>
<td>R2C3</td>
<td>R2C4</td>
<td>R2C5</td>
</tr>
<tr>
<th scope="row">Row 3</th>
<td>R3C1</td>
<td>R3C2</td>
<td>R3C3</td>
<td>R3C4</td>
<td>R3C5</td>
</tr>
<tr class="alternate">
<th scope="row">Row 4</th>
<td>R4C1</td>
<td>R4C2</td>
<td>R4C3</td>
<td>R4C4</td>
<td>R4C5</td>
</tr>
</table>
You can insert custom page banners or flash header inside the featured area for each page. In order to insert a custom banner, follow these steps:
1. For custom page banner, upload an image of 960px width by any height to your Media Library. Next, copy it's URL.
2. Create / edit a page and scroll down to page options. You will see a section as "Custom Header image or embed code". Inside this section you can paste the HTML markup for custom header image, as shown below:
3. Finally, update the page. This will insert a banner image into the featured area of your page.
How to insert a Flash Banner?
1. For inserting a flash banner, create/publish a flash media file (.swf) of 960px width by any height from Flash Software.
2. When you publish a .swf file, and HTML file is created. You can copy the publish code from that HTML file.
3. Next, upload the .swf file to your Media Library and copy it's URL.
4. Create / edit a page and scroll down to Page Options section. Next, inside "Custom Header image or embed code", paste the Flash embed code, as shown below:
5. After insertion, you will need to change the sorce file parameter for .swf file. i.e. you will use the URL of the file uploaded to the Media library, as shown below:
6. Finally, update the page and you are done.
For your reference and quick testing, I have included a sample Flash movie and .swf file with the download package. You can find that inside the "flash" folder.
Cruz comes with language localization support. If you are using Wordpress in your own language, you can use .po file to translate the messages into your own language. The .po file is located inside /languages folder.
First of all, you will need to define your language inside wordpress/wp-config.php file. Open wp-config.php file in any text editor and look for this line around line no. 72:
define ('WPLANG', '');
Enter a parameter for WPLANG. This is generally in a format as language_country. For example, en_US, or de_DE. So, this line will change to:
define ('WPLANG', 'de_DE');
Save this file.
Next, go to themes/cruz/languages folder. Duplicate a copy of languages_country.po file and rename it as de_DE.po file. (Make sure this name is same as what you defined in wp-config.php file).
Now you have de_DE.po file. You will need poEdit software to edit and translate this .po file. You can download the software from this site:
http://www.poedit.net
After downloading the software, install it with default settings.
Next, open de_DE.po file in poEdit. It will show all available messages for translation:
Click on any message and type its translation in your own language.
Finally, save the file. Once you save the file, poEdit will automatically compile and generate a .mo file as de_DE.mo. This .mo file is used by Wordpress for translating your messages. Check your site again. You should see the changed text in your own language.
Wp-pagenavi is a pagination plugin for wordpress. It displays a series of paginated links for multiple posts. If you install this plugin, Cruz theme will automatically support its usage. I have included all style elements inside CSS files for this plugin.
You can download this plugin from http://wordpress.org/extend/plugins/wp-pagenavi/
Install and activate the plugin. Next, go to Settings > PageNavi and make the changes as shown below:
Important: Make sure you disable pagenavi-css.css usage. i.e. we do not want to use the css that comes with this plugin. We have already defined style rules in our own CSS files.
The output of any Wordpress theme is pure HTML in browser. The HTML output of Cruz theme, in most general case, can be divided into FIVE main sections as listed below:
These sections can be seen in HTML markup as:
For quick reference, you can see this diagram and switch to appropriate class for modifying the appearance or content.
Cruz theme uses four main CSS files for global style. These are:
1. style.css
This is the main CSS file for Cruz theme. The general structure is divided into 12 different sections, each with a label, as shown below:
In order to change a particular style rule, you can quickly refer to the TABLE OF CONTENTS and then switch on to appropriate section.
For example, if you wish to change the style rules for primary navigation, you would first look into the TABLE OF CONTENTS. Since, primary navigation falls under 4. HEADER section, you would straightaway scroll down to 4. HEADER section. Here, you can modify/append your styles and save the file.
Similarly, if you wish to change the appearance of form elements, you would directly switch on to section 10. FORMS after referring TABLE OF CONTENTS. Next, make necessary changes and save the file.
Tip: If, incase, you find it difficult to locate a particular class, the best approach is to use the search option of text editor. For example, in Dreamweaver, you can use Find and Replace option to find a particular class. Once you find that class, you can easily modify its rules.
This file is created by the author(s) of jquery PrettyPhoto Plugin. All the style rules for prettyPhoto modal box are handled via this CSS file. You need not modify or change the contents of this file.
This file is created by the author(s) of Nivo Slider Plugin. Default style rules for Nivo Slider are handled via this CSS file. You need not modify or change the contents of this file.
This is an IE specific style sheet. So, for all the versions of IE, this CSS file will be used. All bug fixes and hacks for IE should be applied inside this file
Apart from the above mentioned global CSS files, this theme uses 2 CSS files for Theme Options Panel. They are:
The admin.css file is used for styling the theme options panel, whereas, colorpicker.css file is used for colorpicker.js plugin. You need not modify the contents of these files, unless required.
Cruz uses 14 different javascript files for content enhancement and different features. These files are:
Let’s have a quick look on these files one by one:
1. Jquery library for entire site
jQuery is a javascript library that reduces the amount of code we must write. The file jquery.js ver 1.4.4 is included with Wordpress 3.1. This library is loaded in no-conflict mode, so that your custom plugins and JS code works seamlessly.
2. Jquery Plugins
These are open source Jquery plugin files created by various developers worldwide. Although, you need not modify or edit these files, I shall mention the role of these files one by one:
3. Miscellaneous
These are custom JS files used for initializing plugins.
Apart from these files, the theme uses 16 different JS files for visual short codes. These files are located inside /includes/shortcodes/js folder. You need not modify or change the content of these files.
Cruz uses 41 different php files. Let’s have a quick look on the role of these files:
| php File | Role |
| 404.php | Default 404 Error Template. |
| archive.php | Archive template for posts. |
| author.php | Default Author archives template. |
| attachment.php | Default Attachment Template |
| category.php | Default category archives template. |
| comments.php | A template to display comments on single posts. |
| footer.php | Default footer template. |
| functions.php | Contains theme's functions and definitions. |
| header.php | Default header template. |
| index.php | Default template for showing posts and pages. |
| loop.php | Contains main loop for posts. |
| page.php | Default page template. |
| blog-page.php | A page template for showing blog posts with thumbnails. |
| contact-page.php | A page template for contact page. |
| port2.php | A page template for 2 columnar portfolio gallery. |
| port3.php | A page template for 3 columnar portfolio gallery. (Full width) |
| port4.php | A page template for 4 columnar portfolio gallery. (Full width) |
| port-ls.php | A page template to show list style portfolio with sidebar. |
| search.php | Default search template. |
| searchform.php | Custom search form. |
| sidebar.php | Default sidebar template. |
| single.php | Default single posts template. |
| tag.php | Default tag archives template. |
| includes/cats_widget.php | Custom categories widget. |
| includes/content_slider_widget.php | Custom widget for sliding HTML content. |
| includes/recent_comments_widget.php | Custom widget for showing recent comments with avatar. |
| includes/flickr_widget.php | Custom widget to showcase your flickr photostream. |
| includes/minifolio_widget.php | Custom widget to display a mini portfolio of post images. |
| includes/mini_slider_widget.php | Custom widget to display a mini slide show of post images. |
| includes/recent_posts_widget.php | Custom widget to show recent posts from particular category. |
| includes/popular_posts_widget.php | Custom widget to show popular posts based on most commented. |
| includes/twitter_widget.php | Custom widget to show latest tweets from a twitter account. |
| includes/social_links_widget.php | Custom widget to show social networking links. |
| includes/init_custom_widget.php | Initialize custom widgets. |
| includes/page_options.php | The page options for sidebar, widgets etc. |
| includes/post_options.php | The post options for featured image, captions etc. |
| includes/theme_admin_options.php | Cruz Theme options. |
| includes/load_styles.php | Loads custom style options into the theme. |
| scripts/timthumb.php | A php script for generating server-side images at run time. |
| includes/shortcodes/shortcodes.php | Shortcode functions for Cruz theme. |
| includes/shortcodes/visual_shortcodes.php | Visual implementation of shortcodes. |
Here are some important tips and guidelines that may help you in working smoothly with this theme:
I have used the following files and images, as listed:
jQuery Cycle Plugin (with Transition Definitions)
Copyright (c) 2007-2009 M. Alsup
Version: 2.73 (04-NOV-2009)
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
Originally based on the work of:
1) Matt Oakes
2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/)
3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/)
jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
Copyright (c) 2007 George Smith
Licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php
Class: prettyPhoto
Use: Lightbox clone for jQuery
Author: Stephane Caron (http://www.no-margin-for-errors.com)
Version: 2.5.6
jQuery validation plug-in 1.6
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
http://docs.jquery.com/Plugins/Validation
Copyright (c) 2006 - 2008 Jörn Zaefferer
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
jquery.nivo.slider.pack.js
http://dev7studios.com
colorpicker.js
Stefan Petre www.eyecon.ro
TimThumb script created by Tim McDaniels and Darren Hoyt with tweaks by Ben Gillbanks
http://code.google.com/p/timthumb/
MIT License: http://www.opensource.org/licenses/mit-license.php
Icons
Social Networking icons - http://www.wpzoom.com
Google WebFonts
Custom web fonts used from http://code.google.com/webfonts
Once again, thank you so much for purchasing this theme. 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.
Saurabh Sharma
