Theme Documentation

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

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.

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.

Theme settings have 6 sections:

General settings - add logo, edit various product and social settings;

Visual editor - edit visual settings. This takes you to wordpress theme customiser that allows you to change various colors, fonts and images and see the results immediately.

Backup & Reset - export your theme settings and import them into another instance of Callisto. This is handy when you are setting up the theme locally and publishing it later on a different server. Also allows you to reset theme settings to defaults.

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.

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.

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.

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.

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.

The widget ID is the long number you see in the URL while editing your Twitter widget. Copy it.

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&notice=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.

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

Go to http://mailchimp.com

Register and account if you do not already have one, and log in.

Go to section "lists" and click on "create list"

Fill in all nedded fields and click on Save at the bottom of the page.

Now open your new list and select the "Signup forms" tab. Click on "Embeded forms".

In the page that opens, click on "Naked" tab.

Copy the code found at the bottom of page and paste it into text editor like notepad.

In the text, find a line that' similar to this one "<form action="http://planetshine.us7.list-manage1.com/subscribe/post?u=c908dbcccecb685633e7e0458&id=314fef872f">"

Copy the action value (it will be similar, but NOT the same as in the example above). To clarify. Action value is only this part: http://planetshine.us7.list-manage1.com/subscribe/post?u=c908dbcccecb685633e7e0458&id=314fef872f

Now open your wp-admin, and go to Appearance > Widgets. Insert "Callisto Newsletter" into "Footer".

Now move on to Theme settings and open "Footer" section. Paste the form action value into the "Newsletter form action" field.

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.

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.

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.

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

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.

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

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

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.

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 chooshing your language in Settings > General > Site language

Updating theme

To update the theme, follow these steps:

Head over to Appearance > Themes in your wp-admin

Activate a different theme (for example twenty twelve)

Delete the current version of Callisto

Download the update from Themeforest and get the “callisto.zip” file. If you downloaded the “All Files & documentation” from Themeforest, then you need to unzip the archive file you received, the callisto.zip will be inside of it

Click on "Install themes" and upload the callisto.zip file.

Activate it and install updates for bundled plugins where necessary.

If you get a “Are You Sure You Want To Do This” message when installing update, it means you have an upload file size limit. Install the theme via FTP if this happens, or increase the PHP file update size limit.

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.