Prestashop 1.6 CSS overriding

[lrdo]

Hello everybody,

 

I'm new in Prestashop and I'm trying to understand how to modify CSS codes in a theme in the same way that we do a child theme in Wordpress. The goal is to be able to install futur theme's updates without affecting my custom codes.

 

So, for this example, let's use the default theme (default-bootstrap).

 

Let's say that I want to customize the Blockcart button. Original codes are:

 

.shopping_cart > a:first-child {

    padding: 7px 10px 14px 16px;

    background: #333333;

    display: block;

    font-weight: bold;

    color: #777777;

    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);

    overflow: hidden; }

 

And I want to change them for:

 

.shopping_cart > a:first-child {

    padding: 7px 10px 14px 16px;

background: #CF0000;

display: block;

font-weight: bold;

color: #FFE800;

text-shadow: 1px 1px rgba(0, 0, 0, 0.5);

overflow: hidden;

border-radius: 15px 5px; }

 

Ok. Now, the path to this CSS file is:

 

/web/themes/default-bootstrap/css/modules/blockcart/blockcart.css

 

So, I did copy my customized css file in that path:

 

/web/override/themes/default-bootstrap/css/modules/blockcart/blockcart.css

 

I delete the class_index.php file in the /web/cache folder, empty the cache on my web browser, press Ctrl-F5, and nothing changes.

 

Can someone tell me why? (in french or in english)

 

Thank you very much!

 

 

[Rolige]

The file "/web/themes/default-bootstrap/css/modules/blockcart/blockcart.css" is already overriding to the master file in "/web/modules/blockcart/blockcart.css"

You can't override the file "/web/themes/default-bootstrap/css/modules/blockcart/blockcart.css" because this is the override file, so you will need to make the changes here.

 

 

I hope this help you.

[lrdo]

Ok, thank you!

 

So, does it mean that if I install an upgrade of the theme in the futur, this file will not be replaced and my customisation will remain?

 

Thanks again!

[dioniz]

You should create new theme and copy files from default-bootstrap theme to your new theme and then make changes.

[Rolige]

In this case you are using the default theme, then if you upgrade your PrestaShop and this update include changes in these files, of course will be updated.

My recommendation is, if you want keep your CSS changes in future upgrades, create a new CSS file in the folder "autoload", eg: /web/themes/default-bootstrap/css/autoload/my-own-styles.css

Now you can insert all your custom styles in my-own-styles.css, or you can create all the files you need, this files will be loaded automatically.

[lrdo]

Thank you Cotoko, you have really understood my needs. In fact, I won't use the default template, I will buy one and customize it a bit.

What you wrote sounds very good. I did a test but, since I'm not a professional, I would need one more explaination:

 

How come the autoload folder don't have priority over the original folder? It looks like this if I inspect element:

 

media="all"

 

.shopping_cart > a:first-child {

1. padding: 7px 10px 14px 16px;
2. background: #333333;
3. display: block;
4. font-weight: bold;
5. color: #777777;
6. text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
7. overflow: hidden;

}

 

 

media="all"

 

.shopping_cart > a:first-child {

1. padding: 7px 10px 14px 16px;
2. background: #CF0000;
3. display: block;
4. font-weight: bold;
5. color: #FFE800;
6. text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
7. overflow: hidden;
8. border-radius: 15px 5px;

}

 

Thank you!

Edited January 29, 2015 by lrdo (see edit history)

[lrdo]

Here is a screenshot

 

 

Edited January 29, 2015 by lrdo (see edit history)

[lrdo]

Ok, I think I found a good solution. I have deleted the original css file, in the /web/themes/default-bootstrap/css/modules/blockcart.

 

So, it's now the file in the autoload folder that appears. And, in a future upgrade, I will just have to delete again the original file, and my customization will remain.

 

Does this solution sound good to a Moderator?

Edited January 29, 2015 by lrdo (see edit history)

[parsifal]

How come the autoload folder don't have priority over the original folder? It looks like this if I inspect element:

 

In your custom CSS file inside the autoload folder, you could use a more detailed selector with greater specificity. For example, instead of this selector:

.shopping_cart > a:first-child

...you can use this one:

#blockcart_top_wrap .shopping_cart > a:first-child

Edited February 4, 2015 by parsifal (see edit history)

[lrdo]

Ok, thank you Parsifal!