Theme Documentation

Installation Preparations

Installing the theme can be done two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

1) Uploading by WordPress Theme Upload

Be sure to unzip the file "theme-felici.zip" you've downloaded from your download page at ThemeForest before uploading. Uploading the ThemeForest ZIP file directly will result in a "Missing Style Sheet" error.

Login to your WordPress admin.
In the "Appearance → Themes" menu click the tab "Install Themes"
At the top of the page click, "Upload", then click the file input to select a file.
Select the zipped theme file, "Felici.zip", and click "Install Now"
After installation you will receive a success message confirming your new install.
Click the link "Activate"

2) Uploading by FTP

Login to your FTP server and navigate to your WordPress themes directory. Normally this would be "wp-content/themes"
Unzip the files from the zipped theme.
Copy the folder "Felici" to your "wp-content/themes" directory.
Check if the cache folder permissions are set to 777.
After the files finish uploading, login to your WordPress admin.
In the "Appearance" menu click "Themes"
Click "Activate" for the theme "Felici"

After you've installed your theme you need to check if the permissions are properly set. The cache folder inside the theme has to be set to 777. Please make sure you've done this before activating the theme

Using the TitanInstaller

When you have a fresh install of WordPress your able to skip all steps except for this one.

The installer is the perfect solution for everybody who's in a hurry and doesn't have time to read the docs or wait for support. With a few steps your new theme should look exactly like the demo.

There are a few thing you need to consider before using this great and powerful function. Each section has it's own explanation, useful links and warnings. Please read them carefully before clicking on any buttons.

First thing you need to do is to click on import theme content, you notice that it slides out and a big blue/green button appears. Click on this button and wait a few second. When it takes longer then 5 a 10 second then you didn't prepare yourself properly.

Make sure the cache folder permissions are set to 777, your using absolute paths, you have sufficient upload quota on your server and GD library is installed on your server.

When the message "All Done" appears you've successfully imported the theme's content. Now open the "Activate all Settings" and click on the big button to activate all options. That's it, now all that's left is to ad your own images and text.

Felici is using TimThumb to resize the images. TimThumb requires the GD library, which is available on any host sever with PHP 4.3+ installed. Use absolute paths for your script and images, if the images are not showing please set the cache folder permission to 777. Still encountering problems with your images, then please visit this post

Install theContact Form 7 plugin. We've added styling for this contact form plugin. Any other would work but when you want it to look good then use this one.

None of the images inside the demo are included inside the download package. The download package contains a single default image.

Setting up the Slider

The homepage news slider is fixed and is explained a passage later, TThis guide will explain you how to create sliders and how to ad them with shortcodes inside your content.

Felici is using one slider for the homepage posts but with our Slider Manager your able to create as many sliders as you need. These slider can be pulled in to pages/posts with shortcodes

The slider stage is packed with a fade slider, a html 5 slider and jQuery slider. (The Fade Slider is Video compatible, the jQuery and html5 not)

To create a slider, just head over to the slider manager tab inside the Options menu.

Then enter your sliders name and click on create.

Then you will see the following options. Edit them as you wish.

Slider title
Width
Height
Slider type
Interval in seconds
Autoplay option
Activate controls
Controls

Time to add your images to the slider, this is really easy and should not require any explanation. Click on the "add slide" button to ad your slides.

Slider title - Title of your slider.
Slider link - where do you want to send your visitors to.
Slider Image - upload your image, make it larger then 1000px wide for homepage slider.
Slider Description - Add description only when you select half stage at Stage type.
Media type - Only active when fade Slider is selected, youtube, vimeo, dedicated or image.
Video URL - When video service or dedicated is selected, add the link to the video in here.
Don't forget to save at the top of this section, next to the create button.

You can use sliders in your content using the slider shortcode, usage is very easy. After you have created your slider as explained above and use this shortcode, in the name attribute add the name of the slider you've created.

[titan_slider name='jquery' /]

Image Resizing

The resizing of the images from the portfolios, galleries and sliders will be managed from this option. Your able to select between TimThumb, WordPress Core Resizer and none. Then there's also the ability to choose between Hard resize, Smart crop and resize and resize Proportionally.

These option are a little difficult to explain so it's best to experiment with these setting until you have find the best cropping solution. Or disable them if you want to load your the exact size.

Set up the Home Page Content

Homepage news slider

The homepage slider is really easy and only requires you to create your posts as you normally do and assign them to a category for the news slider. After the posts are created open the homepage option panel and you will see a dropdown and a slide. Select Category for Homepage News Slider will be the category for the news slider. And the slide Number of Posts for Homepage Slider will let you select the amount of posts you want to show. Use equal numberings for best performance, 4, 8, 12 etc.

Homepage columns

The homepage columns are managed by it's own Layout manager, just create your posts and assign them to the proper categories. Then drag your widgets from the right to the left section and select your category from the dropdown.

You're able to drag these columns up and down and add as many as you need. No limits, only be careful not to add the same categories. Not that the layout manager won't work but you will be punished by google for doing this.

One more thing left, what if you need more the 4 news items inside a column. Well then we have some nice options for this as well. Go to your homepage panel and find this

Just select the amount of posts you need for each column. The accordion widgets can have any number, the grid widget needs equal numberings. 3, 6, 9 etc.

Sidebar location

All that's left are the sidebars, create them with our sidebar manager (explained in another section). After you've created your sidebars and populated them with widgets you can select the sidebar you want to show on the homepage in here. You can also select left or right sidebar here.

Adding the Custom Menus

When you've installed the theme with the titan installer then the menu is already active for. If not then it's real easy to add your own.

Go to Appearance → Menus
Enter Main Menu inside the Menu Name field and click save.
Next select Main Menu from the theme locations dropdown.
Now all you need to do is to drag the menu items from the left side to the main menu stage.

When your done your able to apply the menu to the "Main Menu" area which can be found under "Theme Locations". Do the same for the footer menu and for the top menu.

It's really easy, only thing to keep in mind is to stay focused and don't go over it when your in a hurry since it's a rather complex and time consuming process to fill in all your menu items.

Of course when using the Titans Installer you don't have to worry about this since then it's all done for you ;)

Some Useful Menu Tutorials

Setting up the Footer

The footer isn't really that difficult and therefore we keep it short. It works just like any other footer area. We have a footer tab inside the option panel from where your able to select if you want to show the footer or not. And your able to select the layout of the footer.

When you select for example the 2 column layout, two extra widgets areas will be created for you. When you select 5 columns layout for example then 5 widget areas will be created for you. Just populate them through the "Widgets" area and when your not happy with the layout then you can come back here and select a different column structure.

You can decide if you want a footer menu or not and your able to ad the footer copyright text in here.

Custom Post Manager

Custom Post manager allows you to create custom posts on the fly, creating them is very easy. Let's get started on it.

Go to CustomPost manager in theme options menu and click on it.
The interface is fairly simple , it will ask for the custom post type name, enter it. Let's say you want to create a Book custom type that will keep a collection of book posts. Enter Book and click on create, then check all the setting and hit save. You custom post type is now ready.
When you know what this add-on is for then you already know what to do next. This far to complicated to explain it when you never have used it.

Please keep in mind that this is something for the advanced user, you need to know how to use the custom post types and for what reason. Don't you know what it is or what it does then don't touch it because then it's just to complicated for you and you don't need it.

Font Manager

The Font manager allows you to import and use your custom fonts in the theme. Usage is very simple. To start off you will first need the TTF or OTF or PFB file of the font you are going to use. Then go to the Cufon site

This web application known as Cufon converts the font into a js file which is then pulled in by our Font manager. Follow the steps.

Upload the font files depending on the font weight, regular font will be uploaded in first upload block, bold type will be uploaded in second block. Don't worry if you don't have all font files.
Next click the checkbox to accept the condition that font embedding is permitted by your font.
Now scroll down and you will see, include glyphs. The series of checkboxes that states which characters to support, don't tick them all. Only Tick uppercase, lowercase, numerals, punctuations and WordPress punctuations. Ticking all of them makes the file size of generated font very big which in turns in to slow down the site.
Scroll down to the bottom term of I agree to the terms and click on the button, Let’s Do This.
Head over to the WP admin and to the bottom left in theme option menu you will see the font manager link. Click on it.
Upload that file here and hit save.
Now go to the options panel and click on typography tab, scroll down to option Google Web Font or Cufon Font, select Cufon Font and then in the Cufon Font drop down list select your font ( it will be visible after you've added it inside the font manager) and hit save.

When you don't like Cufon and want to use Google Web Fonts then please do so. Just select the google web font option and select a font you like. Is the font you like not inside the list then simply activate the "Custom Google Web Font" option and ad the name of the font inside the input. Check out all web font by google here

Sidebar Manager

The Sidebar Manager allows you to create dynamic sidebars on the fly, creating them is very easy. Let's get started.

First goto options panel menu and click on sidebar manager.
Now enter sidebar bar name and click on create and a bar will be added in the bottom dashed area which represents a sidebar.
When you are satisfied hit save and that's it. Now go to widget panel and after the footer widget holders you will see the dynamic sidebars.
The sidebars can be arranged and if you want to deactivate a sidebar for some time and do not wish to delete it drag it to the right dashed area and hit save. Now they will be present but won't appear in WP widget panel.

All that's left is to populate the sidebars you've created and assign them to the appropriate page. For example, i create a new sidebar and name it contact sidebar.

Then i ad widgets to this contact sidebar and create a contact page. Now select the option below the page editor and select the sidebar placement.

One important thing to note here is to keep sidebar name meaningful and do not add numbers or special characters as FIRST LETTER.

Layout Manager

The Layout Manager is new, we've added this because we've made a different type of template. Because it's always such a hassle to set up your homepage with content rich news sites we brought in the Layout Manager

This works really easy, just drag the widgets from right to left and select the category for each widget. You can use all columns if you wish or full width accordion posts. It's totally up to you what will be shown on the homepage.

Selecting Styles

We have 10 pre-made styles and the default style. Leave default on if you like the default style, if not then select the Plain shades option and select one of the 10 styles.

We have 10 pre-made styles and the default style. Leave default on if you like the default style, if not then select the Plain shades option and select one of the 10 styles. If you want to create a new style all you need to do is to open sprites/stylesheets/plain/ and duplicate a folder, rename this folder. Then open default.css and change the colors inside the css. Only color styles are present inside these stylesheets, so you can't mess anything up.

Then you can select a texture for the background, want to load your own texture/pattern then just create a nice repeatable image and add it inside sprites/textures/ as your-texture.png. Then open hades_framework/option_panel/options.php and on line 1059 find this code.

$options[]   = array( 
						  "name" => "Theme's Background Texture",
						  "desc" => "Select a different texture here.",
						  "id" => $shortname."_header_texture",
						  "type" => "select",
						  "options" => array('none',"pixel-noise","diagonal-lines","metal-noise","crossed-noise","
						  scratched-bg","leather-noise","noise-squares","noise","pixel-large","raster"),
						  "std" => "waves-texture" 
				  	 );

The add your the filename like this (without .png)

						  ,"your-texture"

Refresh the option page and your texture is added.

Adding Backgrounds

Or you can add full backgrounds, just by adding them in the next section. Upload image, set position and set repeat or not.

Visuals

The Notification Manager settings can be found at the Notice Settings, the first part is the Visualization of the message bar. Your able to set the background color, text color, button background and button border color and button label color.

Notification Settings

The second part of the notification manager is the settings. Your able to upload a image, add your text and set the label for the button. Also the time the notification bar should be visible can be set in here.

Columns Shortcodes

The theme provides standard variations of column shortcodes which can be used to create complex column layouts easily.

The usage syntax is very easy, below table shows the list of available width shortcodes, the width is relative to the 980px box layout. Insert the shortcode in the editor and add your content in between them.

The Titan Shortcode button provides a convenient way to add column shortcodes.

The last column shortcode must have _last word appended in the shortcode. For example if the last shortcode is [one_third] then it should be [one_third_last] your content... [/one_third_last] .

Note: one important point to note here is, to avoid breaking the columns into next line make sure the logical sum of columns is 1 , like suppose you want to add 2 half width columns then

Then two columns will appear on same row, perfectly aligned. If you add columns whose sum exceed 1 then the last column will appear in next row.

Media Shortcodes

Media shortcodes provides a very easy way to add videos or images to your theme.

Youtube

To embed youtube videos use the youtube shortcode.

[youtube id='video id here' width='400px' height='400px' /]

The id of the video is in the url http://www.youtube.com/watch?v=mfrlXsvYcS8

In the above Youtube video url, id is mfrlXsvYcS8, similarly for all Youtube videos you can get the video id's like this.

Vimeo

To embed Vimeo videos use the Vimeo shortcode.

[vimeo id='video id here' width='400px' height='400px' /]

The id of the video is in the url http://vimeo.com/32238183

In the above Vimeo video url, id is 32238183, similarly for all Vimeo videos you can get the video id's.

Self Hosted Videos / External Videos

You can also embed self hosted videos or external videos on a page, for that we use video shortcode.

[video src='link to the video' width='400' height='400' title='My Video'/]

The src should container the direct url to the video not the page, for example I have taken a link of video from videohive.net - http://3.s3.envato.com/files/8596708/preview1_1_1.flv

Important thing to note here is that height and width does not contains px while youtube and vimeo does.

Image Wrapper

Image wrapper provides a way to add images and align them easily

[imagewrapper src='your image url here' caption='this is cool' class='' width='400' height='400' align='' /]

src contains the image path. Caption is addition text you want to add with the image. class attribute can be used to add addition classes to the image, incase you need to get the reference of the image.

Width and height are the dimensions in numbers do not add px!

Align attributes floats the image depending on the value, it accepts 3 values left, right and none. If left is added the image will float left, if right is added image will float right and if none is added image will not align anywhere.

UI Shortcodes

Button

The button shortcode allows to create a full fledge button within seconds, there is a robust panel which you can access from titan shortcode UI -> button. The panel will do the job just fine, but incase you wantjust a little more details. Syntax is;

[button borderRadius='3px' background='#c9c9e0' border='#c9c9e0' color='#040429' link='http://' size='small'] test [/button]

We will now the see the attributes one by one

borderRadius - defines the css3 border value in px ( does not works in IE 7,8 )
background - the background color of the button.
border - the border color of the button
color - the color of the button text
link - the url where the button should point too.
size - the size of the button accept values are small, medium, big.

Message Boxes

This shortcode allows you to create the 4 different styled message notifications.

[error_box title="your title"] your message here ... [/error_box]

[success_box title="your title"] your message here ... [/success _box]

[information_box title="your title"] your message here ... [/information _box]

[warning_box title="your title"] your message here ... [/warning _box]

Separator

This shortcode adds a visual break with a horizontal line and a link with arrow, which on click scrolls to top.

[separator /]

Widget Shortcodes

Widget shortcodes allows you to create tabbed, accordion and google map widgets easily.

Tabs

To create tab widget, the usage is easy just follow the syntax

[tabs][tab title="your tab1 title"] your content here... [/tab][/tabs]

First you will need to create a parent [tabs] shortcode inside that you will add the actual tab. The tab shortcode will contain a title which will appear on tab and the content inside the tab.

Accordion

To create an accordion widget, follow the syntax

[accordion][section title="your tab1 title"] your content here... [/section][/accordion]

The accordion is the main shortcode, inside that you can add sections with title and content between the section shortcode.

Note: You need to add new line between section or tab shortcode, else WordPress will empty p tags and it will break the widget.

Google map

You can create google maps easily, to create the map follow the syntax

[map address='' width='300' height='' /]

In the address attribute add your address, add width and height for google map in width and height attributes.

Post Shortcodes

Posts

This posts shortcode is used to show posts but provides more filters.

[posts count='3' excerpt=true excerpt_length='100' author_name='' category_name='' tag=''
post_type='post' /]

Attributes are

Count - show number of posts.
Excerpt - show the extra text below title.
Excerpt_length - show number of words.
Author_name - show posts from specific author.
Category_name - the category slug to show the posts from specific category.
Tag - the tag slug to show specific posts from.
Post_type - select the type of posts to show like post, portfolio, gallery and events.

Typography Shortcodes

Dropcaps

This shortcode makes the letter stand out usage is simple.

[dropcap1] 1 [/dropcap1]

Quote

If you want to stand out the text, you can use the quotes.

[quotes]your text here .... [/quotes]

Similarly if you want the quotes to be aligned left, use this

[quotes_left] your text here [/quotes_left]

And to align right use this

[quotes_right] your text here [/quotes_ right]

Misc Shortcodes

Slider shortcode

You can use sliders in your content using the slider shortcode, usage is very easy. Create a slider in our Slider Manager.

Then use this shortcode and in the name attribute add the name of the slider you have given.

[titan_slider name='homepage slider' /]

Social Shortcodes

Twitter

To add the tweet button, use the following syntaxes.

[tweet name="wptitan" hashtags="test1,test2,test3" text="exciting offers" /]

[tweet name="wptitan" hashtags="test1,test2,test3" type="horizontal"/]

[tweet name="wptitan" hashtags="test1,test2,test3" type="vertical" /]

There are 43 parameters.

name - which appears at @yourname in the tweet
hashtags - #keyword for search related purposes. Use comma for multiple keywords
text - you can add your own default tweet text.
type - there are 3 types of button layouts available, none (by default present), horizontal and vertical.

Facebook

To add a facebook like button to the page use the following syntaxes.

[facebook/]

[facebook layout="button_count"/]

[facebook layout="box_count"/]

There is only one option which specifies the like button, it has 3 types, standard ( by default present ), button count and box count.

Google+

To add a Google +1 button use the following syntaxes.

[google/]

[google size="medium"/]

[google size="standard"/]

[google size="tall"/]

There is only 1 option present and that' the size. By default it is small other options are medium, standard and tall.

Digg

To add a Digg button use the following syntaxes.

[digg/]

[digg size="Compact"]

[digg size="Medium"]

[digg size="Wide"]

There is only 1 option present and that' the size. By default it's the Digg Icon, other options are Compact, Medium and Wide.

StumbleUpon

To Add a stumble button use the following syntaxes.

[stumbleupon/]

[stumbleupon layout=2 /]

[stumbleupon layout=3 /]

[stumbleupon layout=4 /]

[stumbleupon layout=5 /]

[stumbleupon layout=6 /]

There is only 1 option present that's the layout. By default it's 1, other options are numbers till 6.

Localization Guide

We've did our best to bring you a few pre translated PO and MO files. German, Dutch and French are already translated for this theme. Just follow the instructions below and you be good ;)

Inside this section you will find a small and very easy to understand guide about the way to ad PO and MO files to this theme. Make sure you have translated your WordPress set-up. read through the following list about the way to achieve this. It's really easy, in some cases you can even download a copy of WordPress in your language.

Next you find the PO and MO file of this theme inside the lang folder inside the root of the theme. Download these files and open the PO file with Poedit. When you've opened the .PO file you will see a screen like this.

When your language isn't already inside the theme's language folder then next thing you need to do is to translate all items until the last line. After that you need to save the file as both .PO and .MO. Rename the PO and mo files to your language code. For example when your language is Dutch and you have set the translation option inside your config.php file to "define ('WPLANG', 'nl_NL');" then you need to rename your PO and MO to nl_NL.po and nl_NL.mo. Look at the pre-translated files to see how it's done.

After you've saved your po and mo you need to upload them to the root of the theme. Not inside the lang folder but in the root of the theme. If this doesn't work then rename the lang folder to language and ad the files in there.

Localization tutorials and resources

Credits

We would love to thank everybody for their great work and for letting us use the resources. All resources are GPL , Commercial licensed or we have written permission for usage.

None of the images inside the demo are included inside the download package. The download package contains a single demo image.

jQuery plugins - popeye, prettyphoto, kwicks, jQuery tools, uploadify and jQuery UI
Kriesi Pagination code
Stock Imagery from Fotolia
Icons by http://iconsweets.com/, http://famfamfam.com/lab/icons/silk/, Agile Toolkit Icons and http://somerandomdude.com/work/iconic/

Structure

Theme structure information, so you know where everything is located in case you want to customize things yourselves.

Cache - folder used by timthumb to resize images for sliders, galleries and portfolios. Note; if the images are not showing please set this folder permission to 777
Lang - Language files which you need to use to localize your theme.
hades_frameworkstrong> - This is our custom build framework we sue for all our themes.
Sprites - All styling related items are inside here

Felici - Premium Magazine Theme