Jump to content

CSS in specific hook


almeidaz
 Share

Recommended Posts

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 by almeidaz (see edit history)

Share this post


Link to post
Share on other sites

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 by Tuni-Soft (see edit history)

Share this post


Link to post
Share on other sites

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 by almeidaz (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

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