“Universo” Documentation by “Theme Starz” v1.0.2

“Universo HTML Template”

Created: 02/04/2014
By: Theme Starz
Email: hello@theme-starz.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. Folder Structure
  2. Translating JavaScript Variables
  3. Block Class
  4. Editing source SCSS Files
  5. Colors
  6. Working with Course & Event Count Down
  7. Landing Page Count Down
  8. Email Setting
  9. Calendar
  10. Highlight Price Table
  11. Rating Plugin
  12. CSS Classes You Can use in HTML

Folder Structure

Translating JavaScript Variables

If you want to translate your theme, you also need to translate some verbs related to count down in JavaScript files.

Block Class

You can use block class if you want to add padding-up and padding-down to the whole section.

<div class="block">
    <section id="your-section">
        // your HTML content

Editing source SCSS Files

Universo uses an SCSS files for styling. If you want to edit source SCSS files, you need to use an SCSS Compiler. You can use Compass.app for example Otherwise you can edit regular CSS files located in assets/css


To edit colors, you can open SCSS file located atassets/scss/_variables.scss. But you need mentioned SCSS compiler. Otherwise you can replace all occurrences of the same color in CSS file located at assets/css/style.css

Working with Course & Event Count Down

To set-up count down you just need to know the exact date and time of the course. If count down is over, script will automatically remove "Join" button and set your custom text. As default value is phrase "The course has started!"

This is example of course count down script:

<div class="count-down-wrapper">
    <script type="text/javascript"">var _date = 'Mar 27, 2015 23:28';</script>

You just need to replace date Mar 27, 2015 23:28 with your own date.

Note: You need to maintain the format: MMM DD, YYYY HH:MM.

Landing Page Count Down

If you are using bonus Landing Page to promote your course, you can also use stylish count down timer here. To set up counting date:

Email Settings

An user can contact you using contact form in the footer. To set e-mail address where you want to receive e-mails and other settings open contact.php located in root directory.

contact.php settings you can change:
$to = 'hithemestarz@gmail.com'; // Here you can set address for receiving emails (usually your email)
$subject = 'Message From Your Website Contact Form'; // Message displayed in "subject" label in email

Email address for reply

Direct reply to users email
You can also change, how you want to reply to email. You can set the email "from" to be the email which user has provided in contact form, so you can directly reply him, just to click on "reply" button in your email interface. The code is this:

$headers = 'From: ' .$email . "\r\n"; // Email "from" the same as user has provided. Default state

One incoming email address or "noreply" address
Or you can use one address widely known as "noreply@yourdomain.com" and users email address will be displayed in body of the message. Then you need to uncomment (remove "//" dashes) of the commented code and comment the code above. The final code should look like this:

//$headers = 'From: ' .$email . "\r\n";

$headers = 'From: noreply@domain.com' . "\r\n";

$body .= "";
$body .= "Email: ";
$body .= $email;
$body .= "\n";

Note: Your hosting provider has to support PHP in order to make the contact form work.


When using calendar, you (or you hosting provider) need to have PHP installed. Events data are stored in JSON format in events.php file. Code format:

    'id' => 1, // Event specific ID
    'title' => "EVENT TITLE", // Event title
    'start' => "2014-04-04", // Event start day
    'url' => "event-detail.html" // Event URL

Highlight Price Table

If you want to highlight one specific price table on Course Landing Page, to show it as featured, use recommended class with price-box. Example

<div class="price-box recommended">

Rating Plugin

Universio uses awesome rating plugin jQuery Raty. To check out more about, please visit jQery Raty Homepage

CSS Classes You Can Use in HTML

Universo comes with several prepared CSS classes you can use right in HTML without coding it into CSS. This is helpful if you want to style only one element without affecting others. For example, you have tree headings, but you want only first to be in the white color, second one with opacity and third one will have subheading, so you don't want to have big gap under. HTML code will look like:

< h2 class="font-color-light">Heading One</h2>
< h2 class="has-opacity">Heading Two</h2>
< h2 class="has-subtitle">Heading Three</h2>

You can use these predefined classes:

Fonts used

Icons used

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.

Theme Starz

Go To Table of Contents