# Cudazi Mono WordPress Theme

## By Cudazi

Thank you for downloading my theme. Please read this document for further information and help.

For questions on basic WordPress installation/usage, HTML, JavaScript or CSS editing - please try W3Schools, the Wordpress Codex or Google as theme errors/issues get top priority.

Customizations (color changes, padding, styles, etc...) will need to be billed accordingly. Contact me for a quote and availability with as much information as possible for an accurate estimate.

### FAQ

Custom Fields, Discussion Settings and such have been hidden by default in WordPress 3.1.1+ when editing a page or post, click the screen options tab in the header.

Stylesheet Missing error? - Do not upload the entire download, just upload the theme folder itself

- Quickly find what you're looking for in this document by using your browser's "Find in Page" feature, typically Control+F.
- Download firebug to track down which styles are being used and test-edit the CSS.
- Trying to locate/replace text, styles or code in themes? "Find in Files" command which is commonly found in any decent text editor which will save you hours of searching.
- Getting an error message, chances are someone else has seen it too, try a google search for a quick fix.
- Many times plugins are to blame when a site fails, always try disabling any third-party plugins if you encounter an error you can't solve.
- Looking for more features? Download and install a plugin from Contact Forms, Polls, or Custom Widgets!
- Looking for more control over your widgets? I suggest this plugin for even greater control.
- This template is translation ready and uses __() and _e() functions for text strings. Translating Wordpress Themes
- Define or adjust Featured Image Sizes in libraries/featuredimages.php

### WordPress Setup

Follow the steps in the order given below. They are intended for a blank install but read through them even if switching a current site to learn how the site works.

##### Theme Upload / Activate / Import

Do not upload the entire download file.

Go to your WordPress Admin area > Appearance > Themes > Install Themes and click Upload.

Browse for the theme zip file located in the "Theme Files" folder.

Activate the Theme

##### Add Plugin: OptionTree (Theme Settings)

Go to Plugins > Add New and search for: OptionTree. Activate and install (If you receive any errors at this point, you most likely do not have PHP5 installed properly, contact your web host)

OptionTree now imports the theme settings and setting content automatically from a folder titled optiontree in the theme folder.

##### Add Plugin: Easy Fancybox

Go to Plugins > Add New and search for: Easy Fancybox

Activate and install Easy Fancybox. Go to Settings > Media and scroll down to FancyBox to see the available settings.

Check the boxes for "Enable FancyBox for XXXX" in the various sections and the auto-detect settings.

You may need to add jpeg in the list of "Auto-detect" image types. (Default: jpg gif png)

Please Note the classes used to launch iFrames, Vimeo and YouTube videos!

##### Add Plugin: wp-pagenavi

Go to Plugins > Add New and search for: wp-pagenavi. Activate and install, then in the plugin settings, disable the included plugin css.

##### Import Sample Content

Go to tools: Import > WordPress (you may need to activate and install the importer if prompted)

Use the included XML file I have provided in the download.

When asked, check the box to download and import file attachments.

##### Setting your Home and Blog Pages

Go to Settings > Reading and set a static page for the front home and posts page (blog).

##### Menu / Dropdown

Go to Appearance > Menus to choose and assemble the main menu of links, pages and categories. Be sure to click "Save Menu".

##### Upload a Background

Upload a background in Appearance > Backgrounds. I included bg_noise.gif in the theme folder, images, backgrounds.

##### Widgets - Footer and Sidebar Content

You may have noticed that your site is missing content in the footer and sidebars. At the time of writing this, WordPress does not copy over the widget settings so you'll need to add what you need.

Simply go to Appearance > Widgets and drag and drop the widgets you need into the various sections. Please take the time to read through all the notes.

### Page Templates

When you create or edit a page, there will be a dropdown, typically along the right column for choosing a page template.

You can enable or disable comments on pages while editing a page, you may need to show that feature by clicking on screen options and checking the discussion box to appear and then enable or disable comments.

Hide the title on any page by adding a custom field of hide_title (value: yes)

##### Default

The default page template. It will be set up in two columns.

##### Full Width

Full width page template.

##### Portfolio Grid

This page template will pull in portfolio items created in the portfolio section.

When you create a page using this template, choose additional options in the custom box titled: Custom Portfolio Page Template Settings. This box should appear under the main content editor.

Be sure to disable comments when using the Portfolio Grid page template

### Portfolio Setup

Portfolio items are a custom post type designed to be pulled in by any page using the page template: Portfolio Grid. The portfolio tags are optional and serve as a way to separate collections if you desire.

The best way to see how these items work is to explore the demo content after you import it on your own site.

##### Creating Portfolio Items

1. From the left menu, click Portfolio > Add New
2. Set a featured image:
   - Click: Set featured image (right column)
   - Upload an Image
   - Click: Use as featured image
   - Save and Close the window
3. Enter a Title
4. Enter content in the main content area.
5. Choose additional options in the custom box titled: Custom Portfolio Settings. This box should appear under the main content editor.
6. Upload additional images (but do not insert them into the post) if using the attachment list or attachment slider, check the notes in the Custom Portfolio Settings box.
7. Enter an intro in the Excerpt field or it will make up it's own excerpt.
8. Create / choose any portfolio tags
9. Click Publish

##### Creating Portfolio Pages

1. From the left menu, click Pages > Add New
2. Disable Comments on this page (IMPORTANT!)
3. Enter a Title
4. Choose the page template: Portfolio Grid
5. Enter content in the main content area.
6. Choose additional options in the custom box titled: Custom Portfolio Page Template Settings. This box should appear under the main content editor.
7. Click Publish

### Slider Setup

##### Creating Slides

1. From the left menu, click Slides > Add New
2. Enter a Title
3. Enter content in the main content area. Use images, video or any content you would like but try to keep the slides roughly the same size.
4. In the Slide Settings box at the bottom, enter a width / height on every slide to be sure the slider resizes properly.
5. Create / choose any Slider Categories
6. Click Publish

##### Adding Sliders to Pages/Posts

After you have created slides, you can display them using the slider shortcode. See the shortcode section.

### Shortcodes

Shortcodes are a very powerful way to insert custom functions directly into the main content of a wordpress page or post. They are items surrounded with square brackets like [shortcode] and can accept parameters (options) and/or content. Enter shortcodes in HTML mode on your WordPress editor, they are case sensitive.

See the Shortcode Content Example txt files in the download file for examples of usage you can paste into your pages. Some will also be imported with the sample content xml.

##### [cudazi_promotext]Large Promo Text![/cudazi_promotext]

Used to create a large block of text. There are no parameters for this tag, simply surround the content with the shortcode.

    [cudazi_promotext]Insert this into your WordPress Content![/cudazi_promotext]

##### [cudazi_column] and [cudazi_column_end]

[cudazi_column] - Used to create columned layouts based on the 960gs grid.

Parameter | Values | Description
--- | --- | ---
width | 3 | 1-12, corresponds to the grid_xx in the 960.gs Grid.
class | alpha or omega | For the first column, use alpha. For the last column, use omega. Leave blank for all others.

Use with [cudazi_column_end] to end a column and [cudazi_clear] to end the entire column section.

##### [cudazi_expander]

Used to create sections of expanding/collapsing blocks. See the sample content folder for examples.

Parameter | Values | Description
--- | --- | ---
position | beginning | Enter beginning, middle or end to indicate which section of the expander you are entering.
more | Show More | Entered into the 'end' cudazi_expander, the text displayed to show more.
less | Show Less | Entered into the 'end' cudazi_expander, the text displayed to show less.

##### [cudazi_scroll]Scroll![/cudazi_scroll]

Used to create a link that will scroll to the top of a page. There are no parameters for this tag, simply surround the content with the shortcode.

    [cudazi_scroll]Scroll to Top![/cudazi_scroll]

##### [gallery]

Used to display a default WordPress gallery

This theme has many more image sizes available than the default thumbnail, medium, large and full for the size attribute:

- `grid_3` (222x140)
- `grid_4` (306x175)
- `grid_6` (474x300)
- `grid_8` (642xANY)
- `grid_12` (978xANY)

Gallery Shortcode Codex // Image sizes defined in libraries/featuredimages.php

##### [cudazi_iconlist] and [cudazi_iconlist_icon]

Used to create lists of icons/services. [cudazi_iconlist] wraps around a group of [cudazi_iconlist_icon] shortcodes to complete a list.

The parameters below are for [cudazi_iconlist_icon]

Parameter | Values | Description
--- | --- | ---
icon | arrow32.png | Enter the image name of the icon you want to use from the theme's images/icons folder.
heading | Sample Heading | The bold heading created for this icon/service
text | Sample Text! | The small text summary created for this icon/service
link | http://google.com/ | Optional link for the heading

See the sample content imported into your site or the copy/paste examples in the "Shortcode Content Examples" folder.

##### [social_icon]

Used to add social icons.

    [social_icon src="picons01.png" title="Add a hover title!" link="#custom-link"]

Parameter | Values | Description
--- | --- | ---
src | picons01.png | Enter the image name of the icon you want to use from the theme's images/social_icons folder.
title | Link Title Text | Text on link hover.
link | http://google.com/ | Optional link for the icon.

See the sample content imported into your site or the copy/paste examples in the "Shortcode Content Examples" folder.

##### [cudazi_slider]

Used to display the slides custom post type.

    [cudazi_slider slide_delay="4000"]

The slider uses: http://slidesjs.com/

Parameter | Values | Description
--- | --- | ---
max | 10 | Defaults to -1 (all) but enter a max to limit slides returned.
categories | featured-slides | Enter the slider categories (slugs). Eg: home,featured-slides
slide_effect | fade | Enter fade or slide.
slide_delay | 0 | Enter 0 for no auto-advancement of slides, or a number in milliseconds, 5000 = 5 seconds.
slide_disable_nav | yes | Hide the indexed navigation.
slide_disable_nextprev | yes | Hide the next/prev navigation.
slide_crossfade | yes | Crossfade images in a image based slideshow?
slide_hoverpause | yes | Set to true and hovering over slideshow will pause it.

See the sample content imported into your site or the copy/paste examples in the "Shortcode Content Examples" folder.

A quick note on shortcode formatting:
When you are entering shortcodes in the editor (HTML mode) WordPress tries to add br and p tags automatically. Sometimes, this is fine but other times you will notice it throws your layout off or adds space where there should not be any.
How do we solve this?
Well, when you need to remove all formatting inside a specific area and let your code span a few lines, surround everything with [raw] [/raw] tags. Another tip is to add a full space (top and bottom) between shortcodes and their content.

### HTML Structure

This theme is a fixed layout with 1 to 12 columns. The general concept behind the 12 column framework is that all the columns need to add up to 12. In the single column sections, you will just see a div with a class of "grid_12", for a page with a main column and a sidebar, the classes add up to 12. learn more and find demos on their website...

This theme uses a modified version of 960gs to enlarge the page and space between columns slightly but the principles are the same.

    <div class="container_12">
    	<div class="grid_12">
    		Full width Column content.
    		<div class="grid_6 alpha">nested first column</div>
    		<div class="grid_3">nested second column</div>
    		<div class="grid_3 omega">nested last column, adding up to 12.
    	</div>
    </div>

### CSS Files

I am using one primary CSS file for this theme: /css/screen.css. This file contains all style information for the theme.

By default, WordPress needs style.css in the root folder. You can add-on styles using this file to override my defaults.

This theme uses a php file to import styles and additional stylesheets: css/dynamic-css.php

Additional CSS themes are found in css/themes/

Download firebug to track down which styles are being used and test-edit the CSS.

### JavaScript

1. script.js - jQuery Init, Edit this file as needed.
2. /libs/tweet.js - Twitter Plugin - No need to edit this file (loaded if plugin is used)
3. /libs/slides.min.jquery.js - Slider Plugin - No need to edit this file
4. /libs/superfish-combined.js - Superfish Menu Scripts Compressed - No need to edit this file

### PSD Files

I've included these psds with this theme:

1. Main Layout - site.psd
2. Sample Logo - logo.psd

### Credits

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

- OptionTree (used, not included in download)
- wp-pagenavi (used, not included in download)
- Easy Fancybox (used, not included in download)
- Custom Recent Posts Widget (built by Cudazi, included in download)
- Custom Twitter Posts Widget (built by Cudazi, included in download)
- jQuery - Slidesjs Slider
- jQuery
- Icons from Tutorial9 - Mono
- Icons from Picons
- Superfish jQuery Menu
- Logo, icons all custom done
- Flickr CC Commercial Use Images. Written permission from markjsebastian.com for use in the demo.