Prestashop Theme: 01 Oslo v1 - Corona Funerariacoronafuneraria.com/themes/01oslo/docs/readme_en.pdf · 1. To start, login to the admin panel of your Prestashop setup, and navigate

Prestashop Theme: 01 Oslo v1.0 (For Prestashop 1.6.0 or higher)

Thank you for choosing 01 Oslo

Table of content Installation ........................................................................................................................................... 3

Automatic Installation for Prestashop 1.6.x .................................................................................... 3

Updating 01 Oslo ................................................................................................................................. 5

Configuration ....................................................................................................................................... 6

Images ............................................................................................................................................. 6

Homepage configuration ................................................................................................................. 7

Hooks arrangement ............................................................................................................................. 9

Modules positions ............................................................................................................................. 10

Custom modules ................................................................................................................................ 12

01 Oslo theme configuration (config01oslo) ................................................................................. 12

01 Ultimate Background (ultimatebackgroud01) .......................................................................... 12

Customization .................................................................................................................................... 17

More infos ......................................................................................................................................... 18

Installation Automatic Installation for Prestashop 1.6.x

1. To start, login to the admin panel of your Prestashop setup, and navigate to the “Preferences > Themes” page. Click “Add a new theme”.

2. Select the .zip file you downloaded and click “Save”.

3. Go to the section “Preferences > Themes” and select the theme 01 Oslo. Click “Save”.

01oslo.zip

4. The following page summarizes the modules that will be enabled, click “Save”.

5. Congratulations, 01 Oslo is now installed.

6. In “Preferences > Themes” deactivate the mobile theme (01 Oslo is fully responsive and does not need a mobile theme).

7. Read configuration section.

Updating 01 Oslo If you already use the theme 01 Oslo and you want to install a newer version that you have downloaded, please follow these instructions:

1. Save your files if you made any changes to .tpl or .css files (including custom.css) 2. Go to the "Preferences > themes" section, activate the "default" theme and delete 01oslo

theme 3. Go to the "Modules" section, delete modules:

a. "01 Oslo theme configuration" b. "01 Ultimate Background"

4. Install the latest version of 01 Oslo following the documentation (see installation).

Configuration Images With the default image sizes of the theme, it is recommended to use square ratio for your products images, for example, dimensions of 1000 * 1000px or 700* 700px (before Prestashop resizing). Images for categories and homepage slideshow should have a rectangular format of 710 * 350px.

1. Check the following image sizes in “Preferences > Images” (you can change some of these sizes if needed):

a. home_01oslo => 350px * 350px b. category_01oslo =>710px *350px c. subcat_01oslo => 170px *84px d. large_01oslo => 700px * 700px e. thickbox_01oslo = > 1000px *1000px f. medium_01oslo => 175px *175px g. small_01oslo => 98px*98px

2. Regenerate thumbnails: Go to “Preferences > Images” and click on “Regenerate thumbnails”. If the site time out, turn off “Erase previous images” and click “Regenerate thumbnails” as many times as needed.

Homepage configuration

1-> “Featured products on the homepage” module You can display your featured products at the top of the home page via this module. This module displays the products associated with the "Home" category. Configure the module to define the maximum number of items to show (3 on the demo site).

2-> “Image slider for your homepage” module This module allows you to display an image slideshow on your homepage. You can add titles and text to your slides. It is recommended to configure the module by setting a higher "Max width" (eg 1200).

3-> “Custom CMS information block” module By configuring this module, you can display a presentation text of your brand or your site on the right hand side of the slideshow. The demo site uses a title (h1 tag) and two paragraphs.

4-> “New products block” module This module displays the new products in your shop. You can define the maximum number of products to show (3 on the demo site) and the number of days to consider that the products are "new".

5-> “Top-sellers block” module This module displays the best-selling products of your shop. To change the maximum number of products shown, you must change the "modules/blockbestsellers/blockbestsellers.php” file. Locate the following line:

if (!($result = ProductSale::getBestSalesLight((int)$params['cookie']->id_lang, 0, 8)))

The last number defines the maximum number of products displayed.

Hooks arrangement

displayTop

displayHome

displayHomeTabContent

displayLeftColumn (empty and disabled by default)

Modules positions By default, the modules are positionned like below (Modules > Position):

Custom modules To configure a module, go to the “Modules” section of your back office, search the module and click the “configure” link just bellow.

01 Oslo theme configuration (config01oslo) This module is required by 01 Oslo theme. By configuring it, you will be able to change color of many elements. You can also define the following options:

1. Subcategories on category page a. Enabled: Subcategories will be displayed on category page (that have subcateogries) b. Disabled: Subacategories will not be listed on category page

01 Ultimate Background (ultimatebackgroud01)

Background types

Background Color

1. Select “Background Color:” 2. In the text field, specify the color to use. The color must be in hexadecimal format. 3. Click the “Save” button at the bottom of the page.

Note: choosing the right background color is important even if you select another type of background. Indeed, the color will be displayed while your image or video loads

Background Gradient

1. Select “Background Gradient:” 2. Specify the first gradient color (hexadecimal) 3. Specify the second gradient color (hexadecimal) 4. Specify the direction of the gradient. (angle between 0 and 360 °), see figure below, an angle

of 180 ° will result in a vertical gradient while an angle of 90 ° will give a horizontal gradient 5. Click the “Save” button at the bottom of the page.

Background Image

1. Select “Background Image: ” 2. Image setting (accepted formats jpg, gif, png) :

a. Select the location of the image to use on your hard drive OR

b. Set the url of the image if you want to use an image hosted on a different server (CDN)

3. Click the “Save” button at the bottom of the page.

Advanced Settings

1. Background size: check “full screen” if you want your image to be streched so it covers the entire screen.

2. Background attachment: check « fixed » for the image to have a fixed position even if the user scrolls down

3. Background repeat: a. no-repeat: image will not repeat b. repeat: image repeats itself (use of patterns, for example) c. repeat-x: the image repeats only horizontally d. repeat-y: the image repeats only vertically

4. Horizontal alignment: a. left: image is aligned to the left b. center: image is centered c. right: image is aligned to the right

5. Vertical alignment: a. top: image is aligned to the top b. center: image is centered vertically c. bottom: image is aligned to the bottom

Background video

The use of background video for your site will stand out and get some interesting effects, but you should understand that this is “only” a decorative video. The length should not exceed one minute, and high definition should be avoided in order to minimize the file zize.

1. Select “Background video:” 2. Video setting (accepted formats mp4, webm, ogg/ogv) :

a. Select the location of the video to use on your hard drive OR

b. Set the url of the video if you want to use a video hosted on a different server (CDN) 3. Optionally, define a second video source. It will be the same video encoded in another

format, to ensure that the video will be displayed on a larger number of browsers. It is recommended to use mp4 video format for source 1 and webm or ogg video format for source 2. Example of free software for converting your videos: http://www.mirovideoconverter.com/ Browser support for html5 videos: http://en.wikipedia.org/wiki/HTML5_video#Browser_support

4. Click the “Save” button at the bottom of the page.

Module Options Page background Select this option if you want to simulate a “container” around your content. Set the background color, opacity and width of the container.

Note: Set the width to “0” and the container will have a width of 100%

Homepage only This option allows you to enable the module for the homepage only.

Module Performances For reasons of ease of use and bandwidth costs, it is very important that your pages are light and load quickly.

Remember to fully optimize your images and videos before uploading them, because no treatment is done during the upload. To reduce their size, you can for example reduce their dimension and increase compression.

The ideal is to host your image or video on a CDN then specify its URL in the module configuration.

Customization To ensure an easy maintenance and keep the possibility to update or reinstall the theme easily, it is recommanded to make all your CSS changes in the custom.css file located in the directory: "01oslo/css /autoload". If you need to update the theme someday, you will have to backup custom.css first. This file contains examples of how to change fonts.

More infos Have fun with your new Prestashop Theme

Feel free to send me your comments or suggestions that will improve the 01 Oslo theme, and to rate the theme if you like it. (addons.prestashop.com, under My Account > Ratings).

Author: Guillaume Laroche http://theme01.com