“Exiria” Documentation by “manu3l9816” v1.0


“Exiria”

Created: 8/November/2010
By: Manuel Cervantes
Email: manu3l9816@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Installing Exiria Theme
  2. Plugins
  3. Setting Up the Home Page
  4. Normal Page, Tagline, Subtitle and Navbar Options
  5. Services Page
  6. Portfolios
  7. Blog Pages
  8. Single Blog Entry
  9. Contact Page
  10. Exiria Widgets
    1. Exiria popular Posts Widget
    2. Exiria Flickr Widget
    3. Exiria Ads Widget
    4. Exiria Map Widget
  11. More Theme Options
    1. Exiria Admin Panel
    2. Exiria Theme Shortcodes
    3. Customize the Excerpt
    4. Global header info and navbar - Services, Portfolio, Blog
    5. Change the size or position of the logo
    6. Enable Lightbox in all the pages

  12. CSS Files and Structure
  13. JavaScript
  14. PSD Files
  15. Sources and Credits

A) Installing Exiria Theme - top

Before activate the Exiria theme

Before you activate the theme make sure you have setup your permalink structure you can do this in the wordpress admin panel just go to the tab "Settings" and choose "Permalinks" and then choose the permalink type you want, then you can activate your theme.

Post Thumbnails

This theme can handle different ways to add a post thumbnail, the first way is a new option added in the edit post page, this is the easiest way, the other method is to set the image as featured using the built in wordpress option, if you don't specify an image for this options then the first image attached on the post will be used as featured image, This method works in all the page templates except the home page slider (the slider only support the first two methods). if you have question please see the video tutorials.

There are two ways to install Exiria theme, the first one:

  1. Log in to your Wordpress admin panel
  2. Open the Appearance tab and choose Add New Themes
  3. Click on Upload, browse your files and find exiria.zip
  4. Click Install Now, wait for your file to be uploaded
  5. If it's successfully uploaded choose Activate link

The other way to intall the theme is this:

  1. Unzip exiria.zip
  2. Using your FTP account go to your Wordpress installation and go to this path: /wp-content/themes
  3. In your themes folder you will see index.php, twentyten folder, etc. just paste your exiria folder into this directory

B) Plugins - top

"The plugins are not necessary to make this theme work" In this theme I'm only using one plugin called Yet Another Related Posts Plugin, here you can find the download link and how to set up the plugin for this theme.

Download Link: http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/

Setup:

Download, install and activate the plugin, then go to the Settings tab and choose "Related Posts (YARPP)" and make this changes:

  1. Find Relatedness option and make this changes:

    Click the image to see full size



  2. Then find Display Options and make this changes:

  3. That's all

If everything is ok you will see something like this:


C) Setting Up the Home Page - top

Home Structure



Jquery Cycle Slider

Here is a video of how you can add slides to this slider and all the options that you can choose, etc. Remember you need to add the category cycle to all the slides that you want to display in thes slider if you want to see the video in vimeo here is the link Exiria Jquery Cycle



Jquery Roundabout Slider

Here is a video of how you can add slides to this slider and all the options that you can choose, etc. Remember you need to add the category roundabout to all the slides that you want to display in thes slider if you want to see the video in vimeo here is the link Exiria Roundabout slider



Jquery Coda Slider

Here is a video of how you can add slides to this slider and all the options that you can choose, etc. Remember you need to add the category coda to all the slides that you want to display in thes slider if you want to see the video in vimeo here is the link Exiria Coda slider



Miniposts

To create miniposts you just need to create a new post in the Homepage Tab and give that post the category of minipost you can see a video of how to create the miniposts, the different styles and examples of how they will look. http://vimeo.com/16343293



Intro Text

To create the intro in the home page just go to the Homepage Tab and click "Add New" and enter the name and the text that you want to display in the home page, then just add the category of intro and that's all



Latest Works Widget

By Default this widget will display the latest works you add to the portfolio page, you can change the name in the Exiria admin panel - Homepage Options Tab, if you don't want to use that widget you can add another just go to the Appearance Tab and click "Widgets" and you will see something like this Just add your widgets in the Home page Widget Sidebar, that's all.


D) Normal Page, Tagline, Subtitle and Navbar Options - top


http://vimeo.com/16530710

E) Services Page - top

Note

You may notice that if you add custom icons in the navbar of the services page those icons will only be displayed in the services page and not in the single services page, you can change that in the Exiria admin Panel just choose services single and add the custom images that you add to the services page navbar , for more information click here More information.

To create a services page go to the tab Pages choose add new and enter the title of your page, in the page attributes choose the services template that you want to use and click publish.

And you can learn how to add your services with this video tutorial http://vimeo.com/16527274.


F) Portfolios - top

Note

You may notice that if you add custom icons in the navbar of the portfolio page those icons will only be displayed in the portfolio page and not in the single project page, you can change that in the Exiria admin Panel just choose Single Project page and add the custom images that you add to the services page navbar , for more information click here More information.

General Options

The general options includes all the fields to set up the thumbnail and the lightbox options, these are the available options.



  1. The Project Thumbnail: with this option you can upload a thumbnail to use it as the project image (if you don't specify another image for the lightbox this image will be used)

  2. Lightbox image: You can set one image for the project thumbnail and if you want to use another image for the lightbox you can submit your new image using this option.

  3. Lightbox URL: Use this field if you want to use an external image, video (youtube, vimeo, etc) for the lightbox effect

  4. File Type: Here you can specify what kind of content is displayed in the lightbox, this is only used for the hover effect, default is image:

  5. Lightbox Title: This is the title that is going to be displayed in the Lightbox effect.

  6. Lightbox Description: This is the Description displayed in the Lightbox effect.

  7. Lightbox Width: Here you can set a specific width for the lightbox (only for videos and iFrames)

  8. Lightbox Height: Here you can set a specific height for the lightbox (only for videos and iFrames)

Check the video tutorial http://vimeo.com/16425822



Project single page

For the project single just add the header title and subtitle and the images and that's all.



Create different portfolios with different content

To create different portfolios just go to the Pages Tab and choose add new, then enter the name of the page, in the page attributes choose the template that you want to use Portfolio Style 1, Portfolio Style 2 and Portfolio Style 3, then at the bottom find the option Category for the Portfolio and enter the category slug that you want to display and that's all.




G) Blog Pages - top

Go to the Pages Tab and click on Add new, give the page any name you want and from the page attributes choose the Blog Page style that you want to use and publish your page, that's all and all the post you create will be added to this page. Posts Options


H) Single Blog Entry - top

You can set which blocks you want to display in the single entry page, for example if you want to display the comments, related posts, etc. just go the the Exiria Admin Panel and choose the tab Single Post, there you can make all the changes important, if you want to display the author information in the entry you need to enter your information first so in the wordpress admin panel go to the tab Users and click users,then edit your user and you will see something like this:


And the you will see something like this:


I) Contact Page - top

If you want to add a contact page just go to the Pages Tab and click Add New, enter the name and the content for your page and in the page attributes choose the Template Contact Page, Then just go to this folder includes and inside find and open this file ajaxSubmit.php at the Top you will see something like this $address = "example@example.net"; just remove example@example.net and enter your own email address.


J) Exiria Widgets - top

Exiria Popular Posts Widget

This is a simple widget that displays the most popular posts of your blog based on the number of comments, just go to the Appearance tab and click on Widgets then just find the widget Exiria Popular Posts Widget and add the widget to your sidebar, you can choose the name and the number of posts to display.

Exiria Flickr Widget

This widget displays your flickr pictures, just go to the Appearance tab and click on Widgets then just find the widget Exiria Flickr and add the widget to your sidebar.

Now you just need to configure your widget, you will see something like this:

If you want to know your flickr id just click the link idGettr and you will see this page
Just enter your username and click find and you will get your Flickr ID just copy the id to the Exiria flickr widget and choose the number of photos that you want to display with this widget.



Exiria Ads Widget

This is a simple widget that displays ads in your sidebar, just go to the Appearance tab and click on Widgets then just find the widget Exiria Ads Widget and add the widget to your sidebar, the options: you can choose the name for the widget and in the fields Ad Image x URL you need to enter the full path to your image (e.g. http://www.example.com/wp-content/uploads/ad1.gif). and in the fields Ad x Link you need to enter the link (e.g. http://www.themeforest.net)

You can add the widget all the times you want.



Exiria Map Widget

This is a simple widget that displays a google map in your sidebar, just go to the Appearance tab and click on Widgets then just find the widget Exiria Map Widget and add the widget to your sidebar, enter the name for your widget and then go to http://maps.google.com/ and find the place that you want to use in your widget then in the top right of the map you will see and option called Link or Enlazar, just click that option on you will see something like this: .

The code we need is the iframe code, important you need to change the size of the iframe code to width="255" height="236" you will have something like this: <iframe width="255" height="236" frameborder="0"... then just add that iframe code in your widget and that's all.


K) More Theme Options - top

Exiria Admin Panel

You have a lot of options to customize this theme, the Exiria admin panel is easy to use and below every option you will find a description to learn what that option can do, if you have any question or doubt about how to use the admin feel free to contact me through my profile page at Theme Forest.

Wordpress Shortcodes

This theme includes shortcuts to create buttons and columns, this is how the shortcuts look. (If you want to create a button in your wordpress editor copy the one of the next examples.)

Buttons shortcodes

Buttons Shortcuts

[btn href="#"]Text displayed in the button[/btn]

[btn_mail href="#"]Text displayed in the button[/btn_mail]

[btn_arrow href="#"]Text displayed in the button[/btn_arrow]

[btn_home href="#"]Text displayed in the button[/btn_home]

[btn_details href="#"]Text displayed in the button[/btn_details]

[btn_comments href="#"]Text displayed in the button[/btn_comments]

[btn_user href="#"]Text displayed in the button[/btn_user]		
		

Separators Shortcodes

  1. [full-sep] : full page separator style 1
  2. [full-sep2] : full page separator style 2
  3. [separator] : use this separator in a page with sidebar

Columns Shortcodes

Three Columns
[one_third]
<h3>Column 3</h3>
<p>Text here.</p>
[/one_third]

[one_third]
<h3>Column 3</h3>
<p>Text here.</p>
[/one_third]

[one_third_last]
<h3>Column 3</h3>
<p>Text here.</p>
[/one_third_last]

[clear]
Two Columns
[one_half]
<h3>Column 3</h3>
<p>Text here.</p>
[/one_half]

[one_half_last]
<h3>Column 3</h3>
<p>Text here.</p>
[/one_half_last]

[clear]
Four Columns
[one_fourth]
<h3>Column 3</h3>
<p>Text here.</p>
[/one_fourth]

[one_fourth]
<h3>Column 3</h3>
<p>Text here.</p>
[/one_fourth]

[one_fourth]
<h3>Column 3</h3>
<p>Text here.</p>
[/one_fourth]

[one_fourth_last]
<h3>Column 3</h3>
<p>Text here.</p>
[/one_fourth_last]

[clear]

Blockquote Shortcode

[quote]
your text here....
[/quote]

This will create something like this (only for the page with sidebar):

Wordpress Excerpt

This theme use a different function to display the excerpt, this function gives you the ability to choose if you want to display a Read more link (or change that text if you want, etc.) for example open your blog.php file and find this line:

<?php the_news_excerpt('70','Read More','all','plain','no'); ?>		
		

This will give you an excerpt of 70 words, that preserves the strong, em, p tags, etc. , displays a "Read More" link without any sort of container element, and does not convert text to smilies. so you can easily change the number of words, if you want to display the read more link and even change the text for example Continue Reading,etc. allow smilies, etc

Golbal Navbar and Header title and subtitle

For example if you create a new Portfolio page and you add your custom Navbar, that custom navbar will only be displayed in the portfolio page you created but if you see the single Project page you will notice that the page does not have your custom navbar, you can change this just go to the Exiria Admin Panel and choose the tab Single Project Page and you will see something like this:



If you want to display a global Header Title and Subtitle you just need to enter your title and subtitle, then just choose if you want to display the social links in the navbar and you can add your custom icons in the navbar.

Is the same Process for the Single Services Page and single post page.



This is really simple, just go to the Exiria Admin panel and in the tab General Settings find this field Custom CSS in that field enter this code:

#logo{
	width: 300px;
	height: 250px;
}

Just replace the width and height with the size of your logo, and you can change the margin adding something like this: margin: 23px 0 0 5px;



By Default the lightbox is only used in the homepage and the portfolios but you can activate it in all pages, just go to the Exiria Admin Panel and in the General Settings tab find the option Enable Lightbox in all the pages and change it to true and that's all.



Now to create a link with lightbox you have to use this code:

This is a link with lightbox
<a href="http://www.site.com/image.jpg" rel="lightbox" title="title">Link with lightbox</a>


This is an image with lightbox
<a href="http://www.site.com/image.jpg" rel="lightbox" title="title">
  <img src="http://www.site.com/thumb.jpg" alt="Lightbox Description"/>
</a>

You can enter youtube videos, vimeo videos, images, swf videos, etc.

If you add the rel attribute like this rel="lightbox" this will only create the lightbox for that image but you can create all the galleries you want just add the name of the gallery like this rel="lightbox[set1]" (I'm using set1 as example you can add any name you want), this will create a gallery and you will se the buttons to navigate the images.


L) CSS Files and Structure - top

This theme use the next css files, the files are loaded only if they are required for the theme.

Colors Stylesheets

  1. Aqua.css
  2. Black.css
  3. Blue.css
  4. Gray.css
  5. Green.css
  6. Space.css

Theme Layout

  1. Style.css
  2. Buttons-pagination.css
  3. Slider1.css
  4. Slider2.css
  5. Slider3.css
  6. ie.cs

If you want to make some modification to the site structure you need to open the file style.css and make all the changes that you want, the file slider1.css is used by the Jquery Cycle Plugin, slider2.css is used by the Roundabout Slider, the slider3.css file is used by Coda Slider.

The File ie.css is used to fix Internet Explorer issues only edit this file if you know what you are doing.


M) JavaScript - top

This theme works with the next Javascript files..

  1. jQuery
  2. jQuery.easing.1.3.js
  3. cufon.js
  4. contact.js
  5. prettyphoto.js
  6. codaslider.js
  7. jquery.cycle.all.js
  8. jquery.roundabout.min.js
  9. tiptip.js
  10. My Custom scripts

  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. The jquery easing plugin give this the some nice effects
  3. Cufon is a nice plugin to change the font of this theme .
  4. anything slider is a great way to show some of your works and some other things is used in the blog (popular posts)
  5. The contact.js file holds the effects configuration of the contact form.
  6. Prettyphoto is a nice jquery plugin used for the lightbox.
  7. This is a jquery content slider plugin, is used in the home page style 3
  8. jQuery cycle is a plugin with a lot of effects is used in the home page style 1
  9. this plugin is used in the home page style 2
  10. Tiptip is used for the jquery tips in this theme
  11. All my custom scripts are used to start the effects in the pages, the only scripts that are loaded in all the pages are the menu.js file and the scripts.js file.

O) PSD Files - top

I've included 11 psds with this theme:

  1. Home.psd
  2. About.psd
  3. Services.psd (with the 3 different services styles)
  4. Portfolios.psd (with the 3 different portfolios styles)
  5. Blog.psd (With the 3 different styles)
  6. Contact.psd
  7. Buttons.psd (so you can create all the buttons that you want)
  8. Buttonsgreen.psd (so you can create all the buttons that you want)
  9. Header home.psd (To edit the background of the home page easily )
  10. Header subpage.psd (To edit the background of the subpages easily)
  11. Browser.psd (to edit the browser for the home page style 2)

All the psd files are well organized so you will not have any problem to edit what you want.


N) Sources and Credits - top

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

Scripts

Graphics


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Manuel Cervantes del Rosal

Go To Table of Contents