Journal - Premium & Responsive OpenCart Theme
For OpenCart Versions 184.108.40.206 , 220.127.116.11
- Created: March 13, 2013
- Latest Update: May 16, 2013
- By: Digital Atelier
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.
- Extract the files from the archive you downloaded from Themeforest.
- Locate the Journal folder and choose your OpenCart version. We recommend 18.104.22.168, as it has significant improvements.
- 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.
- Open index.php from the root directory of your setup and paste this single line of code around line 220.
Choose your new theme and set the image dimensions.
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.
- Open your OpenCart Administration page and go to System / Settings / Edit
- Access the Store tab and choose Journal form the Template section.
- Click on the Image tab and enter the following dimensions in their corresponding fields:
Go to Extensions / Modules and install the 5 Journal Modules:
- Journal Banners
- Journal Fullscreen Slideshow
- Journal Control Panel
- Journal Custom Sections
- Journal Slider
Modules such as Featured, Specials, Bestsellers, etc. have different image dimensions when they are positioned Content Top or Content Right.
- For modules positioned Content Top or Bottom set the dimensions to 280x280
- For modules positioned Column Left or Right set the dimensions to 50x50
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 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:
- Enter the module and select the Existing Modules tab.
- Click on the green Create New button.
- Give your module a name and apply any necessary options.
- 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.
- 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.
- The first option above is the module name. (When you add new sliders it automatically selects the first one).
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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
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.
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.
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:
- Enter the module and select the Existing Modules tab.
- Click on the green Create New button.
- Give your module a name and click on the green + icon from the Add Section tab.
- Enter a title for the section (This is the title you will see in the Store Front).
- The Status and Sort Order apply to the current section within the same module.
- 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.
- Continue to add as many products as needed to any section you've created.
- 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.
- 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 Control Panel
Journal Control Panel is where you maintain your various theme settings.
Many options have gray icons ? which explain what they do.
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.
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.
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 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.
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.
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.
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.
Warning: This section is for advanced users. Improperly written code may break the layout.
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:
These are starting points and they can be further customized in any way want.
- Journal I
- Journal II
- Journal III
- Journal IV
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:
- Click the Save Custom Skin button next to the Active Skin select box.
- Give your custom skin a name on the popup dialog and click Save Changes
- 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 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.
- style.css - Main Stylesheet
- responsive.css - Responsive Stylesheet
- journal_iii_theme.css - Additional css for Journal III skin
- journal_iv_theme.css - Additional css for Journal IV skin
- wide.css - Wide Layout Stylesheet
- header_ii.css - Extended Menu Styles
- camera.css - Journal Slider Module (Camera Slider)
- slideshow.css - Default OpenCart Banners Module
- carousel.css - Default OpenCart Carousel Module
- journal.js - Journal main js file
- camera.js - Journal Slider Module (Camera Slider)
- jquery.isotope.js - Journal Custom Sections animation plugin (jQuery Isotope)
- jquery.maximage.js - Journal Fullscreen Slider Module (Max Image 2)
- jquery.cycle.all.js - Core Engine for the Max Image plugin
- plugins.js - Various plugins such as Prefixfree, jQuery Calculation, jQuery Easing, etc.
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.
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.
v.1.5.2 - May 16, 2013
- Added Quickview option to product list
- Fixed currency dropdown (single currency)
- Other important fixes
v.1.5.1 - May 15, 2013
- Added larger logo option
- Added smaller grid option (5 products per row)
- Important fixes
v.1.5 - May 13, 2013
- Added QuickView option to product grid
- Added language and currency dropdown option
- Added accordion effect to side category module
- Added mobile touch support to Journal Slider
- Improved mobile performance
- Important fixes & general improvements
v.1.4.1 - April 27, 2013
- Important fixes from v.1.4
- Additional Multiple-Level Menu color options
v.1.4 - April 26, 2013
- Multiple-Level Categories Menu. See documentation entry (Journal Control Panel/Custom Menus/Multiple-Level Menu)
- Backgrounds position and repeat options (Control Panel/General/Backgrounds)
- Notification timeout (admin option)
- Top Links separate border color option
- Hide category image, but keep refined images (admin option)
- Important fixes and general improvements
v.1.3.4 - April 17, 2013
- Important CSS fix
- Fixed font import sub-sets issue
- Added product name truncate option (Control Panel/General/Product/Product Name Overflow)
v.1.3.3 - April 15, 2013
v.1.3.2 - April 11, 2013
v.1.3.1 - April 10, 2013
- Added custom notification for Add to Cart, Add to Wishlist, Add to Compare
- Minor CSS fixes
v.1.3.0 - April 8, 2013
- Added wide layout option, max width 1220px
- Added responsive product gallery with touch/swipe support (Product page)
- Added option to Cloud Zoom, innner or outer zoom (Product page)
- Added option to upload own social icons + sort order (Footer)
- Added full-width product grid images. Image size requirements have changed, see Activate Theme in Installation & Setup for details.
- CSS fixes and general improvements
v.1.2.0 - April 1, 2013
- Added incremental buttons to the products quantity input (Product page)
- Added alternative to select lists with buttons (Product page)
- Added option to turn off Cloud Zoom (Product page)
- Added option to choose product grid hover effect (Product grid)
- Added option to choose share plugin from Add This and
- CSS fixes and general improvements
v.1.1.2 - March 22, 2013
- Fixed default font color for Product Compare page
v.1.1.1 - March 21, 2013
- Top links will show icons only (if present) on the smallest mobile resolutions
- Fixed z-index bug on the categories menu
v.1.1.0 - March 20, 2013
- Blog Manager Integration
- Promo Banners Module
- Refine Category Images
- Extended Categories Menu Option
- New Clean and Minimal Skin
- General Improvements & Bug Fixes
v.1.0.0 - March 13, 2013
After downloading the latest Journal version from Themeforest:
- 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.
- 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.