1. Welcome
  2. Installation & Setup
  3. Journal Slider
  4. Journal Fullscreen Slideshow
  5. Journal Custom Sections
  6. Journal Banners
  7. Journal Control Panel
  8. Extra Skins
  9. Blog Manager
  10. File Structure
  11. Sources & Credits
  12. Theme Support
  13. Update History
  14. Update Instructions


Journal - Premium & Responsive OpenCart Theme

For OpenCart Versions 1.5.4.1 , 1.5.5.1


Welcome to Journal Documentation

Please follow this guide carefully to get started with Journal.

Installation & Setup

We recommend installing Journal on a fresh copy of OpenCart or on existing setups with no custom modifications.
Journal does not replace any OpenCart files. The installation is very easy, please follow these instructions carefully.

Installation

  1. Extract the files from the archive you downloaded from Themeforest.
  2. Locate the Journal folder and choose your OpenCart version. We recommend 1.5.5.1, as it has significant improvements.
  3. Drag the 3 folders (admin, catalog, image) over to your OpenCart installation and merge them with the existing ones. Important: No OpenCart files are replaced. Don't upload files from sub-folders individually, drag the 3 folders over and everyting will go in its place.
  4. Open index.php from the root directory of your setup and paste this single line of code around line 220.

    $controller->addPreAction(new Action('module/journal_cp'));


Activate Theme

Choose your new theme and set the image dimensions.

  1. Open your OpenCart Administration page and go to System / Settings / Edit
  2. Access the Store tab and choose Journal form the Template section.
  3. Click on the Image tab and enter the following dimensions in their corresponding fields:
Important: As of version 1.3 the product image requirements have chaged. Product grid images are now 280px wide to fit their box width on the lowest resolution (320px). This is also the widest as it only uses one row. For all other resolutions the image would resize itself to always fit the parent box. If you have tall images, just calculate your proportions with a minimum width of 280px by whatever your height comes out to be.

Setup Modules



Go to Extensions / Modules and install the 5 Journal Modules:

  1. Journal Banners
  2. Journal Fullscreen Slideshow
  3. Journal Control Panel
  4. Journal Custom Sections
  5. Journal Slider

Modules such as Featured, Specials, Bestsellers, etc. have different image dimensions when they are positioned Content Top or Content Right.


Side Columns



Important: As of version 1.3.3 Journal supports both Column Left and Column Right, but this is still a 2 column theme and you have to decide which side column you want to use for any particular page. You can use both columns on different layouts but if you place modules Column Left and Column Right on the same layout, the left column will be hidden and you will only see the right one.




Journal Slider

Journal Slider follows the same principles found in the standard OpenCart Slideshow module. You can create unlimited sliders and place them anywhere within your site. Follow these steps to create a new module:

  1. Enter the module and select the Existing Modules tab.
  2. Click on the green Create New button.
  3. Give your module a name and apply any necessary options.
  4. Add Images (you can enter a caption and a custom link for each image. Clicking the image from the Store Front will take you to this link.)
    Slider images can have any dimensions but we recommend at least 980px wide for main content sliders and 200px wide for side column. (Any height)
    Wide layout option introduced in version 1.3 requires images at 1220px or more. Please see PSD folder in your download for slider template files.
  5. Click Save and return to the Module Placement tab and click on the blue Add Module button.

The Module Placement tab is where you position your existing sliders throughout your site.

Module Placement

  1. The first option above is the module name. (When you add new sliders it automatically selects the first one).
  2. The second option is the slider dimensions. A slider may have any dimensions but it's recommended that all of its images have equal dimensions.
  3. The third option is the Layout. This is where your module will appear in the Store Front and by default you have a limited number of these, but you can easily create different layouts for different pages.
  4. Next up is the Position. You should use Content Top for sliders intended for center and Column Left or Column Right for banners intended for the side column. Side Columns have a width of 200px. Keep this in mind when you create images for the side column banners/sliders.
  5. Status indicates whether the module is visible or not in your site. You can create lots of modules and just show or hide the ones you need.
  6. Sort Order allows you to place multiple modules of the same type in a stacking order. The higher number will be positioned above the lower number.
  7. Finally you can remove sliders from the front-end. However, the actual module is not deleted. To permanently delete a slider go to the Existing Modules tab, select the checkbox next to it and hit the red Delete button.

Important: You should create the entire set of slider images at the same dimensions so that OpenCart won't resize them. If you see white parts in your slider images it means they are not the same dimensions you declared in option 2 above, Dimensions (W x H).

Journal Fullscreen Slideshow

Journal Fullscreen Slideshow is a powerful module that allows you to create fullscreen backgrounds or slideshows on any page. It works in the same way as the Journal Slider module with a few minor exceptions.

Follow the same steps from the Journal Slider to create a new Fullscreen Slideshow module.
You will notice that (in step 4) there is no option for Caption or Link as this module only serves as a fullscreen backdrop to you site.
Likewise, on the Banner Placement tab you will not see the dimension fields as this module's images will stretch to fill the entire screen.

Important: When you choose the Global layout, it only applies to all existing layouts at the time the module was created. If you subsequently create new custom layouts, you'll need to come back and hit the green Save button again so that your newly created layout can be remapped.

Mobile Performance

Fullscreen slideshows are ideal for desktops and laptops and are very demanding for mobile devices. We have included an option to turn off the fullscreen modules on mobile devices and recommend doing so for best performance. Turn the Disable on Mobile switch to OFF to disable it on mobile devices.

Transparent Sliders

You can use transparent PNGs in the Journal Slider module and give it any width and height in order to push down the site content. You can run different Fullscreen Slideshows in the background on a page by page basis to create unique themes for each category or product.

Journal Custom Sections

Journal Custom Sections is a powerful module that allows you to create custom product sections on any page. You can create modules with 1, 2 or as many sections as you can fit in 980px (the main content width). You can generally fit about 8 sections per module, depending on how you call them.

Follow these steps to set up a new module:

  1. Enter the module and select the Existing Modules tab.
  2. Click on the green Create New button.
  3. Give your module a name and click on the green + icon from the Add Section tab.
  4. Enter a title for the section (This is the title you will see in the Store Front).
  5. The Status and Sort Order apply to the current section within the same module.
  6. Hit the blue Add Product button and start typing for products. It will present you with all available products beginning with letter you just typed.


  7. Continue to add as many products as needed to any section you've created.
  8. Click Save and return to the Module Placement tab. Here, click on the blue Add Module button to add your Custom Section Module to your site.
  9. Module Placement settings are similar to Banner Placement settings with the exception of Scroll to Top option

The Scroll to Top option is a neat feature that allows you to scroll the entire site up when you click on a section.

Important: Journal Custom Sections module can only be positioned Content Top or Content Bottom.

Journal Banners

You can create unlimited Journal Banners modules and place them anywhere on your site. Follow these steps to set up a new module:

  1. Enter the module and select the Existing Modules tab.
  2. Click on the green Create New button.
  3. Give your module a name.
  4. Add Images. Banner images should have the dimensions you want them to appers in your site. They can have any dimensions and will be proportionally positioned and cropped to fit (background-size:cover)
  5. Click Save and return to the Module Placement tab and click on the blue Add Module button.
  6. Select your module, give it a height in px, and choose a layout. We need to declare a height (usually the image height) in order to properly resize the module for the responsive layout.

Journal Control Panel

Journal Control Panel is where you maintain your various theme settings. Many options have gray icons ? which explain what they do.


General

You can set various settings on the general tab such as cart icon, preloader spinner, background patterns, sale badge etc.

The Extended Module option will make the home content div transparent and get rid of the padding. Modules will extend to the edges and you can see the body background. Explanation.

Extended Categories Menu will switch on/off the extended navigation menu. Explanation. The logo box dimensions are 220x80px for the extended menu option and 200x120 for the non-extended. Your logo image will be centered within the logo box.

Refine Categories Images. You have the option to keep the sub-categories as simple links or with their corresponding category images.

Backgrounds section allows you to set background patterns on the body and other elements. These are tileable and meant to be used as repeatable backgrounds. Choose from millions of patterns on the web and upload your own. Subtle Patterns is one of the best pattern galleries out there.

TIP: You can preview all Subtle Patterns live on your site by using this tool.

Sale Badge allows you to display the actual percentage an item is discounted for. This is automatically done based on the special you attach to any product.

Preloader section lets you display an overlay with a spinner over your site while it's loading. Spinner gifs can be downloaded from sites such as this.

Notification section allows ou to display a custom message box for the Add to Cart, Add to Wishlist, Add to Compare actions.

Custom Menus



Top Menu


Top Menu will allow you to create custom top menu sections that can include standard links or static info like phone numbers or announcements. You can also attach custom icons to each menu item. (Icons should not excede 30x30 px). If you leave the Link field empty that item will be static and not respond to any hover events. If you want to create custom links paste your destination URL in the Link field and that item will respond to hover events like a normal link. (Font, background and hover colors are edited on the Colors tab in the Header section.)

To use the default OpenCart top menu (Home, Wishlist, My Account, Shopping Cart, Checkout) do not create any custom items and the default menu will show up.

If you want to use just some of the default OpenCart links, open that link and copy its URL, then come back and paste it in the Link field to essentially recreate the same link. This way you can add icons and use it in combination with other custom items.

Categories Menu



This menu allows you to create additional menu items after the main OpenCart Categories.
If you click on the Add menu item button, you will have created a new custom menu item.
Clicking the + button adds sub-menu items to the parent menu item.
Type your menu item title in the Name field and your URL in the Link field.
You can also specify the order in which your items should appear as well as if they should open in a new tab.

Multiple-Level Menu



Multiple-Level menus lets you build flexible navigation menus with infinite level of sub-categories. This menu overwrites the above menu "Categories Menu".

Create your categories in Catalog/Categories as you normally would, then create a menu item in this section by typing the first letter of your Category. If the category exists, it will give you an option to pick it from an auto-complete list. If you select it from the list, it will become a menu item. If this category has any sub-categories attached to it, they will automatically become third, fourth, etc. level items. You can create nested sub-categories as deep as you want, they will just become multiple level sub-menus. Note that if you don't select any exisitng category from the auto-complete dropdown, it will become a custom item so you can name it whatever you want and give it any custom link.

You can not input custom links for OpenCart categories (selected from the auto-complete dropdown) as it will already point to that particular category page. The link field will be disabled and this will indicate whether your menu item is custom.
You can create custom items even if there is a category with the same name. For example if you have a category called "Electronics" and you start typing this word and the auto-complete pops up, you can still make this item a custom one, (with its own custom link) as long as you don't select it from the auto-complete dropdown.

Please note that if you delete a parent menu item, all of its sub-menus will be deleted as well.

Colors

This is where you customize almost every element's color. Click on the ? icon to see the element's location.

To make an item transparent leave the color field empty.

Fonts

Choose from over 600 Google Fonts. We've included many font options to fine tune your sizes and weights and for customizing different skins with different fonts.

Warning: Don't use too many different fonts per skin. Custom fonts can greatly impact loading times.

Footer

Here you can create contact info like phone numbers, email, etc. You can attach icons to each section as well as hyperlinks. If you don't want an item to be a link just leave the Link field empty.
Likewise, on the social tab, paste your social profiles URLs in the appropriate fields, or, if don't want to show an item, leave that particular field empty.
You have 2 options for Facebook, simple icon or Like Box. Paste your Facebook page URL in either one to show one or the other.

Custom Code

This will give you the opportunity to customize everything in your theme through custom CSS and Javascript. Warning: This section is for advanced users. Improperly written code may break the layout.

Extra Skins

Each skin has its own settings. You can create unlimited skins, save them, delete them, reset them to defaults, etc.
We have provided 3 pre-made skins:

  1. Journal I
  2. Journal II
  3. Journal III
  4. Journal IV
These are starting points and they can be further customized in any way want.
If you make modifications that you don't like and would like to revert back to the original state, just click on the blue Reset Section to Defaults button.
This will only apply to the existing section. For example if you are in Colors / Header, the reset button will only revert this section to the original skin defaults, leaving your other modifications intact.

To save a custom skin:

  1. Click the Save Custom Skin button next to the Active Skin select box.
  2. Give your custom skin a name on the popup dialog and click Save Changes
  3. Finally, hit the green Save button to apply the changes to your site.

Every time you make a modification, you must click on the green Save button for any changes to take effect on your site.
You do not need to save every simple change as a custom skin, although you can if you want to. Clicking the green Save button will preserve your changes within the current skin until you reset or save them as a custom separate skin.


Note that Journal III and Journal IV skins use an additional css file named journal_iii_theme.css and journal_iv_theme.css for slight modifications.
You should always pick the structurally appropriate skin as starting a point for you custom modifications.

Blog Manager

Blog Manager is a popular extension developed by Echo Themes which allows you to run a powerful blog right from within your store.
We have integrated the extension in our design to look seamlessly within Journal.

Important: This is an optional module and is not included with Journal. You will have to purchase it separately from here.
We recommend setting the Related Product Image Size to 280x280 to fit in with other products from your store.
This setting can be found in Blog Manager / Settings / Articles / Related Product Image Size.

Important: We don't offer technical support for Blog Manager. Support and documentation are available on its website.

File Structure

CSS

catalog/view/theme/journal/stylesheet/

Javascript

catalog/view/javascript/journal/

You should not modify these files directly so you can easily update Journal in the future. Instead, write your code in new files or use the Custom CSS and JS boxes in the Control Panel to paste your additional code.

Sources & Credits

All images used in the demo are for demonstrative purposes only and are not included with Journal.

Theme Support

If this documentation doesn't answer your questions, support is available on our dedicated support page: Journal Support. Please follow the instructions found there to submit a support ticket. Our response time is within 24 to 48h.

Important: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our theme like bugs and errors. Custom modifications or third party module implementations are not included.

Update History

v.1.5.2
- May 16, 2013
v.1.5.1
- May 15, 2013
v.1.5
- May 13, 2013
v.1.4.1
- April 27, 2013
v.1.4
- April 26, 2013
v.1.3.4
- April 17, 2013
v.1.3.3
- April 15, 2013
v.1.3.2
- April 11, 2013
v.1.3.1
- April 10, 2013
v.1.3.0
- April 8, 2013
v.1.2.0
- April 1, 2013
v.1.1.2
- March 22, 2013
v.1.1.1
- March 21, 2013
v.1.1.0
- March 20, 2013
v.1.0.0
- March 13, 2013


Update Instructions


After downloading the latest Journal version from Themeforest:
  1. Locate the Journal_v.1.x.x folder and drag the 3 folders (admin, catalog, image) from your OpenCart version over to your current installation, replacing any existing Journal files.
  2. Access the Control Panel from your Admin and click on the blue Update Theme button. Your theme should be updated within a few seconds with all your custom modifications intact. Please note that the update process may take longer for some users with lots of custom modifications.