CSS in specific hook

[almeidaz]

Hi, presta community,

 

I'm trying to call CSS for specific hook in my module

 

there is my code :

public function hookDisplayHeader($params)
    {
         $this->context->controller->addCSS($this->_path.'css/template.css');
         $this->context->controller->addJS($this->_path.'/js/io.js');
    }


public function hookDisplayProductPapp1($params)
    {
        $this->context->controller->addCSS($this->_path.'css/template1.css');
        return $this->display(__FILE__, 'views/templates/front/modulefront.tpl');

...
    }

public function hookDisplayProductPapp2($params)
    {
        $this->context->controller->addCSS($this->_path.'css/template2.css');
        return $this->display(__FILE__, 'views/templates/front/modulefront.tpl');
...
    }

and my modulefront.tpl

<div class="aus">template content</div>

in my case template1.css win all the time :

 

result from firebug when i select my <div class=aus in the HookDisplayProductPapp2 with template2.css

 

.aus {                               template1.css:1
    width: 100%;
    margin-top: -13px;
    position: relative;
    z-index: 1;
}
.aus {                               template2.css:1
    width: 90%;
    position: relative;
    z-index: 1;
}                                        template.css:1
.aus {
    width: 100%;
    position: relative;
    z-index: 1;

}

 

any idea ? thx for help !

 

PS : i see we can add 'all' like this addCSS($this->_path.'css/template.css', 'all')

there is other option than all ?

Edited April 15, 2015 by almeidaz (see edit history)

[Tuni-Soft]

The simple solution is to differentiate the blocks by ID or by a unique class names

 

You need to wrap the template content in divs like this

<div id="hook1" > template1 content </div>

<div id="hook2" > template2 content </div>

 

#hook1 .aus {...}

#hook2 .aus {...}

Edited April 15, 2015 by Tuni-Soft (see edit history)

[almeidaz]

Thanks for reply.

 

 

But if i do that , i will show both div no ?

 

you mean my modulefront.tpl gonna look like this :

 

<div id="hook1" > template1 content </div>

<div id="hook2" > template2 content </div>

 

then both div will appear (with their own CSS in this case)

 

 

 

I forgot to tell they have the same .tpl in my first post (i' ve updated my 1st post with .tpl call line and the code in modulefront.tpl)

 

i think i will change return $this->display(__FILE__, 'views/templates/front/modulefront.tpl'); in each function

 

with their own .tpl and in each i will put the div class i want.

 

1 CSS with 3 class + 3 files tpl (one for each hook)

 

.aus{...}

.aus1{...}

.aus2{...}

 

1st tpl modulefront.tpl

<div class="aus">template content </div>

 

2nd tpl modulefront1.tpl

<div class="aus1">template content</div>

 

3rd tpl modulefront2.tpl

<div class="aus2">template content</div>

 

Finally,

in this solution i need to create 3tpl files

in the First solution i had created 3CSS files.

 

What do you think about this solution ? In fact i'm still looking for solution with 3CSS files and 1tpl.

Edited April 15, 2015 by almeidaz (see edit history)