ƒ Journal - Modern & Responsive OpenCart Theme - for OpenCart version 1.5.4.1 - 1.5.5.1
  1. Welcome
  2. Installation & Setup
  3. Journal Slider
  4. Journal Fullscreen Slider
  5. Journal Revolution Slider
  6. Journal Product Slider
  7. Journal Custom Sections
  8. Journal Static Banners
  9. Journal Control Panel
  10. Journal Mega Menu
  11. Journal Product Tabs
  12. Journal Photo Gallery
  13. Extra Skins
  14. Blog Manager
  15. File Structure
  16. Sources & Credits
  17. Theme Support
  18. Update History
  19. Update Instructions


Journal - Premium & Responsive OpenCart Theme

For OpenCart Versions 1.5.4.1 , 1.5.5.1 , 1.5.6



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. (Around line 230 for Opencart 1.5.6)

    $controller->addPreAction(new Action('module/journal_cp'));
Make sure you paste it right after the Front Controller line: $controller = new Front($registry);



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:

Setup Modules



Go to Extensions / Modules and install all Journal modules that begin with Journal -

You should uninstall or disable the Banner and Slideshow modules as you can use the responsive Journal Slider module instead.

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


Side Columns



Important: Journal is 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 Slider


Journal Fullscreen Slider 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 Revolution Slider


Journal Revolution Slider is a powerful module built upon the Slider Revolution jquery plugin by Themepunch

The Revolution Slider module in Jounral comes with a custom admin interface through which you can create unlimited sliders. No coding is required. Follow these steps to create a module:

Global Settings


  1. Enter the module and select the Existing Modules tab.
  2. Click on the green Create New button.
  3. Give your slider a name and apply any necessary options.
    These are global settings that apply to the entire module. For Full Width (100% wide) sliders make your main slide images at 1920 x 500px. The height can vary, but whatever height you create your images at, you should input it in the Slider Height field.
    For Non-Full Width sliders your slider will be either 980px wide or 1220px wide (if you use the Wide Layout option).

Main Slide Settings


  1. Click on the green + button to add a new main slide. Click on the white x to remove it.
  2. Optionally you can name your slide.
  3. Add a main image See Global Settings above for main images suggestions
    If you don't want to use a main slider image and you'd rather make your slides out of sub-layers only, upload a transparent png file.
  4. Pick a transition for your main image.
  5. Slot Amount refers to the number of slots or boxes the slide is divided into.
  6. Master Speed is the transition speed in ms
  7. Additonal delay value for this slide.
  8. Optionally add a link (make the whole image clickable)
  9. Open the link in new tab
Once you create your main slides, it's time to add sub layers to each slide.

Caption / Sub Layer Settings


  1. Click on the green + button located under the main slide settings to add a caption to your main slide. Click on the white x to remove it.
  2. Optionally name your captions so you can keep track of them.
  3. Choose a caption type: Text, Image or Video
    Text:
    1. Type your desired text in the field.
    2. Choose a color for your text
    3. Choose a font and font options
    Image:
    1. Browse for an image ans use it as your sub-layer
    Video:
    1. Choose the video type desired
    2. Input only video number from the end of the url (for youtube or vimeo)
      Youtube example: www.youtube.com/watch?v=-BrDlrytgm8
      Vimeo example: vimeo.com/32573880
      Only paste the code marked in red after the "=" for youtube and "/" for vimeo.
      For local HTML5 video create a folder called "video" in your root Opencart installation (where the admin, catalog, image folders are) and upload your videos there. You should upload your video in both formats (.mp4 and .webm)
      Local video example: video/video_name
      Do not add the extension of the video in the video url field, the script will assign it automatically.
    3. Fullscreen video refers to the video fitting you slider dimensions (in case of Full Width sliders, it will fill the height and have the width auto) - This does not refer to the conventional fullscreen that covers your entire device screen, you can pres the Fullscreen button on the video for that.
    4. Option to autoplay the video when the slide containg it comes in view
    5. Automatically move to the next slide when the video finishes playing, or stay put.
    6. Manual wideo width (if Fullscreen Video is off)
    7. Manual wideo height (if Fullscreen Video is off)
  4. Caption URL - You can assign links to text and image captions. Input any URL and choose whether to open it in a new tab. Optional hover colors are available for text caption.
  5. Absolute Positioning ON - This allows you to postion your caption from top left corner in pixels. This option is more precise for responsive.
  6. Absolute Positioning OFF - This option will position your captions at the center of your slide and you can offset it with positive on negative margins from teh center. This option is not as efficient on responsive. Turn Absolute Positioning ON for best caption repositioning on resposive.
  7. Choose an animation for how this caption is coming into view. You need to declare an animation speed and a delay. The delay refers to how long it waits before it comes into view. Use the delay to perfectly time your layer in relation to other layers. You can also choose an easing to smooth your animations.
  8. Outro Animation is the animation with which your layer leaves the screen. By default it's the same as the Intro animation. It leaves the screen the same way it came in. You can choose other animaitons for the exit.
The Revolution Slider has infinte posibilities of customizations. For starters, you can look at our demos in the admin section see how we've done our modules. The key to a great layer slider is the animation timing and the delay of the sub-layers. Practice with these settings to achive great results.

Timelined Captions


Timelined captions are what makes the Revoluton Slider so good. Follow these steps to achieve timelined captions:

  1. After you add a main image create a caption (text or image)
  2. Choose Intro animation "Long From Right" speed of 700, delay 0
  3. Choose Outro animation "Long to Left" speed 700, delay 2000 (this 2000ms is a 2 seconds delay this caption will stay visible before applying the outro animation)
  4. Add another caption and under the Intro Animation Delay choose 2000 (the number from the Outro animation delay of the previous caption)
  5. The Outro animation delay on this caption should be 4000 (2 additional seconds that this will stay visible)
  6. Repeat with additional captions making sure the Intro Animation Delay of each caption is not less then the Outro Animation Delay of the previous caption.
  7. Finally add a delay on the main slide image. This number should be the number of your last caption Outro Animation Delay. This will keep your slider active until all captions have animated in and out.

  8. Note that the Intro Animation delay of you next caption does not have to be exactly the same as the Outro Animation Delay of the previous caption. It needs to be at least the same so the incoming caption doesn't show up too soon. You should also play with the easing types as those affect animations as well.

Journal Product Slider


Journal Product Slider is an extremely useful module that lets you to create custom product sliders on any page. You can create as many sliders as you want and position different sliders on different pages.

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 apply any necessary options.
  4. In Module Name you have to give it a unique name in order to be able to postion it on your various layouts.
  5. The Module Title refers to the title you see in the front end. (e.g Related Products) or whatever you want to call it.
  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.
  8. Click Save and return to the Module Placement tab. Here, click on the blue Add Module button to add your Product Slider to your site.

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: The Product Slider module can only be positioned Content Left or Content Right.

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 Static 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.) b>

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.

Side Blocks

Side blocks allow you to create custom blocks of html content on the sides of your theme.

You can upload your own icon, set colors and position. Click on the button next to each element ? for an explanation.

To create a block click on the + button on the Add new block tab

To remove a block click on the - button on the current block tab.

To add an iframe (Youtube, Facebook, Twitter, Googles Maps, etc.) you need to click on the Source button in the Text Editor and paste your ifame source in there. Do not paste iframe source code directly in the editor - You have to click the Source button.



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.

Journal Mega Menu


The Mega Menu allows you to build advanced navigation systems with categories, products, brands or regular menu items. This menu overwrites the default OpenCart menu and the Multiple-Level Menu found in the Control Panel > Custom Menus > Multiple-Level Menu.

  1. Enter the module and click on the green + button to add a new menu item.
  2. Choose your desired menu type (Categories, Brands, Products or Standard Menu)
  3. Categories: Type a menu name such as "Categories" and then click on the "Add Category" button. Start typing the name of your category from Catalog/Categories. You can select top categories or sub-categories - they will always display their immediate sub-categories assigned to them.
  4. Brands:Display your manufacturers in the mega-menu by selecting them from the autocomplete field.
  5. Products: Build elaborate menus directly with products. Create menu items such as "NEW" or "SALE" and assign any products through the convenient auto-complete feature.
  6. Standard Menu: This menu type allows you build regular menus with external or internal links. You can add sub-menus by clickning on the Add Sub-Menu button.

Max Subcategory Items: Allows you to set a max number of visible sub-categories within each main category (in case you have too many subcategories in one category and you need to visually balance them with the ones that don't have as many.) Leave this field empty to show all subcategories.


Important:
If you are updating from a previous version that did not have the Mega Menu and are using custom skins you have to color your module as it will be transparent and you won't see it. Go to the Control Panel > Colors > Header and scroll down to the Mega Menu color fields and input your desired colors.

Journal Product Tabs


This module lets you create unlimited custom tabs on the product page. Enter the module in Extensions/Modules and click on the Create New button. Strat typing a product name in the Product Name field to select it from your catalog. Proceed to add any custom html content to that particular tab.

To add any iframe content (YouTube, Vimeo, Facebook, Maps, etc) you have to click the Source button on the text editor and paste your iframe code directly in the source.

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 5 pre-made skins:

  1. Journal I
  2. Journal II
  3. Journal III
  4. Journal IV
  5. Journal V
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


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.8.2
- September 23, 2013

v.1.8.1
- August 15, 2013

v.1.8.0
- August 12, 2013

v.1.7.5
- August 6, 2013
v.1.7.4
- August 5, 2013
v.1.7.3
- July 23, 2013
v.1.7.1
- July 16, 2013
v.1.7
- July 15, 2013
v.1.6.2
- June 14, 2013
v.1.6
- June 12, 2013
v.1.5.3
- May 21, 2013
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.