Theme Documentation

If you have any questions that are beyond the scope of this documentation, please contact us via email.
Please note that we only provide support in case of errors in our product or to advise You about using our product’s features.


Table of Contents

  1. Getting started
  2. Accessing theme settings
  3. Uploading your custom logo
  4. Setting up homepage
  5. Uploading sample content
  6. Installing woocommerce
  7. Setting up footer widgets
  8. Footer twitter feed
  9. Setting up newsletter
  10. Layout
  11. CSS Files
  12. JavaScript Files
  13. Facebook sharing - image, description etc.
  14. Color settings
  15. Background settings
  16. Setting up category page
  17. Installing and updating required plugins
  18. Translating the theme

A) Getting started - top

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex.

You have two options for uploading the theme - to use FTP or upload tool in Wordpress admin.

1) Upload via FTP:

First you must unzip the file you downloaded from Themeforest. There you will find a file named callisto.zip. Now unzip this file also. You should see a folder named "callisto". Upload this to /wp-content/themes/ in your wordpress installation.

2) Upload via Wordpress admin:

Open your Wordpress admin; Go to Appearance and choose Add New Themes. Click Add new. Upload the callisto.zip. Do not upload the zip archive you downloaded from themeforest. Upload only the callisto.zip file. If you have a "missing stylesheet" issue you are uploading the wrong file!

Activation

Once upload has finished, activate your theme in Appearance > Themes. Once activated Callisto will create two pages - Blog and Homepage. These will be assigned as your new front page and posts pages. You can later edit these settings under Callisto > Visual editor > Static Front page.

Right after activating theme, you will be presented with a dialog offering to install and activate plugins. Some of them are mandatory like Visual Composer, some are just needed for specific features, like contact form. In order to use the static homepage Visual Composer plugin MUST BE ACTIVATED.

More info here.


B) Accessing theme settings - top

Open admin section for your wordpress blog. You can find it by typing your domain name + /wp-admin/. Once you have opened the admin, you have to click on "callisto" at the bottom left corner of screen. There you will find theme settings.

admin

Theme settings have 6 sections:


Go to theme settings and open the General tab. There you will find section called "Logo". Enable logo, by selecting On, and 2 extra fields will appear - file upload and alt text field. Click on the "browse" button and select your logo from your computer. Click save on the bottom of page and that's it! You should also provide an ALT text which will be show if your image ever fails to load on the front page.


D) Setting up homepage - top

When you activate theme, Callisto will auto create a page that's used for homepage. This page will be called "Homepage" and you can find it and edit it under "Pages" in your wp-admin. To use static homepage (like the one seen in theme demo), Visual Composer plugin must be enabled!

Slider

Homepage slider is not visible when you first load the theme, since no slides are added to it. You can add images to homepage slider by going to "Revolution Slider" section in your wp-admin and creating new slides. You also have the option to disable homepage slider in theme settings page (see "slider" section in general settings).

The slider used with this theme - Revolution, is extremely feature rich, and is widely recognised as the best in business. Normally it has to be bought separately, but with Callisto it comes as a free extra. Learn more about the slider here and check out the documentation here.

Layout

Homepage layout is made with Visual Composer plugin (also included with Callisto for free, but normally has to be bought). It's a extremely powerful tool that allows you to build custom layouts by dragging and dropping elements. By default Callisto has already generated the content for you, but you can edit it easily using visual composer.

Learn more about Visual Composer here and check out the documentation here.


E) Uploading sample content - top

To make things easier with initial setup, we have provided you with sample content that you can import in your wordpress site. It is located in the folder you downloaded from Themeforest. Open "sample data" and you will find two files - pages.xml and products.xml. As you might guess, the first one contains the pages that you can see on demo page, but the other contains the products. You can import it using wordpress admin. Go to Tools > Import. From the list select "Wordpress". Choose one of the aforementioned files and upload it.


F) Installing woocommerce - top

Woocommerce has been bundled with this theme. To install it, just complete the plugin install wizard, that's shown right after theme activation.


G) Setting up footer widgets - top

Callisto footer uses Wordpress widgets for it's content. These widgets chosen and set up in your wp-admin under Appearance > Widgets. Callisto has 3 custom built widgets included with it - Twitter Feed, Newsletter and Shop info. However you can also use the regular widgets that come bundled with wordpress and woocommerce.

To add a widget to footer go to Appearance > Widgets in wp-admin and either click on a widget from the widget list and choose "Footer" or drag it right under the "Footer" block. After that you can edit the widget properties and save it.


H) Footer twitter feed - top

Footer twitter feed is Wordpres footer widget that can be inserted into footer by going to Appearance > Widgets on your wp-admin. But first you have register the Twitter widget in your twitter account and get a widget ID before it can be used with Callisto.

To get your twitter widget ID follow these steps:

Example:
After you pressed the "create widget" button you were redirected to URL that's similar to this one (look at the address bar of YOUR browser): https://twitter.com/settings/widgets/340149507968868352/edit?focus_textarea=1¬ice=WIDGET_CREATED

The number you need to copy is the one in bold - 340149507968868352

Once this is done, go to Appearance > Widgets on your wp-admin, add "Callisto Twitter Feed" widget to "Footer" and insert this information. You can find out more about widgets here.


I) Setting up newsletter - top

We are using MailChimp to configure our newsletter form, but there are a lot of services and plugins you can use. Follow these steps:


J) Layout - top

This theme has a Responsive layout with one or two columns (varies for different sections). All of the information within the main content area is nested within a div with a class of "main-content-wrapper". The general template structure is the same throughout the template.

This theme has 3 different layout modes - normal (for 960px or wider screens), tablet ( for screens smaller than 960px ) and mobile (for screens smaller than 768px). Adjust your browser window size to explore them closer.

Callisto uses HTML5 and CSS3 features, so it will NOT support legacy browsers such as Internet Explorer 6, 7 & 8.


K) CSS Files - top

All the CSS files are located in theme/assets/css/ folder. Most of the theme's CSS is in main-stylesheet.css, but there are others. Checkout.css get used for checkout specific styling, but woocommerce.css contains various overrides of woocommerce default stylesheet. All of the CSS specific to mobile and tablet modes is located in mobile-stylesheet.css and tablet-stylesheet.css.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.


L) JavaScript - top

All the Javascript files are located in theme/assets/js/ folder. This theme uses Jquery Javascript library and many plugins and custom built scripts. All the theme specific behaviour is written in theme.js and this is the only file you may ever need to edit.

It is comparatively easy to find what you need to edit in theme.js. Just open the file and look for init function. It initializes all other functions which you can recognize by the name. For instance to edit product lightbox, you have to edit "initProductLightbox" etc.


M) Facebook sharing - image, description etc. - top

If you wish to show image and description when users share your website on facebook you must provide facebook with info about your page. Thant can be achievd using this plugin. It will add a thing called "open graph tags" to your websites header, thus allowing facebook to find out what your site, post or product is about


N) Color settings - top

The demo page shows 3 different styles - light, dark and plain black&white. Here are the colors used for settings in visual theme editor to achieve each one of them.

Light (all of these are theme default settings):


Dark:


Black&White:


O) Background settings - top

Callisto comes with lots of different background textures. Those can be changed in Visual Editor under Background section. If you are using a dark background texture, remember to also change menu background setting from Light (default) to Dark. You can also adjust footer opacity accordingly.


P) Setting up category page - top

To create a category page, just like the one seen in demo page follow these steps:

[product_categories number="12" parent="0"]


Q) Installing and updating required plugins - top

The theme comes bundled with 4 plugins:

When you first install the theme, you will see a message on top of wp-admin, that is asking you to install the bundled plugins. Click on "begin installing plugins".

admin

Then select all of the plugins and first install and then activate them.

admin

admin

WooCommerce and Contact Form 7 can be updated using regular WP plugin section. However the premium plugins - Revolution Slider and Visual Composer can only be updated together with the theme. After installing a theme update you have to delete the plugin from your plugins section and install the latest version in the same way, you did it when you first activated the theme.


R) Translating the theme - top

Callisto can be translated using the same tools and methods as the rest of WordPress - using POT language files. The language file for this theme can be found in languages folder in theme files. There you will find a file called default.pot

Once you have the POT file, you’ll need to open it in a program like POEdit, and translate the English language into your preferred language. When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your country and language code. For example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo. When that’s done, simply upload the files to your themes languages folder.

Once the files have been uploaded, you need to tell wordpress which language to use. That can be done by editing wp-config.php file in your wordpress site root folder. Find this "define('WPLANG', '');" and replace it with something like this: "define('WPLANG', 'fr_FR');" where the fr_FR (french language code) is replaced with your desired language code.


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.

Planetshine

Go To Table of Contents