Nice & Clean

Customizeable Defaulth Theme skin

Customizable

You can change the colors, select from 2 or 3 column layout, list or grid view, or one of the 8 prebuild patterns

User friendly

As a defaulth theme skin, its super light, easy to install and easy to customize. And ofcource - Great looking !

Bulletproof

Keeps all the benefits of using the defaulth theme, so you can be sure it will be working with any module and feature


Features


  • Uses PS 1.5.4.1 default theme, so its fully compatible with every prestashop module or feature.
  • Color scheme changing - You can make it from orange/grey, to blue/grey, or red/black in seconds
  • 2 or 3 column layout - super easy switching
  • List or grid view
  • 8 Background patterns
  • Easy font changing
  • Added Hovers, shadows transitions and other effects
  • Css3 buttons - again very easily customized (you put one color and it recalculates the gradient, border, and hover gradient for you)
  • Everything is restyled (header, menu, sidebar, content, product page, footer etc)
  • Very easy installation
  • Super lightweight - 20kb compiled CSS
  • Logo PSD file

Demo

Live Demonstration of the theme
Live Preview Download Donate
Best Premium Themes
If you like the theme, support the project with coffee or pizza and I'll turn it into free code for everyone :)

About the theme


Very often, merchants dont need fancy themes or expensive customized solutions, but something more like the default theme of prestashop, which got everything essential for a good online shop, and also works great with all modules and features.

In the same time, the default theme is very simple, doesn't cover the today's standards in ecommerce, and cannot be customized with colors suitable to the products sold(its only black).

These are the problems that this theme solves.

You can have all the benefits of the default theme, but also get nice and clean design with lots of improvements and the possibility to change the colors of it to match your brand or products.

Documentation

How to install and customize the theme

What exactly is this and how to use it ?


This is css override theme, that consist of a single less file, which is compiled into css, to override the default prestashop theme. You'll need clean installation of prestashop 1.5.4.1 in order to work as on the demo (not tested on previous versions, but should work on 1.5+ )

To install the theme, you need clean installation of prestashop 1.5.4.1

1. Upload the file cleantheme.css in directory \themes\default\css

*2. Upload the folder \patterns\ in \themes\img folder * - Optional, if you dont want the patterns, dont add them

3. Replace the file \themes\default\header.tpl with the one provided in the archive

Make sure that you have re-compiled your smarty templates at BackOffice -> Advanced Parameters - > Performance

And thats it, your theme should be up and running :)


Choosing grid or list view, 2 or 3 column layout


Open your new header.tpl file and at line 68 you will see this code:

.. class="cleantheme two_col grid pattern8...

If you remove the class two_col you will get 3 column layout, and if you remove the class grid you'll get list layout in category pages


Choosing background pattern


Again in header.tpl file at line 68 :

.. class="cleantheme two_col grid pattern8

Change the number of the pattern from 1 to 8 (pattern3 , pattern4 etc. )


Customizing the theme


To customise the theme, you need to open the cleantheme.less file, and edit the variables at the begining of the file. There are instructions what each variable does. Then you need to compile that less file into css using CrunchApp, or any other less compiler. Then replace the compled css file

//font
@import "https://fonts.googleapis.com/css?family=PT+Sans:400,700"; // *tip- change the font-family after importing font
//Base variables
@color1: #444; //menu, some tables headers, and where dark color is needed
@color2: #F15A23; // The main color of the theme
@color3: #EEEEEE; // light color used mainly for some borders
@colorbtn: #F15A23; // the color of the buttons, button gradient, borders and hover state are automatically generated out of it


@bgcolor: #F8F8FA; // the body background (can be image)
@textcolor: #555555; // main text color
@textcolor2: #666; // lighter color for few texts

@fontfamily: "PT Sans",Helvetica,Arial,sans-serif; // the main font family (*tip- include your font first)

@submenuwidth : 160px; // width of the submenus under the top horisontal menu
@block_head_background: transparent;
.block_head_border{ border-bottom: 2px solid @color2;
}

//Logo adjustnemt
@logo-margin-top: -10px; //Manage vertical position of the logo

@menu-margin: 0px; // put 90px and above, to move the menu down for more logo space

@import "source.less";

Changelog


Changelog
-------------
----
06/08
----

-search block fix
-menu fix
-add to card is hidden when its not clickable
-add to compare checkbox moved and text is now shown
-menu hover effect added
-all buttons fixed in IE (still with gracefull degradation)
-added background patterns
----
13/07
----
-Prestashop 1.5.4.1 fixes
-updated example header.tpl - plug and play on 1.5.4.1
-Added logo and menu vertical position variables
-few small bug fixes
-theme split in 2 files for easy manage and updates
-added cleantheme class for easy switch on/off
-IE buttons bugfix
-added try-out panel on the demo
----
23/04
----
-fixed add to cart button when item is out of stock
-added styling for language selection dropdown
----
15/04
----
-added grid view for 2 and 3 column layouts
----
12/04
----
-few css fixes
-added 2 column layout
----
05/04
-----
-fixed problems with the top horizontal menu dropdowns, now supports multiple level dropdowns
-tuned alignment of sidebar categories block
-styling for "subcategories" header in products category pages
-fixed issue with 3rd column getting below 2nd
-added variable for top menu, sub-menu items width
-added truncate to various places so texts doesn't go outside their boxes
-added variable for Block Header background
-added mixin for block header border

DOWNLOAD

Tip: If the theme turn out to be usefull for you, please donate so I can continue add new features and bug fixes
Info: In future developement you can expect:
- Responsiveness
- More customization options
- Different layouts
- Pre-made color schemes
- Admin module for easy managing
Download Donate
Best Premium Themes

Contact: alexander @ webiz.bg