[solved] Overriding css of layered navigation block

[jd.creative]

Okay, so I'm trying to override the styles of the layered navigation block, but it doesn't do anything.

 

I've copied the blocklayered.css and blocklayered-15.css into

 

themes/mytheme/modules/blocklayered/

 

but when I edit it, nothing happens.

I copied the blocklayered.tpl file into that folder, and edited that, and that worked, but still the css won't change.

 

I'm going mad trying to work out why.

 

I've done this on several over modules and it worked fine.

EDIT: Just realised I haven't done this on other modules, I have only edited .tpl files this way so far, no css files, but I will be needing to do this for multiple modules, so need to work out how to do it!

 

I'm using PS 1.5 btw.

Please help before I go completely bonkers, thanks,

Josh.

 

EDIT: IF YOU'VE FOUND THIS PAGE BECAUSE YOU HAVE THE SAME PROBLEM.

This is what I was doing:

'my_theme/modules/blocklayered/blocklayered.tpl'

'my_theme/modules/blocklayered/blocklayered.css'

 

This is what I should of been doing:

'my_theme/modules/blocklayered/blocklayered.tpl'

'my_theme/css/modules/blocklayered/blocklayered.css'

 

IF THAT STILL DOESN'T WORK, VIEW MY WORK-AROUND: SOLUTION

It's not actually a solution to the problem, it's more of a get-around. It's a get-around the problem.

Edited May 3, 2013 by vekia (see edit history)

[jd.creative]

Nevermind, I'll just edit it in the global.css, that should work for most of the styles I want to override.

[vekia]

So, the problem is solved?

[jd.creative]

So, the problem is solved?

 

You could say so, technically THE problem still exists.

MY problem is solved, as I have found an alternative solution, however THE problem still exists, as in, the way that should work, that I was trying first, still doesn't work.

 

Thanks.

 

EDIT: The problem with doing it this way is that I've had to use '!important' in order for some of the styles to override the ones set in the modules stylesheet. Whereas, if I understand it correctly, you SHOULD be able to put the modules css file in to a modules folder in your own theme and then the module SHOULD load the css from there instead of in its own module folder, which would be a far better way of doing it.

Edited May 2, 2013 by jd.creative (see edit history)

[jd.creative]

See now it's a real problem, I'm trying to do it on a different module now, which needs to change quite drastically, and there is a lot of styles in the modules css file, overriding it with '!important' in the global.css is just not practical, there is supposed to be an easy way to override styles, can anybody help? Is it something I'm doing wrong?

[PascalVG]

Did you try to put it here:

http://docs.prestashop.com/display/PS15/Overriding+default+behaviors#Overridingdefaultbehaviors-Overridingamodule'sbehavior

 

My 2 cents,

pascal

[jd.creative]

Did you try to put it here:

http://docs.prestashop.com/display/PS15/Overriding+default+behaviors#Overridingdefaultbehaviors-Overridingamodule'sbehavior

 

My 2 cents,

pascal

 

Yes, that's where I'm talking about it supposed to be working from.

 

The original css file is in modules/blocklayered.css

So I've copied it to themes/modules/blocklayered.css

 

Then in theory, any changes I make to the copy, should override the original, but it doesn't.

 

Thanks,

Josh.

[jd.creative]

So what I'm resorting to, is making a copy of the module, and renaming it, then just editing it directly in the module.

 

Here's how I did it:

 

The two modules I wanted to style were the blocklayered and blockcart modules.

 

1 So, I copied 'blockcart' and 'blocklayered' in 'modules' and renamed them 'blockcartjd' and 'blocklayeredjd' (still in modules, not in theme), then I renamed all the files that had 'blockcart' in them to have 'blockcartjd' in them, and 'blocklayered' to 'blocklayeredjd'.

 

2 I then went through all the files within the folders and did a 'find and replace' (so in all the files in blockcartjd, I did a 'find blockcart' and 'replace with blockcartjd', and in blocklayeredjd I did a 'find blocklayered' and 'replace with blocklayeredjd').

 

3 Then, go to your prestashop back office, go to the modules section and install and enable your module, disable the one you just copied.

 

Josh's Tip.[/color] Josh"]Tip: In those folders ('blockcartjd' and 'blocklayeredjd'), you'll see a 'config.xml' file, you can open that up and edit the information in there to save confusion in the modules section in the back office.

They're all fairly obvious. I just changed Name, Author, and Description, this made it easy to identify my module in the modules section in the back office.

 

4 Then I just went ahead and edited the css files in those folders (blockcartjd.css and blocklayeredjd.css).

 

This is all working perfectly.

 

Josh's Tip.[/color] Josh"]Note: I used Notepad++ for the 'find and replace', though lots of software/editors have this feature, some call it 'search and replace'.

 

So, it's not the 'perfect world' as it takes a little longer and isn't as easy to do, but it seems a solid solution so far.

 

Hope this helps,

Josh.

Edited May 2, 2013 by jd.creative (see edit history)

[vekia]

just copy css file to the:

 

themes/your_theme/css/modules/blocklayered/blocklayered-15.css

 

 

should help..

[jd.creative]

just copy css file to the:

 

themes/your_theme/css/modules/blocklayered/blocklayered-15.css

 

 

should help..

 

You know what, I've read that thing a hundred times, and not once did I realise there was a '/css/' before the '/modules/' for the css files.

Because the tpl file just goes in 'your_theme/modules', I read all the others as 'your_theme/modules' not as 'your_theme/css/modules' or 'your_theme/js/modules'!!

 

Thank you!!

 

I knew it would be something really obvious, but no matter how many times I read http://docs.prestash...ule%27sbehavior I couldn't work it out!!

 

I will go try this later, when I get home. Argh, that's really annoying!!

 

Thanks, again!

 

This is what I was doing:

 

'my_theme/modules/blocklayered/blocklayered.tpl'

'my_theme/modules/blocklayered/blocklayered.css'

 

This is what I should of been doing:

 

'my_theme/modules/blocklayered/blocklayered.tpl'

'my_theme/css/modules/blocklayered/blocklayered.css'

Edited May 3, 2013 by jd.creative (see edit history)

[vekia]

You know what, I've read that thing a hundred times, and not once did I realise there was a '/css/' before the '/modules/' for the css files.

Because the tpl file just goes in 'your_theme/modules', I read all the others as 'your_theme/modules' not as 'your_theme/css/modules' or 'your_theme/js/modules'!!

 

Thank you!!

 

I knew it would be something really obvious, but no matter how many times I read http://docs.prestash...ule%27sbehavior I couldn't work it out!!

 

I will go try this later, when I get home. Argh, that's really annoying!!

 

Thanks, again!

 

you're welcome

 

for me this method works fine, for you it will probably works too

 

waiting for your reply in this case

 

regards

[jd.creative]

SOLVED.

 

That has the problem! Thanks.

[vekia]

SOLVED.

 

That has the problem! Thanks.

 

you're welcome

yeah :-) glad that it works

 

thread marked as solved