Override a module's behavior (tpl, css, js) in PS 1.5 RC2

[ivangoti]

Hi,

 

I just started to test PrestaShop 1.5 RC2. I want to override a module's behavior (tpl, css, js), for example the native blocksearch module.

 

I've read the documentation for PrestaShop 1.5, the Overriding default behaviors, where they say that the override of modules can be done in the following folders:

• /themes/my_theme/modules/my_module/views/templates/front/my_module.tpl
  
• /themes/my_theme/css/modules/my_modules/views/templates/front/my_module.css
  
• /themes/my_theme/js/modules/my_modules/views/templates/front/my_module.js
  

 

The point is that the modules folder doesn't exist in "my theme" folder, and the same happens with the modules folder inside the css and js folders inside my theme. The blocksearch module is installed, and they say that module overrides are enabled as soon as the module is installed.

 

Then, how do I have to override a module? Do I have to create those folders?

 

Thanks

[Dreamtheme]

Yes you should create the folders and place the files. In /themes/my_theme/css/modules/ create a folder if there is none named for example "blocksearch" and place the changed blocksearch.css file there.

[Suthichai]

How do we override files in /shop/js folder, for example /shop/js/admin.js?

[BoardTech]

Hello!

I have some problems with the overriding default module behavios. I use the current SVN 1.5 RC and have create the folder structure how is written at the Docs:

Since PrestaShop 1.5, the path is slightly longer

• /themes/my_theme/modules/my_module/views/templates/front/my_module.tpl
  
• /themes/my_theme/css/modules/my_modules/views/templates/front/my_module.css
  
• /themes/my_theme/js/modules/my_modules/views/templates/front/my_module.js
  

But nothing changes. The cache are disabled (in my browser and in PS) and i have restart the webserver.

I work on Windows 7 x64 as a local Xamp Server.

 

If i need to activate the overriding? Are enogue to write my canges in this file or is nessery to copy the full file and change my values?

 

Thanks.

[shoulders]

i have just been looking at overiding a module and in 1.4 the overide paths are logical. Does anyone know why they are daft and hard to follow in 1.5 ie

 

 /themes/my_theme/js/modules/my_modules/views/templates/front/my_module.js

 

looking in to the further it is not as daft as it looks. This longer file location is for files that the module calls. You still use the 1.4 style of overiding for the basic module tpl, css and java. This also explains why looking throught the module in PS1.5RC2 i could not find any files in the longer file location.

 

basically i think as dreamtheme has said, i use the 1.4 overide format in PS1.5 for overiding the basic files

Edited September 3, 2012 by shoulders (see edit history)

[BoardTech]

And how i can overdrive the modules? For example, the module blockmanufacturer. I have copy the original blockmanufacturer.css to themes/default/css/modules/blockmanufacturer/views/templates/front/blockmanufacturer.css

I have only modifight the background color to test it. Cach are disabled in PS and also in my Browser.

But nothing change. At the Sourcecode i can see, PS don't call the override css file. Only the normal css file in the module fold is called.

And my final quastion is, is this a bug or are i'm so stupid to copy this file to the right plase? At 1.4 is going all without any problems.

 

Here a screen of the directoy-tree:

 

Thanks for u help.

[shoulders]

this code is wrong

themes/default/css/modules/blockmanufacturer/views/templates/front/blockmanufacturer.css

 

Firstly you should not be altering the default theme. This is bad.

 

I will give you the correct code but you really should copy the default theme and edit that one.

 

themes/default/css/modules/blockmanufacturer/blockmanufacturer.css

 

The instructions do not read the best. They make out that PS1.5 is using a totally different overide method. It is not. The overide depends on the location of the file you are wanting to overide. basically just do the same as you would in PS1.4

 

Do you see how the overide code i have given you follows the PS1.4 method. I might gret in touch with the document writer and tell him how it reads.

 

You are not stupid because i came across this problem while i was looking up the overides myself

Edited September 8, 2012 by shoulders (see edit history)

[shoulders]

Just an update to what i said earlier. The overide system is messy. the documentation needs writing a lot better and the PS team need to work out what they are doing with it.

 

Prestashop is no longer easy to develop with, or use. To many programmer input not enough user input.

 

@PS Team can you make these instructions clearer. They do not make sense to me. Thanks

 

http://doc.prestashop.com/display/PS15/Overriding+default+behaviors

[BoardTech]

Okay Thanks, it works!

I have mistake the PS1.5 Manual. I testet only the new 1.5 RC on the current SVN. This is only for testing and not for developing.

And why is this written at the Wiki? Is this the future way to override the Theme or is fixed to the old system?

Thanks

[shoulders]

according to the wiki the new PS1.5 format is the one to use, it also implies that this is how all the modules are structured. None of the modules i looked at had the extra folders in them, whatever they do. So i just used the 1.4 syntax which seems logical and works.

 

The wiki page does need cleaning up. I personally am going to use the 1.4 format anyway because like 90% of people who do their own ecommerce site will not understand why or how to use the new system. Most people just want to change colours and basic layouts of the default template they have copied as per the wiki.

 

stick with the old system, the PS Team might notice a lot of people having issues with it and not shelve the 1.4 overide system which i suspect they will have planned for the future. PS 1.5 is going to cause a lot of issues for a lot of people when it gets released.

 

I am glad i could help

[cleatus]

FYI: blocktopmenu/superfish-modified.css doesn't seem to override properly. i spent 30 minutes placing copies all over the place trying to get it to override before i finally decided it must have something to do with the module and verified by placing blocksearch/blocksearch.css in localhost/themes/my_theme/css/modules/blocksearch/blocksearch.css and voila! i notice it doesn't follow the naming convention. not investigating why it doesn't work right now.

[shoulders]

just follow the 1.4 naming convention. i think the wiki page needs updating but the block top menu css is in its own css folder inside the module folder so you have to add an extra folder. use the location below for overiding and notice the extra CSS folder.

 

localhost/themes/my_theme/css/modules/blocktopmenu/css/superfish-modified.css

 

It took me ages to find this, lol

[jpac]

Thank you "shoulders" for the superfish css tip.

 

i'm trying to override this file:

 

root/classes/PaymentModule.php.

 

Apparently the only way to do it is with another file in root/override/classes

 

I haven't managed to override the file within the Theme. The question is... does the root/override folder gets updated (and i loose all changes) when i do a future upgrade?

 

Thanks for any advice

[brandonc503]

FYI: blocktopmenu/superfish-modified.css doesn't seem to override properly. i spent 30 minutes placing copies all over the place trying to get it to override before i finally decided it must have something to do with the module and verified by placing blocksearch/blocksearch.css in localhost/themes/my_theme/css/modules/blocksearch/blocksearch.css and voila! i notice it doesn't follow the naming convention. not investigating why it doesn't work right now.

there is a link to the css in the tpl file.

Edited October 25, 2012 by brandonc503 (see edit history)

[PedroDelCargo]

Hi,

I'm trying to overide modules, but it does not work as expected.

.tpl files overide works well and is immediately visible.

But .css files overide does nothing. I tried with several modules. I followed instructions found in wiki and in this forum with no luck.

Except disabling smarty cache, clearing browser cache and respecting file path rule (ie: themes/my_theme/css/modules/my_module/my_module.css), is there anything else I should do that I would have missed ?

My PS version is 1.5.3.1

Thanks for any help on this.

[shoulders]

usual one is the css file in the module is not where you expect it:

 

/my_theme/css/modules/my_module/my_module.css

this assumes the css file is located at

/modules/my_module/my_module.css

 

if your css in your module is here

/modules/my_module/css/my_module.css

 

your overide path should be

/my_theme/css/modules/my_module/css/my_module.css

 

personally i dont like the format of the overides. all the modules overide should just be in the modules folder rather thast split between js, css and the module template folder. Still pretty awesome though.

[PedroDelCargo]

usual one is the css file in the module is not where you expect it:

 

/my_theme/css/modules/my_module/my_module.css

this assumes the css file is located at

/modules/my_module/my_module.css

 

if your css in your module is here

/modules/my_module/css/my_module.css

 

your overide path should be

/my_theme/css/modules/my_module/css/my_module.css

 

personally i dont like the format of the overides. all the modules overide should just be in the modules folder rather thast split between js, css and the module template folder. Still pretty awesome though.

Thanks for your reply.

Let's take a real example: the homefeatured module.

Both homefeatured.tpl and homefeatured.css are in the same folder: /modules/homefeatured/

I copied and modified original homefeatured.css file into /themes/my_theme/css/modules/homefeatured/ folder. This is correct, isn't it ? But it does not affect the appearence of homefeatured module

[shoulders]

i am just messing with home featured at the minute. i will have a quick look.

[shoulders]

thats the right place. i know these are stupid but try:

• emptying your cache and then close and open your browser. sometimes when i clear my cache i have to cycle my browser to clear the session.
  
• Also make sure that caching is turned off and that compile is also forced.
  
• make sure the combine java and CSS options is turned off
  
• Lastly make sure you are running the latested version of PS.
  

what i like to do, to see if the CSS is actually getting overidden, is to either make the background bright red in the overide CSS or use firebug (firefox addon) to show me which css file is getting loaded

 

I will need to be be doing some overides for this module so if it is a bug i will post it here.

[PedroDelCargo]

thats the right place. i know these are stupid but try:

• emptying your cache and then close and open your browser. sometimes when i clear my cache i have to cycle my browser to clear the session.
  
• Also make sure that caching is turned off and that compile is also forced.
  
• make sure the combine java and CSS options is turned off
  
• Lastly make sure you are running the latested version of PS.
  

what i like to do, to see if the CSS is actually getting overidden, is to either make the background bright red in the overide CSS or use firebug (firefox addon) to show me which css file is getting loaded

 

I will need to be be doing some overides for this module so if it is a bug i will post it here.

Many thanks for the time you spend on this.

Unfortunately, I did what you suggest already... unsuccessfully.

Another important point is that even though I took home featured module as an example, I have the same result with other modules (I also tried with homeslider and blocklanguages modules).

[PedroDelCargo]

I found that same css in same path folder on another server works as expected.

There is something wrong on the server but I don't know what.

[shoulders]

I found that same css in same path folder on another server works as expected.

There is something wrong on the server but I don't know what.

 

have you got your base URI/URL set correctely in prestashops backend. you know where you tell it if it is in a sub folder, also once you have done this try regenerating you htaccess. this can be done by turning friendly URL off and then back on. also try to see if the overide works correcterly with firendly URL off.

[PedroDelCargo]

I tried what you suggested... no luck.

I think I'll make a new clean install of Prestashop.

[Henrik Pantle]

this topic helped me. thanks!

[louissss]

Yes you should create the folders and place the files. In /themes/my_theme/css/modules/ create a folder if there is none named for example "blocksearch" and place the changed blocksearch.css file there.

this doesn't work for me. I installed a module called lofmegamenu, and created a file: themes/ESItheme/css/modules/lofmegamenu/lofmegamenu.css

then I added some modified css here....and it is not accounted for....

[nahlik]

just follow the 1.4 naming convention. i think the wiki page needs updating but the block top menu css is in its own css folder inside the module folder so you have to add an extra folder. use the location below for overiding and notice the extra CSS folder.

 

localhost/themes/my_theme/css/modules/blocktopmenu/css/superfish-modified.css

It took me ages to find this, lol

 

Great thanks for this solution. I have also spent much time trying to override this css when I finally found your post. Really difficult to guess

[shoulders]

@nahlik

 

I am glad it helped. We have all been there

[Pandi]

just follow the 1.4 naming convention. i think the wiki page needs updating but the block top menu css is in its own css folder inside the module folder so you have to add an extra folder. use the location below for overiding and notice the extra CSS folder.

 

localhost/themes/my_theme/css/modules/blocktopmenu/css/superfish-modified.css

It took me ages to find this, lol

 

works for me as well! It was a great help to find this. Thank you!

[rtvt]

Hello, i try to override .tpl file in themeconfigurator module... hook.tpl  (PS 1.6)

 

Real hook.tpl destination:

 

www/modules/themeconfigurator/views/templates/hook/hook.tpl

 

I am created same directories in my theme folder and put my hook.tpl there:

 

www/themes/mytheme/modules/themeconfigurator/views/templates/hook/hook.tpl

 

But it doesn`t work. Please help. How I can override it?

[rtvt]

Problem solved. Not full rights to folder