CODEWITHSUNDEEP
cssprestashop
Manikandan
Manikandan

Reputation: 1816

How to add css to modules in prestashop 1.5?

I am developing one module in prestashop 1.5 . i need to give some designs(css) when my module is accessed by the admin in admin panel.I am new to prestashop.. can anyone help me..

Upvotes: 1

Views: 9002

Answers (3)

Luca Reghellin
Luca Reghellin

Reputation: 8101

I've found a better way. There's a more specific hook for this: displayBackOfficeHeader. That ensure your context will be only back office and never front office. Also, to be sure it will work only in specific circumstances (for example only in the configure page), you can check the url vars. So, first, in install() add the register function (and be sure to reset the module so the hook will work):

$this->registerHook('displayBackOfficeHeader');

Also add the unregister code in uninstall():

$this->unregisterHook('displayBackOfficeHeader');

Then add the relative function. In this example I'm checking if I'm in the configure page (imagebanner is the name of the module):

    public function hookDisplayBackOfficeHeader($params){

       if(!(Tools::getValue('controller') == 'AdminModules' && Tools::getValue('configure') == 'imagebanner')){
          return;
       }

       $this->context->controller->addCSS($this->_path.'back-office.css', 'all');
    }

Also, take a look to the docs. Hope it helps!

[EDIT]

I've just found that the code above adds the files at the beginning of the stack, not at the end. That means, for example, BEFORE jquery. It seems there's no way to control the injection order. Anyway, for now, I've found a simple solution: return directly the html code:

public function hookDisplayBackOfficeHeader($params){

    if(!(Tools::getValue('controller') == 'AdminModules' && Tools::getValue('configure') == 'homebanners')){
        return;
    }

    $html = '';
    $html .= '<link href="'.$this->_path.'back-office.css" rel="stylesheet" type="text/css" media="all" />';
    $html .= '<script src="'.$this->_path.'back-office.js" type="text/javascript" ></script>';

    return $html;
}

It works because if you take a look to the admin header.tpl, you see that that Hook is in fact placed AFTER the js/css incusion code. So it just works. The addCSS/JS methods instead, work independently, and do not take into account the hook position at all.

Upvotes: 2

Mike Castro Demaria
Mike Castro Demaria

Reputation: 710

Simply add in hookHeader :

$this->context->controller->addCSS($this->_path.'style.css', 'all');

I hope this help, Mike

Upvotes: 3

james tan
james tan

Reputation: 51

im facing the same issue too... i think the only way is to hack into [path-to-project]/[admin-path]/themes/default/template/helper/form/form.tpl

and add in block {block name="before"}{/block}

and add this block into your form.tpl into your controller template: [path-to-project]/[admin-path]/themes/default/template/controllers/[yourcontrollername]/helpers/form/form.tpl

{block name="before"}
<style>
/* your style here */
</style>
{/block}

for more information, you may refer my blog post here: http://mercstudio-tech.blogspot.com/2013/05/prestashop-form-field-type.html

Upvotes: 1

Related Questions