en Jump to content
Snade

[FREE THEME] Nice&Clean Customizable Default Theme Skin (updated 06.08)

Recommended Posts

Glad you like it guys :)

 

Let me know if you there are some problems, or you just need some assistance

 

Also I'll be happy if you provide some feedback after testing it so I can improve it more.

 

If you recognize the need of more variables, give me a hint and I can add them.

I'm thinking about more customization options to the buttons, maybe the font size and line height for the whole site or different parts of it.

Share this post


Link to post
Share on other sites

Um, I have small problem with this template. I am trying it on my test website: test2.ad-al.pl, and the right column is in the center. Also, it's problem with menu categories on the sidebar, just look. Any solutions?

Share this post


Link to post
Share on other sites

Um, I have small problem with this template. I am trying it on my test website: test2.ad-al.pl, and the right column is in the center. Also, it's problem with menu categories on the sidebar, just look. Any solutions?

Hi,

very strange, as you see on the demo its ok, but on your install I had to make 1px change in order to have all the 3 columns... anyway, please download the updated files and youre good to go.

 

Noticed that top menu is broken and fixed it. Please take a look at the demo and download latest file to try on your install.

 

I've added new variable for the submenu width. Default now is 160px, but you can increase it if you want.(prestashops default is 200px)

 

Also I made some more adjustments based on your test shop on elements that I didnt noticed on my installation. (since it only has the default products)

 

What about the categories in sidebar, they look ok I think, what is your concern?

 

Thanks for setting up that test shop, I hope we can work together to fine-tune it :)

 

@manumanio, trangpl

I hope that next week I'll have time to prepare 2 column version with grid, but now I'm too busy, and I think it requires more testing and tuning :)

Edited by Snade

Share this post


Link to post
Share on other sites

If I copy the .css code from your demo, everything is OK also with right column and the categories tree in the sidebar!

Could you expand background under the names of categories in the sidebar? To eliminate the dots.

Edited by 2grosiek7

Share this post


Link to post
Share on other sites

Still doesn't work :(

 

Hi,

first, what doesnt work, on your installation categories block is perfectly fine

 

second, you obviously did NOT applied latest updates. You can see the live preview where the categories block have subcategories and everything and work good.

 

 

 

I've added 2 new variables :

@block_head_background: transparent;
.block_head_border{   border-bottom: 2px solid @color2;
}

 

You can change the block header background and border from here;

 

please lets keep the topic clean, be constructive and detailed in your explanations. If you need special assistance, more like chat support, use the Private Message system. Thanks :)

 

And please, put the latests version on your test server :)

Edited by Snade

Share this post


Link to post
Share on other sites

If I copy the .css code from your demo, everything is OK also with right column and the categories tree in the sidebar!

Could you expand background under the names of categories in the sidebar? To eliminate the dots.

Hi, ofcource everything will be ok, on the demo its the latest version of the theme, please download it and apply it to your store.

 

to remove the dotted border you need to add this code to your css:

 

#categories_block_left li {
border-bottom: 0px dotted #CCCCCC;
}

 

I like to keep this in my theme, but you can easily remove it if you want.

 

Once again, please update the demo site, Thanks :)

Edited by Snade

Share this post


Link to post
Share on other sites

Hi Snade! Thank you for this theme, I'm new with prestashop and it's just what I needed!!

 

But now I have a problem:

I followed the instructions with a new install of prestashop 1.5 and it worked fine. Then I started adding categories in 2 languages, links in the top menu bar, changed the logo.....and suddenly the shop was back to the default theme.

The link to the stylesheet is still where it has to be.

 

what do i have to do? :wacko:

 

 

thank you!

Share this post


Link to post
Share on other sites

hmm thats strange. Are you sure that the css file is right before the closing </head> tag, also that the link to the file is correct ?

 

Can you give url so I can see whats going on ?

 

Cheers

Share this post


Link to post
Share on other sites

Solved!

i was about sending a screen capture of the code (i'm testing on localhost) when I thought about looking at the source code of my index page, and yep, it linked to somewhere else. -_- What a shame

Why it worked on my first try is still a mistery :lol:

 

thanks for your fast answer ^_^

Share this post


Link to post
Share on other sites

Thanks guys :)

 

Now you can make your default theme 2 or 3 column super easy. Download the latest update and follow the instructions provided (or just add class "two_col" to the <body>)

 

Let me know if you find any bugs or need somekind of assistance

 

Cheers

Edited by Snade

Share this post


Link to post
Share on other sites

Hello,

 

how can I install the theme? The installer wants a zip, but this is a rar. Can you please help?

 

Thank you!

 

What exactly is this and how to use it ?

 

So, 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 in order to work as on the demo (not tested on previous versions, but should work on 1.5+ )

 

To use the theme, you'll only have to put the css file in the default theme css folder, and to add one line in header.tpl to load that css file. Detailed instructions are provided, 3 min installation.

 

 

so unzip the archive, read the instructions, and youre ready to go in 3 min.

 

Cheers :)

Edited by Snade

Share this post


Link to post
Share on other sites

Hello!

 

Thanks for the great theme!

But i am having some troubles with getting the 2 column setup to work.

 

 

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="two col" {if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $content_only} content_only {/if}">

 

this code should be right doh ?

 

Even if i remove the hooks from the right column the page still doesnt scale properly.

Edited by Ricola

Share this post


Link to post
Share on other sites

Hi, you have one more closing " than needed.

the correct code is :

 

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="two_col {if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $content_only} content_only {/if}">

 

 

so just add two_col after class=" and thats it. it already has the closing " right before >

 

Cheers :)

Share this post


Link to post
Share on other sites

Thanks for the fast reply! Works like a charm now, been trying to get it to work but i guess i got blinded by all the code :s

Share this post


Link to post
Share on other sites

Good to hear its ok now :)

 

 

The skin now supports grid or list view, both for 2 and 3 column layouts. Simply add class grid to the body and thats it.

 

I've also attached example header.tpl for reference(and easy copy>paste)

 

Hope you like it, please report any kind of bugs with the grid, since I haven't tested it with various products and product options. Thanks :)

Edited by Snade

Share this post


Link to post
Share on other sites

One small tip

 

If you modify the theme (for example colo(u)r) Simple less v1.4 will not complie

 

You have to remove the @import and it will then compile

Share this post


Link to post
Share on other sites

One small tip

 

If you modify the theme (for example colo(u)r) Simple less v1.4 will not complie

 

You have to remove the @import and it will then compile

SimpLess is buggy as hell, personally I cannot drag and drop anything in it. It just doesnt work, and when I search in google I see that many people are also having this problem.

 

That @import is not something invalid, as you see I've compiled perfectly working css file out of that less.

 

Its a simpless issue and you should use another compiler.

 

I use CrunchApp

Share this post


Link to post
Share on other sites

How do I replace the Nice & Clean logo at the top. I know it's going to be a simple answer but it's driving me nuts.

Share this post


Link to post
Share on other sites

Preferences, Themes, Header logo ?

 

How do I replace the Nice & Clean logo at the top. I know it's going to be a simple answer but it's driving me nuts.

Share this post


Link to post
Share on other sites

I assume that you have directly copied the header.tpl from the archive,

in that case, go to line 81, and change the src to your image

<img class="logo" src="    ---- Your image location here ----   "

 

If you havent used the header.tpl from the archive, than just use the prestashop admin panel to upload your logo as you would normally do.

 

I've hard-coded my logo, because prestashop is post-proccessing the image resulting in reduced quality and I prefer to have the original file directly

Share this post


Link to post
Share on other sites

dmsims - Thanks for the info. That's where I went to first but nothing happened.

 

Snade - Thanks for the info and yes I did copy the header.tpl from your file. Just changed it and now my logo is displayed. Great theme. Been playing around with it and it works a treat.

 

How can I increase the height of the lines, say for example, under the "categories" block?

Share this post


Link to post
Share on other sites

You can edit the .less file in order to do this, search for this code and change the value (line 427)

#left_column .block li a {
color: #555555;
display: block;
font-size: 14px;
[color=#ff0000]line-height: 20px;[/color]
text-transform: uppercase;
}

 

If you change the line-height, your carret will go out of alignment (the little triangle), so you'll also need to change its position fom this code

 

#categories_block_left li a, .blocksupplier li a, .blockmanufacturer li a, .informations_block_left li a {
background-position: 10px 13px;
}

 

 

Let me know how it goes, and also let me know if you find any bugs or glitches, I'm trying to clean them out.

Edited by Snade

Share this post


Link to post
Share on other sites

Hi Snade,

 

thank you for the info. I tried it out but that just increases the area where the text is. It's the coloured line under the block title that I'd like to change.

Share this post


Link to post
Share on other sites

You need to be more specific next time :) Line height is one thing bottom border height is another :)

 

You can change that border look at the variables section - line 17

 

Cheers :)

Share this post


Link to post
Share on other sites

Hi Snade,

 

loving how easy it is to use and adapt this theme without getting to technical.

 

I've attached a screen shot of one of my categories and there seems to be a slight problem. The product on the left, the pig, is out of stock and it appears that an out of stock item forces the "Buy Now" button to shift up and centre itself. Also the product images are not centred in their respective boxes. Can that be sorted and if so will it also sort out the product description which over runs includes the short description and product description. Can only the short desription be shown.

 

 

 

I hope that all makes sense.

 

Cheers :D

post-46042-0-13499700-1366362615_thumb.jpg

Edited by Dahl99

Share this post


Link to post
Share on other sites

Hi Dahl99,

I dont think that out of stock label is casuing problems, its something else. Normally, the name and short description would go next to the image, but in your case they go below, which means there is not enough space for them. The reason for this can be the image size. I've made the grid view to work with original configuration, if your images have different sizes, you should edit the theme to match your sizes.

 

In case you cannot do that alone, I'll need access in order to help you. If you provide live link, I will be able to give you new .less file that will work for your installation.

 

Meanwhile,

try changing this property :

#product_list a.product_img_link {
margin-right: 14px;
}

its not in the less file, so you can add it.

 

 

add it anywhere in the less, change the value to lower one, and compile. Let me know how it goes.

 

 

also, you can use private message in case you need chat support, no need to use the forums for chat :)

 

Cheers :)

Edited by Snade

Share this post


Link to post
Share on other sites

Hi Snade,

 

Nice template, however is there a way you can change the background colour to an image?

 

Thanks

 

Yes, you can :)

Just add your background image after the @bgcolor variable as you would normally do.

@bgcolor: url(YOUR IMAGE);

Share this post


Link to post
Share on other sites

Yes, you can :)

Just add your background image after the @bgcolor variable as you would normally do.

@bgcolor: url(YOUR IMAGE);

 

Great support. I will try it out.

 

By the way, it works with 1.5.3.1 as well (As Hostgator does not have 1.5.4 in Quickinstall and I had trouble with Mobile site when using 1-click upgrade addon to upgrade to 1.5.4.)

Share this post


Link to post
Share on other sites

Thank you very much, wonderful theme.

 

But do you know how to edit the top links font size in the top horizontal bar ?

 

Thank you again.

Share this post


Link to post
Share on other sites

Solved ! Edit the font size of the top menu bar.

 

In themes/default/CSS edit cleantheme.css

 

The line in wich the font size needs to be changed is:

 

.sf-menu {

background: @color1;

.border-radius (5px);

padding: 0 10px;

height: 40px;

width: 960px;

a {

color: #fff;text-shadow: none;padding: 0 10px;line-height: 40px;font-size: 17px;

&:hover {color: #fff;}

}

 

(This is how i change it, was by default 14px)

Share this post


Link to post
Share on other sites

Hello,

 

I have another problem, when a product is out of stoc the add to cart button is moves above and to the left (you can see in the attached image)... and I do not know what should be changed and where.

 

Thank you in advance.

 

butoanemutate.jpg

Share this post


Link to post
Share on other sites

It will be great if the rewritten code could make the add to cart button just to disappear when the product is out of stock.

 

Thank you again.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More