Ratius - Documentation

Support Forums More Themes

Thank you for purchasing one of our products. If you have any questions that are beyond the scope of this help file, please feel free to visit our Support Forums and we will be more then willing to guide you through. Also when you've found a bug or any sort of issue, visiting the Support Forums is the fastest way to receive support. Thanks so much!

× Heads up! Be sure to unzip the file "Ratius.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.

First we need to install two plugins, the contact form 7 plugin and the bbpress plugin. Don't need them then just proceed without, these plugins are not obligatory, they are just needed to get the same structure as the demo.

When your not going t use the bbpress plugin then you need to delete all forum related page templates as they will cause an error


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.

WordPress Upload

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

Ratius is using TimThumb among others 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

Uploading by FTP

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

Using the Installer

When you have a fresh install of WordPress your able to skip all steps and just follow this explanation. The installer is the perfect solution for all 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.

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, except a few items such as the demo imagery, widgets etc. But they will also be explained. 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. Click on this button and wait a few seconds. When it takes longer then 5 a 10 second then you didn't prepare yourself properly. But you have to wait until you receive the message All Done

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

Montage is using TimThumb to resize the images.TimThumb requires the GD library, which is available on any host sever with PHP 4.3+ installed. Please use absolute paths for your script and images and 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 for help about this topic.

Heads up! The homepage has to be set up with the different helpers, like slider manager, layout manger, widgets and custom menu. We will explain the complete process here. Remember that you don't have to create a home page, it's all automated and managed through the aforementioned elements.

Make sure your latest posts is selected

Our themes uses default WordPress front page for showing home content, so make sure to leave this option as default.

if you want to edit the code for home page, please goto theme folder and open index.php file. It generates Home Page. Do this only if you are comfortable with handling code and have knowledge of WordPress.
Always make sure before starting that Your Latest Posts is selected since many are used to other themes which are using a static page to display the home page.

Custom Menus

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

  1. Go to Appearance → Menus
  2. Enter Main Menu inside the Menu Name field and click save.
  3. Next select Main Menu from the theme locations dropdown.
  4. Now all you need to do is to drag the menu items from the left side to the main menu stage.
  5. All that's left is to create a new menu for your footer and that's it.

Some Useful Menu Tutorials

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.

Home Slideshow

With our slider manager your able to create as many sliders as you need with different structures and formats. Only for the homepage we've got a fixed tab since we don't want anything to go wrong with it.

There are a few functions inside the homepage slider which where not possible to recreate on the other pages and vice versa.

Features available to home slideshow tab only

Because Home page needs to be spiced up more than other pages , there are certain features changed than rest of the tabs. We will show you the features, so that you don't get confused.

  1. No height & width options - Since Home page needs to be pixel perfect, home slideshow does not have any width or height options, that is internally controlled by the theme.
  2. No Image Gallery - No gallery option has been provided for home page because it is very rarely used on the front page.
  3. No Slider Option - Slider can be disabled by going to Slider Type dropdown and selecting it to none !
Click on Slider manager in the side menu and then click on the blue Home Slideshow to open up the homepage slider settings and image upload section.

Slider Settings

With our slider manager your able to create as many sliders as you need with different structures and formats. Only for the homepage we've got a fixed tab since we don't want anything to go wrong with it.

There are a few functions inside the homepage slider which where not possible to recreate on the other pages and vice versa.

  1. Enter Time in Seconds - Enter seconds of duration in between slides
  2. Slider Type - Fade, jquery or gallery
  3. Responsive Slider - Yes/No
  4. Preloading - Yes/No
  5. Show Description - Yes/No, Disable the description. Only counts for fade and jQuery
  6. Autoplay - Yes/No, decide if you want your slider to autoplay or manual
  7. Arrow Controls - Yes/No, choose between arrows or bullets
  8. Bullet Controls - Yes/No, choose between arrows or bullets

Upload Media

All that's left is to upload your images/videos and then the homepage slider is automatically activated and populated.

  1. Add images
  2. Add Videos
  3. Edit your slide
  4. Drag your slide
  5. Delete your slide
  6. Caption colors
  7. Caption positions
Lot's of new features such as drag and drop functions, activate bullet/arrows or not, responsiveness or not, slider type and more.

Homepage live editing

With our latest addition you'r able to create almost any type of structured page with all kinds of elements inside without having to visit your WordPress dashboard. Working with this is really simple and useful.

You will find the live editing button in the front-page below the slider once your logged in as administrator.

To start populating the homepage simply click on the Click to Activate Live Editing button below the slider.

Then start populating and add the columns needed, after columns are added edit and add the elements needed for each column.

Columns:

  1. 1 Column
  2. 2 Columns
  3. 3 Columns

Available elements are:

  1. Post/Review list with thumbnails
  2. Post/Review list without thumbnails
  3. Featured Post/Review with list
  4. Single Post Review element
  5. Slider element
  6. Facebook Like element
  7. Text area, short-code and html supported.
Click on the Click to Activate Live Editing to open a element to start adding content. Don't forget to hit save when your done and to deactivate live editing to show your changes.


live-editing from wptitans on Vimeo


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 4 columns layout for example then 4 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.

Be warned! Wordpress saves sidebars by number instead of name, so when dynamically new sidebars or footer areas are added or deleted it's possible that WordPress swaps or deletes widgets.

Slider manager

On the right you will see a video which demonstrates how to create and add slides through shortcodes, pages and it will learn about all the settings.

slider from wptitans on Vimeo.

Home page Live Editing.

With our latest addition you'r able to create almost any type of structured page with all kinds of elements inside without having to visit your WordPress dashboard. Working with this is really simple and useful.

1. 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.

Be warned!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.

  1. Go to CustomPost manager in theme options menu and click on it.
  2. 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.
  3. 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. This addon is built for those who know what it for, if you don;t know what it is for then don't touch it.


2. Sidebar Manager

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

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

  1. First goto options panel menu and click on sidebar manager.
  2. Now enter sidebar bar name and click on create and a bar will be added in the bottom dashed area which represents a sidebar.
  3. 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.
  4. 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.

Check out the Sidebar Video


3. Review functions

The review functions are pretty easy and straight forward, we will add a video on the right which will cover all elements about the usage of the review functionality.

review walkthrough


4. Ticker functions

Ticker widget shows moving post titles just below main menu. It can be configured to show any post or reviews and can be filter or sorted in any way you like.

This widget is by default visible on home page, single posts, single review pages and pages which are using custom builder template.

If you want this ticker to be present on all the pages, it can be done using the following steps on the right.

  1. Open header.php file in Ratius theme folder.
  2. Delete all code and add the code on this page, http://pastebin.com/tgWEWFsu

Doing it like this and its still possible to enable or disable the ticker through the options panel in the Ticker Panel.

How to Set Categories for ticker widget?

First go to the option panel, then go to the Ticker Panel tab. You will see a text field with a label, enter Post/Review Categories Slug NOT NAME

This is the textfield where you will need to enter the category’s SLUG and not the name of the category, if you do not know what a slug is, then goto to Categories page or Review Categories page. You will see the table of categories present. In the third column you will see the slug of that category, generally it is in lower case of that category name. Copy it and add that in the text field.

If you need multiple categories , enter slugs followed by comma. That’s it , now posts will appear from that category.

here are also 2 options available in Ticker tab for sorting.

  • First is the post order, it has 2 options ascending (ASC) and descending (DESC) . When you set ascending it will sort by earliest value first.

Like for title , it will sort from A to Z while descending will sort from Z to A . For date it will sort from oldest to latest date. For Author from A to Z.

  • Second option specifies the parameter for sorting, like you can use date, author , title or show random posts.

For example, you want to show latest reviews for a category like IPHONE. Then first you need select the post type drop-down to review, then we will add the slug of IPHONE category like iphone in Enter Post/Review Categories Slug NOT NAME, select Posts order to DESC since we want to show latest dates reviews and in Sort by we will select date. That’s it.


5. Notice functions

Notice bar is a cookie based messaging system, which acts has a highlight for important announcements and once closed stays closed for a particular visitor for some time or until they clear their cookies.

There are 2 panels in this tab.

  • The first one contains color pickers to style each element of the notice bar. You can style as per your needs. It is pretty easy and self explanatory.
  • The second one will cover the functional settings of the notice bar

It contains an image upload for a small image that appears at the left side, main text, button and the close label. You can also switch the notice bar on and off from here.

If you do not want the notice bar button to show , make sure CTA Button Link is empty and button will not show.

By default notice bar is hidden for a week, you can change that. For that follow the steps;

  1. Goto Ratius theme folder, open sprites/js/ folder.
  2. Now open custom.js file and goto line 1376 or find this

      jQuery.cookie("stickyClose", "true" , { expires: 7 });

  3. Change the number 7 to the number of days you want it to hide. For example, you want to hide it for 30 days then it will look like this

      jQuery.cookie("stickyClose", "true" , { expires: 30 });

Save the custom.js file. That’s it


Getting Started

this theme provides lots of shortcodes to work with, all of them can be accessed via Shortcode Menu Button in the WP editor. We will go over each

All the shortcodes can be directly accessed from the Shortcode menu. On clicking the menu item the respective shortcode is inserted with some sample text and available options.

Icon Shortcodes

Icon are provided, you can select them from lightbox and insert them in editor.

  [icon name='icon-envelope' color='Black' /]   
All the shortcodes can be directly accessed from the Shortcode menu. On clicking the menu item the respective shortcode is inserted with some sample text and available options.

Layout 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.

There are two ways of adding column shortcods

Through Visual Panel

Ultrici provides Visual layout shortcode manager, which enables you to add placeholders in editor for layouts. It can be accessed via layout menu item in shortcode. Usage is very easy -

  1. Click on layout menu item.
  2. Add the layouts you want in the manager.
  3. When you are satisfied click on Insert to Editor button.
  4. That layout will be added in the editor
All the shortcodes can be directly accessed from the Shortcode menu. On clicking the menu item the respective shortcode is inserted with some sample text and available options.

Through Shortcodes

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.

                   [one_half]  your content here .. [/one_half]	[one_half_last]  your content here .. [/one_half_last]
                   [one_third]  your content here .. [/one_third]  	[one_third_last]  your content here .. [/one_third_last]  
                   [one_fourth] your content here .. [/one_ fourth]  	[one_fourth_last] your content here .. [/one_ fourth_last]  
                   [two_third] your content here .. [/two_third]  	[two_third_last] your content here .. [/two_third_last]  
                   [three_fourth] your content here .. [/three_fourth]  	[three_fourth_last] your content here .. [/three_fourth_last]  
                   [one_fifth] your content here .. [/one_fifth]  	[one_fifth_last] your content here .. [/one_fifth_last]  
                   [four_fifth] your content here .. [/four_fifth]  	[four_fifth_last] your content here .. [/four_fifth_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 ½ + ½ = 1

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.

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] .

Video Shortcode

Video shortcodes provide easy way to embedd youtube and vimeo videos. Syntax is

  [video width='300' height='250' /]your url here[/video]   

Tooltip Shortcode

You can add top tooltips on your content, usage is very easy add the tooltip text in tip data attribute and wrap it around the text you want to behave as tooltip

 [tooltip tip_data="your title" ] The Text [/tooltip] 

Popover Shortcode

Popover are advance form of tooltips, which gives you title and as well as text control.

[popover title="your title" data="your popver content here" ] THE TEXT [/popover] 

Button Shortcodes

The button shortcode allows to create a full fledge button within seconds, there is a robust panel which you can access from titan shortcode button -> UI -> button. The panel will do all the job, but incase you opt to go in for 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 –

  1. radius – defines the css3 border value in px ( does not works in IE 7,8 )
  2. background – the background color of the button.
  3. border – the border color of the button
  4. color – the color of the button text
  5. link – the url where the button should point too.
  6. size – the size of the button accept values are small, medium, big.
  7. window – if set to yes the link opens in new window.
All the shortcodes can be directly accessed from the Shortcode menu. On clicking the menu item the respective shortcode is inserted with some sample text and available options.

Notification Shortcodes

Usage is pretty straight forward, title is the heading and inside the shortcode you can add the content. You can find it in Shortcodes Menu -> UI sub menu

            [error_box title="your title"] your message here … [/error_box]
            [information_box title="your title"] your message here … [/information_box]
            [success_box title="your title"] your message here … [/success_box]
            [warning_box title="your title"] your message here … [/warning_box]       

Separator Shortcodes

this shortcode adds a visual break with a horizontal line and a button with label TOP, which on click scrolls to top. You can find it in Shortcodes Menu -> UI sub menu

        		  [separator full=true /]       

Tabs Shortcode

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

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

Accordion Shortcode

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

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

Google Shortcode

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 and add width and height for google map in width and height attributes.


Typography Shortcode

1. Dropcaps – This shortcode makes the letter stand out usage is simple
[dropcap1] 1 [/dropcap1]
2. If you want to stand out the text, you can use the quotes , usage is
[quotes]your text here …. [/quotes]

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

[quotes_left] your text here [/quotes_left]

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

[quotes_right] your text here [/quotes_right]

Social Shortcode

Ultrici Supports all major social addons.

Twitter

Twitter – to add the tweet button, use the following syntax –

     [tweet name="wptitan" hashtags="test1,test2,test3" text="exicting offers" /]
     [tweet name="wptitan" hashtags="test1,test2,test3" type="horizonal"/]
     [tweet name="wptitan" hashtags="test1,test2,test3" type="vertical" /] 

There are 4 parameters ,

  1. name which appears at @yourname in the tweet
  2. hashtags – appearing #keyword for search related purposes. Use comma for multiple keywords
  3. text – you can add your own default tweet text.
  4. 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 syntax –
[facebook/]
     [facebook layout="button_count"/]
     [facebook layout="box_count"/]

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

To Add a Google +1 button use the following syntax –
[google/]
     [google size="medium"/]
     [google size="standard"/]
     [google size="tall"/]

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

To Add a digg button use the following syntax –
[digg]
     [digg size="Compact"]
     [digg size="Medium"]
     [digg size="Wide"]

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

To Add a stumble button use the following syntax –
     [stumbleupon/]
     [stumbleupon layout=2 /]
     [stumbleupon layout=3 /]
     [stumbleupon layout=4 /]
     [stumbleupon layout=5 /]
     [stumbleupon layout=6 /]
                   

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

We also have Pin Interest support, usage is very simple use the follow syntax -
[pinterestfollow user="" /]
     [pinterestfollow_small user="" /]
     [pinterest on_url="" to_url="" /]

Option panel walkthrough

We have made explanations in written format below and we've created a spoken screencast which will guide you through.

Be warned when watching the video, this is just a basic intro of our option panel which will show you all of our functions. While developing new themes it's possible that some functions have been removed or some have been added. We will point them out below if this is the case.


General Tab

General Tab contains all the settings which are common in all pages. These includes logo , favicon, analytics and css related settings.

You can also enable or disable live editing for home page. Also breadcrumbs, scrollable homepage slider, top advertisements and miscellaneous settings are covered in here.


Typography Tab

This tab conains all the font and title related settings. In the first section you can set font related settings which includes font families , font weights and body font size. The rest of the panels in this tab have font size related settings for each major modules like portfolio , blogs and generic heading settings.

The Heading font size settings applies only for the content coming from WP editor.


Image Resizing Tab

This tab keeps check of which resizing method is used. By default and recommended resizing is timthumb because it is memory and speed friendly. But sometimes there are circumstances when you are not able to use it, in that case you can switch to wordpress core resizer. It will work same as timthumb. If both do not work which is very rare set the resizing to none and no resizing will be applied .

When you use Wordpress core resizer, always make sure that height and width of images are greater than the place you are using it. Like if you are using for front page slider make sure image sizes are greater than 700 x 500 else Wordpress won't resize it.


Footer Tab

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 4 columns layout for example then 4 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.

Be warned! Wordpress saves sidebars by number instead of name, so when dynamically new sidebars or footer areas are added or deleted it's possible that WordPress swaps or deletes widgets.


Layout Tab

This tab contains all the layout related settings. You can switch the responsive layout on or off and you can also set the default layout mode for posts and pages.


Blog Posts Tab

This tab contains all the blog and single posts related settings. Here you can select use of excerpt or framework's default content limiter. Number of blog posts , meta info that appears under posts title in blog template. This tab also contains single posts settings which are self explanatory. Also the rating settings for news articles are located in this single post settings.


Visual Panel Tab

From within this panel your able to change the background of the theme to anything you like, textures or full screen, fixed or scroll, you name it.


Review Tab

Inside this tab your able to set everything related to the review setting, such as labels, rating style, single review settings, custom post options and more.


Ticker Tab

In here your able to set all settings related to the news ticker on the homepage. Ticker label, post type, slugs, posts to show, posts order, sorting, animation time, auto play and controls


Notice Settings

have something important to show and it needs attention then there's a notification bar which will help you bring extra revenue where needed. All it's settings can be managed from here.

It's divided in to two section, one section for styling related options and one for the functional settings. Everything is well explained and pretty straight forward.


Forum Settings

This is the smallest section, from here your able to set the sidebar to show on forum pages. But we will add more features from time to time for new themes which requires more forum functionality.


Advanced Tab

This tab advanced settings like WordPress admin login screen logo and 404 not found input settings.


Documentation

This tab will point you to the online documentations, in case your having difficulties with some parts. Also there's a link to our support forums where you can request help when you encountering unexpected errors or bugs.


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 and logo inside the demo are included inside the download package. The download package contains a single demo image and dummy logo image.

JavaScript

  1. Galleria — Responsive JavaScript Image Gallery
  2. Bootstrap — Bootstrap, from Twitter

Icons

  1. WPZOOM Social Networking Icon Set — WPZOOM Social Networking Icon Set by David Ferreira.
  2. GLYPHICONS — library of precisely prepared monochromatic icons and symbols.
  3. FAMFAMFAM Icons — FamfamFam icons by Mark James

Demo Images

  1. PhotoDune — High Quality Royalty-Free Stock Photography
  2. fotolia — Royalty Free Stock Photos

Once again, thank you for purchasing one of our products. If you have any questions that are beyond the scope of this help file, please feel free to visit our Support Forums and we will be more then willing to guide you through. Also when you've found a bug or any sort of issue, visiting the Support Forums is the fastest way to receive support. Thanks so much!