Display WORDPRESS THEME

Created: 6/12/2009
By: Kriesi

For Updates follow me on twitter

or facebook:
http://twitter.com/kriesi
http://www.facebook.com/pages
/Kriesi/333648177216
HELLO THERE, FIRST OF ALL
THANKS FOR PURCHASING THIS THEME!

This file will teach you how to set up and use the “Display” - 3 in 1 Word-
press Theme.

This file is really extensive so you might think the theme is hard to use.
actually its not, you probably just might jump to the options page and ex-
plore everything yourself, this file is more of a reference work if you do not
know what to do, or if you are not familiar to wordpress.

--TABLE OF CONTENTS--

A) Installation
1. Setting up the general Options (Skin, Re-scaling)
2. Setting up the Front page (Main Menu, Item Slider, Content, Footer)
3. Setting up the Portfolio
4. Setting up the Blog
5. Setting up the Contact Form
6. Adding Content (how to create portfolio entries, preview images,
how to cut posts)

B) CSS Files
C) Javascript
D) PSD Files
E) External resources

 A) INSTALLATION

The Theme comes with 3 different styles

which can be activated at your wordpress
admin panel.

You can either choose to upload the theme to

your server via ftp (only upload the unzipped
folder „display“ into the folder wp-content/
themes/ ) or via wordpress upload function.
to use the upload function zip the “Display”
folder and then upload it via wordpress admin
panel.

(notice: if you are new to wordpress and have problems installing it you
might want to check out this link:
http://codex.wordpress.org/Installing_WordPress )

After that is done activate the theme as you would activate any other
theme at Appearance->Themes.

“Display” Light is now the active theme.

SETTING UP THE GENERAL OPTIONS

If you want to change this go to the “Display” Options Panel (at the bottom
of your admin areas sidebar) and click it, the first thing you will notice is an
option to choose skins:

Seite 2
Changing your Logo:

You got 2 options to change your Logo: The easiest way is to simply enter
the url of your own logo file into the input field. The default Logo will be re-
placed as soon as you have saved the page.

The second option is to edit your CSS Files directly. Depending on the skin
you have choosen you need to either edit style1.css, style2.css or
style3.css in your folder /css/

Search for the #logo selector and change the background picture.

Image Resizing

Next step is to decide whether you want to use automatic image resizing or
not. If this option is activated you only need to upload one pic for each
portfolio entry or one pic for each frontpage entry. Otherwhise you need to
add small preview pictures for the portfolio as well.

If you do want to use the image resizing script you need a server with php5
and GD-Library installed (a module for image operations)

If you dont know what this means never mind, most servers come with this
preinstalled.

If GD library is installed and the cache folder is writeable you will see this
options to choose from:

If the GD library is not installed you will see an error message, as well as if
the cache folder is not writeable. If you want to use the script for automatic
image resizing you have to do another thing after setup: you have to set

Seite 3
the permissions of the folder „cache“ in your theme folder to write able
(777).

This is only necessary if you want to use the image resizing script.

If you do not know how to set the permission please google it, every ftp
program has a slightly different approach. I would recommend googeling
for „set chmod to 777 with „your-ftp-programm (eg dreamweaver)“

If you need support for the resizing script which is called timthumb you can
take a look here:

http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/

Seite 4
CUSTOM WIDGETS FOR ALL PAGES:

You can append a unique widget area to

EVERY page of your choice. adding them is
really easy. you just choose the pages which
should get a unique widget area and then save
the page.

After that is done head over to your widget

page. you will see that the new areas just got
appended to the predefined ones.

So adding these areas is easy. However be

very careful when removing widget areas that
already got widgets applied to them.

Wordpress doesn't remember where it stored

widgets by name, it stores this information by
number. So if I would add a text widget to Con-
tact here (Nr6), and then delete the content widget area the widgets would
then be in Jobs. (previously in 7, now the new 6)

Setup Google Analytics Code

Last thing on the general options page to do is to add your google analyt-
ics code if you want to. Just add the code to the textarea and google will
start tracking ;)

Seite 5
SETTING UP THE FRONT PAGE
To setup your frontpage you have to do 4 tasks:

• Add Menu Items to your Main Menu

• Add Slider Images to the Slider
• Add Content to your Content Area
• Modify your Footer Area

We will do this step by step now:

Add Menu Items to your Main Menu

The theme has the option to use the new WordPress3 Menu Manager. You can find the
menu manager at appearance-> Menu

To set up the menus create a new menus and enter the Name "First" at Menu Name. This
Menu will populate the top main menu.

Now before you add any menu items take a look at the top right of your browser window:
you will find The "Howdy admin and Logout link" Directly below you can see the "scre-
en options" tab. Click that tab and a panel with additional options will open. Check the
checkbox in "Show advanced menu properties" that says "Description"

Now set up your menus. If you add Menu Items to the "First" Menu the description will
display directly bellow the Menu Item title in your front end.

Attention: you might need to delete some pre filled descriptions if you use pages in this
menu, since wordpress adds a content excerpt automatically to those items. Just remove
that and enter a very short description of 2-7 words

Note: If you purchased this item before wordpress 3 was released and update it you can
also use the old menu manager, description bellow:

Alternate: (this is the old menu manager, used pre-wordpress 3. it is

not recommended to use it any longer)
First click „Menu Manager“ in your Sidebar. You will see that there is a
blank table and a button that lets you create new items.

If you press the button you get a new blank menu item.

Seite 6
The first Input field shows the Name of your Item in the Menu, the second
input field is a description line that is added to your top level items. sub
level items don‘t need this. To choose a link for your menu item change the
select box ‚linking Method‘ and choose where you want to link (manually,
page or category are your options)

For example if you would like to create a link to your Home Page this could
look that way:

you can add any number of links,

if you got more than one you can
also arrange them with the arrow
icons: if you press the right arrow
the item will become a sub navi-
gation item of its ancestor. you
can undo this by pressing the left
arrow. The Menu supports up to
8 Sub Levels, which is more than
you should ever need :)

Changing the item order is done

with the up and down buttons.

Please be aware that you can

only change the order of an item
if there are other items on the same level or sublevel. You can also only
move items within its current level. If you would need it positioned within
another level you would first need to outdent it, then move it and then in-
dent it again.

The red X of course deletes an item with all its children.

Changes will only be saved once you press the save button, so if you acci-
dently delete a whole tree you can simply reload the page without saving.

The Menu is always displayed at the top of the page but you can choose to
display it on Wordpress Pages as well, as a sidebar menu:

Seite 7
Setting Up the Image Slider

First click the Front Page Slider button in your admin menu.
Before adding Slides to the slider you have a few options to choose from:

Which slider do you want to use, the 3D Slider or a more basic jQuery Fad-
ing slider. (if you choose the Flash 3D Slideshow the jQuery slider will still
be used as a fallback if a user doesn‘t have flash installed on his browser)

If you have choosen the 3D SLideshow you have to ways of populating it.

You can either choose to use the slideshow manager that I will describe
soon or edit the config.xml file in your /slideshow/ folder manually.

Of course you have a few more options if you are editing the slides via xml
file directly but it is much easier and faster to use the Slideshow Manager
Tool.

Here is a really good explanation on how to use the xml file directly if you
really want to use it that way:

http://www.progressivered.com/cu3er/docs/

Also please be aware: if you have choosen the jQuery slider you can only
use the Slideshow Manager.

Last but not Least you can choose Autoplay and Autoplay Duration for the
slider

Seite 8
Now to the important Part, the Slide Manager itself:

You will notice, it looks and works very similar to the menu manager. You
create new items and can sort and delete them with the controlls on the
left. Within the image url field enter a URL to the image you want to show.

Size should be 940 * 420 px. You can now choose the transition method
for each slide:

• The rotation Direction: Up, Down, Left, Right

• The slicing Direction: vertical, horizontal

• Number of Slices

• Shading option before transition

• the Z-Axis option sets the amount of „gravity“ during the transition. the
higher it is the further the item gets pulled back during transition.

• The Link is self explanatory I guess :)

Every field is optional, except for the Image URL

Seite 9
ALSO please note the following:

If you choose to use the xml file auto duration and autoplay option do not
apply, the must be entered into the xml file by hand as well!

If you choose to use the jQuery Slider you cant use the XML file, the
jQuery slider will always use the Slide Manager.

If you are using the 3D Slideshow you cannot link to images on other do-
mains. So if wordpress is installed at http://www.yourdomain.com/ you
need to start the image URL with exactly the same string. (if you dont use
a www on your installation make sure to exclude it as well in the image url)

Mainpage Main Content Options

To setup the Mainpage content open the menu „Mainpage Options“

The first inputs content is the welcome message bellow the slider.

The Second block lets you choose how you want to populate the 3 front-
page content boxes.

Seite 10
Here you can choose what to display in the 3 bottom columns of the main-
page. They are extremely flexible, you can decide to edit just the html in
the index.php file or change the content dynamically either via Posts,
Pages or Widgets.

If you choose page an additional drop down field appears and lets you
choose a page.

If you choose Post you can select the category of the post in addition,

If you choose Widget go to the widgets page after saving your settings
and add widgets to the appropriate widget area.

Footer Area

Seite 11
To edit your footer press open „Footer Options“

The footer setup is pretty quick and self explanatory. First you can edit the
content and Link URL of your Contact Button.

Next is a copyright text of your choice

And last but not least you can enter some social accounts of yours, the
small icon links will only be displayed for those input fields that dont have
an empty value.

The 4 footer link lists can be edited within the footer widget area on your
widget page. if you don‘t have any widgets applied to this area there will be
shown 4 default list, defined in footer.php

SETTING UP YOUR PORTFOLIO

Seite 12
At the options pages just choose which page should display your portfolio.

First you can choose how many images you want to display on each page

Best practice is to first create a blank page with the name of your choice,
then add that page to your main menu with the Menu Manager and after
that is done choose the page in Portfolio Option with the select box.

After that is done choose Categories which should be used to populate

your portfolio page.

New and a very unique feature is the option to set up as many portfolios as
you want. Just choose a new page and display the same or other catego-
ries of your choice.

Seite 13
Seite 14
SETTING UP THE BLOG
At the options page just choose which page should display your blog.

Best practice is to first create a blank page with the name of your choice,
then add that page to your main menu with the Menu Manager and after
that is done open Blog settings and choose the page at the select box.

The blog Page usually displays all Categories, since sometimes you want
to exclude some of these categories (for example portfolio entries) you can
EXCLUDE multiple categories here:

You can also exclude those categories from the Category listings in your
sidebar and footer:

Seite 15
SETTING UP THE CONTACT FORM
At the options page just choose which page should display your portfolio.

Best practice is to first create a blank page with the name of your choice,
then add that page to your main menu with the Menu Manager and after
that is done open Contact Page settings and choose the page at the select
box.

Afterwards choose which email adress the mails of the contact form should
be sent to:

FAQ Contact: If your contact page seems to work on the front-end but
doesnt deliver a mail be sure that your server supports the sendmail proto-
col. (ask your server admin if this is turned on)

If you cant activate it I would recommend to get a plugin for your contact
page, like cformsII.

Seite 16
ADDING CONTENT

If you completed the previous steps you are now ready to fill your site with
content. this works just normal for posts and pages, only the main-page
content boxes and the portfolio might need some introduction:

When heading over to a post or page you will notice the “Display” option
panel below the text area:

The Images you enter here are the preview Images for your posts, pages
and portfolio Items.

Seite 17
Basically you have the choice to enter up to 3 Preview items:

The first one with size 280px * 124px is used for the portfolio/front page
preview:

The Second one with size 610px * 273px is used for the Blog Overview
and Single Post/Page view:

The 3rd one is used for the Lightbox effect when you click on one of these
Pictures. The Small and Medium input fields in your backend may only
contain Images, hoever, the full size input field may also contain videos.

If you decided against automatic resizing of images you always need to

enter a image/video url into every input field and the images you entered
must have the correct size.

Seite 18
If you turned image scaling on it can get a little tricky logic wise:

• If image scaling is activated you can enter images of any image size into
any input field, they will be scaled to the correct dimension.

• If you don‘t add a small or medium image, and only choose to enter the
big version, then a scaled down version of this image will be used to dis-
play portfolio overview or Blog Overview and Single Post/Page preview
Pictures.

• However whenever you enter a image into the small or medium input it
will overwrite the big version when displaying a small or medium picture.

• If you choose to display a Video within your lightbox add the video Link
instead of the image url into the appropriate (the 3rd) input field. You then
have to enter at least a medium sized preview pic as well. Since word-
press cant extract a screenshot form the video file, you need to set one
manually.

• if you choose not to enter an image/video into the 3rd input field there
wont be a lightbox effect, instead the image will link to the single post/
page.

How to enter an Image/video link:

You have two options when adding a link: either manually by typing the full
address (eg: http://www.yourdomain/path/to/image.jpg)

or you can press the button enxt to each input field. the media library will
open, you can upload a new image or choose an existing one and then as
if you would add an image to your post press the „add image to post“ but-
ton. The lightbox will close and instead of addint the image to the post the
image url will be added to the input field.

Adding videos can get a little more tricky since you need to add a height
and width for most of the video links with your url, so entering by hand is
recommended here.

Some examples of valid links would be:

if adding an swf file you need to pass height and width by appending
?width=792&height=294

http://www.adobe.com/products/flashplayer/include/marquee/d
esign.swf?width=792&height=294

Seite 19
if adding a youtube video you dont need to pass it:

http://www.youtube.com/watch?v=qqXi8WmQ_WM

adding a vimeo video doesnt need it either:

http://vimeo.com/1084537

however if you want a size that doesnt match the default size you can pass
it and the lightbox will adjust:

http://vimeo.com/1084537?width=792&height=294

more examples can be found on the homepage of the lightbox creator:

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-cl
one/

Seite 20
ADDING CONTENT FAQ:

HOW to CUT POSTS AND SHOW THE MORE LINK:

To display the „more“ button you have to manually cut posts or pages into
two parts, this is done with the read more button in Wordpress

B) CSS FILES
The CSS for each theme is split into two files: one that holds the basic
markup for layout and one that contains all information on color,
background-color, borders and images. The fist one (style.css) is shared
among all 3 “Display” skins, but each skin has a separate second file for
the aforementioned color and image information. If you want to create a
unique layout just change the settings in on of the stylessheets of folder
"CSS"

C) JAVASCRIPT
The theme uses advanced jQuery functions to create the fallback image
transition animation, as well as the dropdown menu and the ajax contact
form.

The following functions are available:

1.)Internet explorer png fix
If you want to use additional transparent png files just add the class "ie6fix"
to the element that has the image applied to make internet explorer 6 ren-
der it correctly.
2.) Jquery Improved dropdown menu(k_menu())
This improves the css dropdown menu with animation and ie6 compatibility
3.) k_form
this improves the contact form with ajax sending and animation
4.) Lightbox: prettyphoto

Seite 21
The prettyPhoto lightbox comes with 4 styles. each link that has the atr-
rubute rel="lightbox" or
rel="prettyPhoto" will trigger that lightbox.
to choose different styles change the parameter in the function call
The lightbox is capable of displaying images as well as movies and flash
files. Documentation can
be found here:
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-cl
one/

To activate the lightbox on a link add the rel=“lightbox“ or rel=“prettyPhoto“

to the link.

example:
<a href=“/yourimage_big.jpg“ rel=“ prettyPhoto“>
<img src=“/yourimage_small.jpg“ />
</a>

The theme offers some modification options at the options page for your
javascript, especially for the image slider, so you shouldn‘t need to edit the
custom.js file.

However if you want to remove some javascript functionality you can edit
the lines 3 to 35 and remove function calls in custom.js in your /js/ folder.

D) PSD FILES
Among with the theme come all psd files needed to edit the different skins.
With these psds you can even create your own unique “Display” skin.

E) EXTERNAL RESOURCES

3D Image slider: http://www.progressivered.com/cu3er/

lightbox plugin:
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
logo font: Mueso Sans: http://new.myfonts.com/fonts/exljbris/museo-sans/
Social Bookmark Icons:
http://www.komodomedia.com/download/#social-network-icon-pack
Seite 22
drf icon set: http://jonasraskdesign.com/downloads/downloads.html

Thats it, once again, thank you so much for purchasing this theme, have
fun using it.

Cheers Kriesi

Seite 23