Installation & Help File - Dilapidated (WP)

GhostPool Designs | Created 10-Oct-09 | Last Updated 23-Mar-11

Table of Contents

1. Installation
2. Theme Basics
   • HTML Structure
   • CSS Files and Structure
   • Javascript
   • PSDs
3. Setting The Theme Up
   • Adding Navigation Menus
   • Customising The Background
   • Shortcodes
   • Using The Slider
   • Widgets
   • Creating Blogs
   • Redirect Template
   • Other Page/Post Templates
   • Splitting Posts/Page
   • Contact Form
   • Using The Lightbox
   • Theme Options
   • Language Translation
4. Chat Box
   • Installation
   • Troubleshooting
5. Troubleshooting & FAQs
6. Credits

Installation

1. You should have already unzipped the file you downloaded.
2. Now you should do ONE of the following:
   • Upload the dilapidated folder to wp-content/themes via an FTP program.
   • Go to your WordPress Admin Panel, select Appearance > Themes > Install Themes > Upload and upload the file called dilapidated.zip.
3. Now go to Appearance > Themes and activate the theme called "Dilapidated".

Theme Basics

HTML Structure

If you want to edit a particular section of the site you should first identify the HTML and CSS tags that are controlling it. For FireFox users the easiest way of doing this is by downloading Firebug, which allows you to right click on any part of the web page to show you the HTML and CSS controlling it. Google Chrome and Internet Explorer 8 have similar applications built into its browser.

CSS Files and Structure

There are several style sheets with this theme, style.css is the main style sheet all the other style sheets are included in the css folder that relate to the different theme skins.

You can either customize the CSS styling code without editing style.css by going to Appearance > Dilapidated Options > Style Settings or opening style.css in a text editor. The file is separated into sections so it is easy to locate the tag you want to change.

/*************************** General Styling ***************************/ css code /*************************** Content Areas ***************************/ css code /*************************** Header ***************************/ css code

Setting The Theme Up

Adding Navigation Menus

1. Go to Appearance > Menus and add a new menu for the header navigation by clicking the addition button on the right.
2. On the left select which navigation menu you want in "Header Navigation" area from the drop down menu.
3. On the left you can select which pages, categories and custom links you want to add to each navigation menu.
4. Once you have added your navigation links you can drag them up or down in the order you want them to display.
5. To add drop down links drag your child link underneath the parent link until the child link looks indented to indicate it is now a drop down link.
6. To add a "Home" link, from the Page panel click the "View All" tab where you will find a Home link to add to your menu.
7. Once you are done always remember to click the "Save Menu" button.

   

Customising The Background

1. Go to Appearance > Background to add your own background colour or upload your own background image.

Shortcodes

1. This theme comes with several shortcodes, which are essentially tags you can insert into your posts and pages via the text area to style your page. You can access the shortcodes from the Visual Tab by clicking on the GP button.

   

2. If you use the HTML tab instead you can manually add the shortcode tags to your posts. You can view examples of all the shortcode tags at http://ghostpool.com/wordpress/dilapidated/shortcodes/.

Using The Slider

1. You can control a variety of slider options from Appearance > Dilapidated Options > Slider Settings.
2. Create or edit an existing post/page and either assign it to your slider category or check the "Display In Slider" option in the "Additional Options" panel depending on what you have set under Slider Settings.
3. To display an image for your post/page/review in the slider click on the "Add An Image" button.

   

4. Now click the "From Computer" tab and upload your image(s).
5. Once the image(s) have been uploaded choose which one you want to display in the slider by clicking the "Use as featured image" link and then click "Save All Changes" and close the upload window.

   

6. Alternatively you can specify your own images for each section of the site in the "Image Options" fields in the "Additional Options" panel.
7. Now save your post/page.

Widgets

1. Go to Appearance > Widgets and then drag and drop the desired widgets from the left into one of the widget areas on the right.
2. This theme comes with the following custom made widgets:
   • GP Custom Content: Display custom content such as Google ads, flash and javascript.
   • GP Recent Comments: Displays recent comments with avatars and comment excerpts.

3. You can change the sidebar display options from Appearance > Dilapidated Options > Sidebar Settings.

Creating Blogs

1. Go to Pages > Add New, give the page a title and then select the "Blog" page template from the drop down menu on the right-hand side of the page.
2. Scroll down to the "Page Settings" panel and enter your blog category IDs in the "Category IDs" field (the IDs can be found by going to Posts > Categories, hovering your mouse over the relevant category links and getting the IDs from the URL indicator at the bottom of the browser window). Now make sure all the posts you want to display on this blog page are assigned to one or more of the category IDs you just entered or leave the field blank to display all posts.

Redirect Template

1. The redirect template allows you to direct pages to external websites.
2. Go to Pages > Add New, give the page a title and then enter the website URL in the main post textbox e.g. http://google.com
3. Select the "Redirect" template from the right-hand side.
4. Finally publish your post.
5. Now when you click the link to this page in the navigation or sliders it will open up http://www.google.com.

Splitting Posts/Page

To split the page or post content across multiple pages add

<!--nextpage--> within your text where you want it to be split.

Using The Lightbox

1. To use the image or video pop up effect add rel="prettyPhoto" to your links as follows: <a href="http://example.com/imagename.jpg" rel="prettyPhoto"><img src="lib/http://example.com/imagename.jpg" alt=""></a> <a href=" http://www.youtube.com/watch?v=5PSNL1qE6VY" rel="prettyPhoto"><img src="lib/http://example.com/imagename.jpg" alt=""></a>
2. If you want to display the Next and Previous arrows in the lightbox add rel="prettyPhoto[groupname]" instead: <a href="http://example.com/imagename.jpg" rel="prettyPhoto[groupname]"><img src="lib/http://example.com/imagename.jpg" alt=""></a> <a href=" http://www.youtube.com/watch?v=5PSNL1qE6VY" rel="prettyPhoto[groupname]"><img src="lib/http://example.com/imagename.jpg" alt=""></a>
3. Now any image or video link with the same group name will be added to the same lightbox group.
4. You can add YouTube, Vimeo, QuickTime and SWF flash videos to the lightbox, using the following formats:
   • YouTube: http://www.youtube.com/watch?v=5PSNL1qE6VY
   • Vimeo: http://vimeo.com/8245346
   • QuickTime: http://www.example.com/video.mov?width=780&height=418
   • SWF Flash: http://www.example.com/video.swf?780&height=418

Theme Options

You can access a number of options to personalize your theme from within your WordPress Admin Panel by going to Appearance > Dilapidated Options. All the option fields are clearly labelled, so everything should be self explanatory.

Language Translation

If you want to translate or change any of the words that are built-in into this theme you can do this from lib/inc/language.php.

Chat Box

Installation

1. Go to your WP Admin Panel, select Plugins > Add New and search for Simple Ajax Shoutbox in order to install and activate the shoutbox plugin.
2. Next go to Appearances > Widgets and drag the Shoutbox widget to the "Slider" widget area.
3. You can alter the settings of the shoutbox from within the widget panel.

Troubleshooting

This theme has been tested and works with this plugin. If you encounter any problems while using it you should contact the plugin author for support.

Troubleshooting & FAQs

It says the theme is broken or missing a style sheet?

If after installing the theme it says it is broken or the style sheet is missing see http://wiki.envato.com/buying/support-buying/solving-broken-theme-issues.

Why do my images looked squashed?

If you have images uploaded to your posts prior to installing this theme you will want to recrop all images. Simply go to Plugins > Add New and search for "Regenerate Thumbnails". Install and activate the plugin called "Regenerate Thumbnails" and then run the plugin from Tools > Regen. Thumbnails.

I receive the following error message when I preview/activate the theme "Fatal error: Cannot redeclare wp_pagenavi()..."?

You're receiving this error message because you have the WordPress plugin WP-PageNavi installed and activated. This theme already comes with WP Pagenavi. Go to Plugins > Plugins and deactivate this plugin. If you can't access your admin panel to deactivate the plugin you will need to use an FTP program to go your wp-content/themes directory and rename the "stylize" theme folder to deactivate it so you can access your admin panel again.

How do I remove the comments section from pages?

Go to Pages > Pages and edit the desired pages. In the top right corner of the page click the Screen Options button and make sure the "Discussion" box is checked. Now scroll down the page and locate the discussion panel and uncheck the "Allow comments." box.

How do I use the contact form?

The contact form is a shortcode meaning you can insert it into any post, page or text widget using the following code: [contact email="youremailhere@domain.com"]

I do not receive emails from the contact form?

The are several reasons why you may not be receiving the emails:

• Your emails are being sent to your spam/junk mail folder
• You have entered the wrong email address in the contact form shortcode
• Your web host does not allow you to send emails from the same address your are receiving the emails to
• Your web host does not support PHPMail, you will need to contact them about this or switch hosts (I recommend DreamHosts)
• Your web host (in most cases GoDaddy) does not allow contact forms to send emails to certain email providers (e.g. yahoo.com, hotmail.com etc), you will need to contact them about this or switch hosts (I recommend DreamHosts)

What size are the images in the slider?

The slider images are 462px in width by 262px in height.

Credits

• Sidebar Generator WordPress Plugin
• Blue Grunge Background Image
• Haemoglobin Background Image