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.
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.
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.
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!
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.
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:
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!
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.
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.
IMPORTANT! To complete homepage setup, you must go to Visual Composer page on wp-admin (Settings -> Visual Composer) and on "Design options" section check in "Use custom design options". After that you also must set a value "Grid gutter width" to 5% and "Mobile screen width" to 767. Otherwise mobile version will work only partially.
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.
Woocommerce has been bundled with this theme. To install it, just complete the plugin install wizard, that's shown right after theme activation.
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.
To get your twitter widget ID follow these steps:
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.
We are using MailChimp to configure our newsletter form, but there are a lot of services and plugins you can use. Follow these steps:
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.
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.
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
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):
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.
To create a category page, just like the one seen in demo page follow these steps:
[product_categories number="12" parent="0"]
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".
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 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.