Download the Tarnished theme from your ThemeForest downloads page and then unzip the download. Once the download has been unzipped you should see a folder called tarnished-theme.
Uploading The Theme
Before uploading the theme make sure you have installed WordPress 3.0 or higher. You can download WordPress for free from WordPress.org. Now you can upload the theme in one of two ways:
1. Upload via WordPress
From your WordPress dashboard go to Appearance -> Themes.
On the Themes page click the Install Themes tab.
Click the Upload link directly below the two tabs which takes you to a page to upload the theme.
Click the Browse button and locate tarnished.zip that is inside your tarnished-theme folder. Double click the file to select it and then click the Install Now button.
If you have trouble uploading the theme via WordPress you will need to upload the theme via FTP as explained below.
Upload the tarnished folder that is inside your tarnished-theme folder to your WordPress themes directory wp-content/themes/.
Activating The Theme
When uploading the theme via WordPress you should be prompted to activate the theme. If uploading the theme via FTP go to Appearance -> Themes and click the Activate link below the tarnished theme.
Theme Options
Once you have activated the theme you will see a new option under the Appearance tab called Theme Options. Click this link to go to the theme options page and click the Save Changes button to save the default theme settings.
2. Demo Content
A demo package comes with the theme that includes example posts, pages, comments, custom fields, categories, and tags etc. which can help you in learning how the theme works. To add this content follow the steps below:
Go to Settings -> Media and uncheck the option Organize my uploads into month- and year-based folders.
Go to Tools -> Import and select the WordPress option. If you are prompted to install the WordPress Importer plugin you should do this.
Click the Browse button and locate the demo.xml file that is inside the tarnished-theme/help folder and double click the file to select it and then click the Upload file and import button.
A new screen will appear, check the Download and import file attachments option and click Submit.
3. Updating The Theme
From time to time free theme updates will be released which will include bug fixes and feature updates. When a theme update becomes available you should see a New Updates message in your admin panel. To get these themes updates you will need to re-download the theme from your ThemeForest downloads page and unzip the download file.
Before updating you should make a back up of your the current theme just in case something goes wrong in the updating process.
To do this, using an FTP client download your tarnished theme folder from the wp-content/themes/ directory to your hard drive and then rename the folder to something like tarnished-old.
Now upload the new tarnished folder that is inside your tarnished-theme folder to your WordPress themes directory wp-content/themes/ overwriting the current tarnished theme folder.
Go to Appearance -> Themes and check the new version number.
Your content, settings, images as well as CSS customizations from Appearance -> Theme Options -> CSS Settings will not be lost when you upgrade the theme.
If you have made changes to the theme files you will want to either make the changes again to the new theme files or just upload the updated theme files if they are not your modified files. Visit the changelog, which tells you which files have been updated, added and removed. You can then download DeltaWalker or DiffMerge and compare and add the code changes between your modified files and the new theme files.
4. Setting Up The Theme
Homepage
Go to Pages -> Add New to create a new page.
Give your page a title and in the main writing text add the following shortcode to display your blog posts:
[blog per_page="4"]
You can control a variety of options for the blog shortcode. To view all the available options click here.
Scroll down to the Page Settings panel and in the Top Content text box add the following shortcode:
You can control a variety of options for the slider shortcode. To view all the available options click here.
Scroll down to the Discussions panel and uncheck the Allow comments option, if you cannot see the Discussions panel click here.
Go to Settings -> Reading, select A static page option and from the Front page drop down menu select the page you just created (leave the Posts page drop down menu empty).
Sliders
Go to Slides -> Add New to create a new slide.
Give your slide a title and in the main writing text add your slide caption text.
Scroll down to the Slide Settings panel below the main writing text box and enter your slide image URL in the Image URL text field (enter a relative URL such as wp-content/uploads/imagename.jpg instead of http://mydomain.com/wp-content/uploads/imagename.jpg).
Enter your page, image or video URL that you want the slide to link to in the Slide URL text field.
You can also control a variety of other options from this panel.
On the right-hand side you can add your slide to a category from the Slider Categories panel.
Inserting Slider Shortcodes
You can add the fade and accordion slider shortcodes to any page.
To insert the fade slider, add the following code to the main writing text box on any post or page:
To add slides from specific categories to a slider add the slide category IDs to the cats="" option (go to Slides -> Slide Categories and get the IDs from the ID column).
You can also change a variety of other slider options by adjusting the shortcode, for a full list of slider options see this page.
Portfolios
You can create portfolio items just like posts and then you can create a new page, add something called a shortcode inside the main writing text, which will display your portfolio items. The shortcode options can be adjusted to change a variety of portfolio options.
Creating Portfolio Items
Go to Posts -> Add New to create a new post.
Give your post a title and some text in the main writing text box.
On the right-hand you can assign your item to categories from the Categories panel.
Scroll down to the Post Settings panel where you can control the way the post looks.
Enter your portfolio image URL in the Image URL text field (enter a relative URL such as wp-content/uploads/imagename.jpg instead of http://mydomain.com/wp-content/uploads/imagename.jpg).
To add additional images to the lightbox click the Add an Image icon to upload your images/videos and give them an order value of "1".
Inserting Portfolio Shortcodes
Go to Pages -> Add New and insert the following portfolio shortcode into the main writing text box:
To add posts from a specific category to a portfolio shortcode add the category IDs to the cats="" option (go to Posts -> Categories and get the IDs from the ID column).
You can also change a variety of other portfolio options by adjusting the shortcode, for a full list of portfolio options see this page.
Blog Pages
Go to Pages -> Add New and insert the following blog shortcode into the main writing text box:
To add posts from specific categories to a blog shortcode add the post category IDs to the cats="" option (go to Post -> Categories and get the IDs from the ID column).
You can also change a variety of other blog options by adjusting the shortcode, for a full list of blog options see this page.
Navigation
Go to Appearance -> Menus to set up your header navigation menu.
Click the + button and create a menu.
On the left-hand side from the Theme Locations panel select your menu from the Header Navigation drop down menu.
Shortcodes
This theme comes with several shortcodes. Shortcodes are pieces of code that can be inserted directly into your main text box on posts and pages to add certain content easily such as videos and dividers.
Click the Visual tab at the top of the main text box on any post or page item.
Click the GP button to open the shortcode window.
From the shortcode drop down menu select a shortcode, which will automatically be inserted into the main text box.
You can view the full range of options for all the shortcodes from the following page.
Customising The Background
Go to Appearance -> Background to add your own background colour or upload your own background image.
Contact Page
Go to Pages -> Add New to create a new page.
Insert the contact form shortcode into the main text box e.g. [contact email="youremail@address.com"].
Replace youremail@address.com with your own email address.
Go to Appearance -> Sidebars, click the Add Sidebar link and give your new sidebar a name.
Now go to any post or page and scroll down to the settings panel.
Now select one of your sidebars from the Sidebar drop down menu.
Go to Appearance -> Widgets and drag and drop widgets from the Available Widgets panel over the to your sidebar widget panels on the right.
This theme comes with the following custom widgets:
GP Custom Content: Display custom content such as Google ads, flash and javascript.
Customising Theme Design
You will probably want to customise the design of the theme. This may involve editing the HTML in the php files (theme structure) and the CSS in the style sheets (theme design). If you are not familiar with HTML and/or CSS you will want to hire a developer to modify the theme for you. You can contact one of my developers from here. If they are unavailable you will have to look elsewhere such as FreelanceSwitch.
Go to Appearance -> Theme Options -> CSS Settings and in the Custom CSS text box you can add your own CSS code to style the theme.
The CSS code you add to this text box will overwrite the default styling of the theme.
The benefit of adding your CSS code to the Custom CSS text box rather than editing the style sheets is that when theme updates are released your style modifications will not be overwritten.
For example, to edit the link and link hover colours you would add the following to the Custom CSS text box:
a {
color: #ff0000;
}
a:hover: {
color: #000000;
}
To change the colour of the post heading text you would add:
.post h2 {
color: #ff0000;
}
In order to style the theme you need to know the name of the HTML elements you want to restyle. To get the names you should use the Firebug add-on in Firefox (recommended) or the built-in developer tools in Chrome or Internet Explorer 8+. All you then need to do is right click on a particular section of the web page and it will tell you what styling tags are controlling it and what files the styling tags are located in. If you're not sure how to use Firebug (or other developer tools) follow the tutorial here.
Translation
Open the language.php file located at tarnished-theme/tarnished/lib/inc.
Locate the lines of text you wish to translate or edit and then save the file.
Now upload the modified file via FTP in place of the old file.
If you use characters that are not displaying correctly on your website try changing the character encoding of the language.php, by default it should be set to UTF-8.
Using The Lightbox
To use the image or video pop up effect add rel="prettyPhoto" to your links as follows:
This theme uses a script called TimThumb to resize and crop images. Here is a list of the most common problems encountered and their solutions:
What path are you using for your images? In most cases using the full path to your image should work. For example, you would input http://www.mydomain/wp-content/uploads/image.jpg (or whatever the path to your image is). However, some hosts do not allow the use of http://www. at the beginning of a URL. In this case you should use the relative path to your image, and remove your domain from the URL. In the above case, assuming your site is hosted in the in the root folder, the path to your image would just be: wp-content/uploads/image.jpg.
Are the images hosted on your domain? By default all images must be hosted on the same domain as your WordPress theme. To use images from another domain open the timthumb-config.php file in a text editor located at tarnished-theme/tarnished/lib/scripts and add your domains to the allowed list, for example:
Does your cache folder have the correct permissions? You need to give your cache folder located at tarnished-theme/tarnished/lib/scripts/cache/ full permissions. In most cases this is 777 but it may vary depending on where you are hosted (such as HostGator). If 777 does not work, try 755. It is recommended that you contact your host about what permissions to use if you are not sure. Settings permissions is also known as CHMODing, and can be done using most FTP programs and hosting control panels.
Does your server have the GD library compiled with its version of PHP? This script requires the GD library to be installed. If your images are not working, check with your host to make sure that you have it.
Does your server have mod_security settings that are impeding the scripts functionality? Some servers may have mod_security settings that will stop the script from working. You should always contact your host if you are having problems to make sure they do not have settings enabled that would stop the script from working.
If none of these suggestions work, right-click on one of the images on your website that is not working and then copy and paste the URL into the browser. You should get an error message. Contact your website host and refer them to this URL and error message.
You are probably receiving this error message because you are using a custom permalink structure without a forward slash at the end of your permalink. To fix this issue go to your Settings -> Permalinks and in the Custom Structure field add a trailing slash at the end of your permalink e.g. /%category%/%postname%/. You may need to save this page twice for the settings to be correctly changed.
Go to Pages -> All 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.
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)
WordPress uses Gravatar to add avatars (user images). Register a free account at Gravatar.com, associate it with the email you're using on your WordPress site and upload your avatar image. Now go back to your site and within a short amount of time your avatar will show up in your comments, profile page etc. If you want people to upload an avatar from your own site instead, use a plugin such as Add Local Avatar.
Go to http://cufon.shoqolate.com/generate/ and upload your font (e.g. OTF/TFF file). Check the The EULAs of these fonts allow Web Embedding box. Once you've selected the desired glyphs, check the I acknowledge and accept these terms box and click Let's do this! to generate your cufon font file.
Now open header.php and find:
You will need to create your own cufon font file so it supports your characters. Go to http://cufon.shoqolate.com/generate and upload the desired font from the tarnished-theme/help/lib/files folder. Check the The EULAs of these fonts allow Web Embedding box. Now select the glyphs you want to include (choose the glyphs that support your characters). Now check the I acknowledge and accept these terms box and click Let's do this! to generate your cufon font file. Now upload your cufon file to tarnished-theme/tarnished/js/fonts overwriting the old cufon file. If your cufon file does not overwrite the old file (it may be a new font) please see the question above.
