Minny Documentation ∞ dvize melbourne

dvize minny

This is the documentation for the Dvize Minny WordPress Theme

Disclaimer

This code comes as is and we do not offer any warranties or liabilities of any kind. Use at your own risk.

Support and customisations

We do not offer free support. If you leave a comment on the main Dvize Minny Page we may respond, maybe.
Contact us for a quote or to discuss how we can customise this theme for your needs, design your WordPress website from scratch, upgrade or redesign your WordPress site or migrate your existing website design to WordPress.
More information on our WordPress services

Getting started

Now before you get excited, you will need a decent understanding of how WordPress themes work. You will also need to know some basic HTML. CSS, flash and image editing will be useful to.

In saying all that, if you know your way round a WordPress theme your website can look as hot as ours. Or you may want to just rip parts for your theme.

Download the theme and source files from the Dvize Minny WordPress Theme page
Check out our free WordPress install and website setup guide

Credits

we started with the sandbox
navigation javascript is a customisation of the JQuery accordion
the comments code came from iNove
the background image resize script is a cut down version of Supersized
the background image we have included is by jenny downing

Licence

The theme is licenced GNU General Public License.

you are not required to but

Please leave the Dvize credit in the footer
For commercial use, please donate

The font is ITC Avant Garde Gothic. Unfortantly this is copyrighted so I cannot release it. If you have it you can editboth teh photoshop and flash documents. If you do not have it, the font can be changed to another.

The backgrounds are stock so we cannot release them but you can buy them here.

Installation

This theme is installed in the stardard way by uploading the theme to your theme directory and activating it in the WordPress admin area.

Update the site logo

edit the file: navigation.php (line 6).
If you need more than 5 letters, you will need to edit the CSS and the image header.png

Activate the custom home page

Create a new page.
Select the homepage template
Go to the WordPress admin area
Go to settings > reading
Select A static page and choose your new page.

Update the home page

Edit the photoshop file: dvize-home.psd
Upload the transparent png named dvize-home.png to the img directory.
Upload the transparent gif named dvize-home-ie6.gif to the img directory
For more substancial changes, you will need to edit the CSS

Change the navigation titles

The four titles are formed from one image (sprite).
Edit the titles with the photoshop file dvize.psd
Upload the transparent png named dvize.png to the img directory.

Update the navigation links

edit the file: navigation.php

Content layout

This theme has been designed to be very flexible in creating custom layouts within the content area and you can create custom layouts for your needs. As such it content missing the basic layout structure and if you don’t add the structure, your page will be broken.

The easiest way to use the content structure tags I have created is to surf this site, find a page you like and view the source code.

The content is contained inside:

<div class=”entry-content”> your page content </div>

Put your content editor in “HTML” mode to add the content tags. Placing one column after another will allow the two columns to sit side by side.

Here are the basic CSS tags i have used to format the layout

A basic column (50% width):

<div class=”half-column text”> your stuff </div>
Column with solid white background and text formating:
<div class=”half-column text”> your stuff </div>
Column with a form:

<div class=”half-column form text”>your form </div>
To make two columns float to the left add this in between them:

<div class=”clear”></div> or <br class=”clear” />
Column with a space at the top:
<div class=”half-column text gaptop”> your stuff </div>
Column with a space at the bottom:
<div class=”half-column text gapbot”> your stuff </div>

Here are the CSS tags i have used for the folio examples: They will float to the left and display 4 across or if next to a column, 2 across.

<div class=”thumb”><a href=”http://www.your-link.com”><img src=”your-image.jpg” alt=”Your Image” width=”240″ height=”162″ /><em>Large text</em>small text</a></div>

This is blank version of the folio example to use to make your layout look balanced:
<div class=”thumb”><div class=”dead”><a href=”#”><img src=”/img-thumbs/transparent.gif” alt=”blank” width=”240″ height=”162″ /><em></em></a></div></div>

Here is the code for the submenu used on our folio page:
<div class=”foliomenu”><a class=”active” href=”http://www.your-link.com”>Your link text</a> | <a href=”http://www.your-link.com”>Your link text</a></div>

Content should be formated using semantic markup. Use the H3 for the introductory text.

Updating your default background image

Rename your image: 001.jpg and upload it to the img directory. If you want to change the name of the image, you can update the code at the bottom of page.php

We recommend that you make your image 1024×768. The script will stretch and crop you image for different screens sizes so make sure you test your image with different screen sizes.

For more information on this script please see Supersized

Adding a custom background image per page

First you will need to install this plug-in: Secondary HTML Content

Then edit the page you want a custom background image and add the image to the second html content block. This will overide the default background image.

We recommend that you make your image 1024×768. The script will stretch and crop your image for different screen sizes so make sure you test your image with different screen sizes.

For more information on this script please see Supersized

Adding a custom background Flash per page

Flash

For our example we are streaming a FLV film file and looping it. I have not experimented with flash animation or interaction but assume that animation will be fine. Here is how our files are set up.

Convert the film to FLV format. See Adobe help for more info
Open a new flash file.
Import the film. See Adobe help for more info
Resize the flash document to the size of your film, set the background colour and frame rate.
Click on the film and name it’s instance: myFLA
On the first frame of the timeline add this code:
import fl.video.*;
myFLV.addEventListener(VideoEvent.COMPLETE, rewind);
function rewind(eventObject:VideoEvent):void {
myFLV.autoRewind = true;
myFLV.play();
}
Publish the flash and upload both files to your wordpress installation.

WordPress

Create a new page
Select the flash-page template

Dvize Minny WordPress theme

Open the file flash.php
Add the page URL’s (or post ID’s) that you want the flash file to sync with
Add the URL for your flash file
If you get stuck, we have more detailed instructions in the file: flash-help.php

Recommend plugins

We have intregrated some plugins into the theme or have created custom styles for teh plugins so they work seamlessly with the theme

WP JS

- compresses and merges the Javascript. This theme uses quite a bit of Javascript so this improves performance.

To install WP JS

Download and install the Plugin (in the usual WordPress way).
Open the file: page.php
Comment this line:
<?php /* include (TEMPLATEPATH . ‘/js/js.php’); */ ?>
Uncomment this line:
<?php /* include (TEMPLATEPATH . ‘/js/js-sifr.php’); */ ?>
Open the file: flashpage.php
Comment this line:
<?php /* include (TEMPLATEPATH . ‘/js/fla-js.php’); */ ?>
Uncomment this line:
<?php /* include (TEMPLATEPATH . ‘/js/fla-js-wpjs.php’); */ ?>

sIFR 3

This allows custom fonts via flash. This is not a WordPress plugin and has been intregrated into the theme itself.

To install sIFR 3

Open the file: page.php
Comment this line:
<?php /* include (TEMPLATEPATH . ‘/js/js.php’); */ ?>
Uncomment this line:
<?php /* include (TEMPLATEPATH . ‘/js/js-sifr.php’); */ ?>
Open the file: flashpage.php
Comment this line:
<?php /* include (TEMPLATEPATH . ‘/js/fla-js.php’); */ ?>
Uncomment this line:
<?php /* include (TEMPLATEPATH . ‘/js/fla-js-sifr.php’); */ ?>

To install both WP JS and sIFR 3

Download and install the Plugin (in the usual WordPress way).
Open the file: page.php
Comment this line:
<?php /* include (TEMPLATEPATH . ‘/js/js.php’); */ ?>
Uncomment this line:
<?php /* include (TEMPLATEPATH . ‘/js/js-wpjs-sifr.php’); */ ?>
Open the file: flashpage.php
Comment this line:
<?php /* include (TEMPLATEPATH . ‘/js/fla-js.php’); */ ?>
Uncomment this line:
<?php /* include (TEMPLATEPATH . ‘/js/fla-js-wpjs-sifr.php’); */ ?>

To change the sIFR 3 font, see the sIRF documentation. Please note that as this script is still being developed, changing the font using updated files may require you to replace the entire script. You can follow our example to do this.

Secondary HTML Content

see the section: "Adding a custom background image per page"

cformsII

ajax mailform | You will need to replace the cforms CSS file with ours which can be found here

WPTouch

mobile version of theme for smart phones | | You will need to replace the switcher CSS file with ours which can be found here. We also recommend that you change the main CSS as we have fixed up some things and removed a chunk of unused styles. Find it here.

Other Plugins

Here are our other recommended plugins that do not require any intergration with the theme.