[Solved] Theming on 1.4.2 - Dynamic css file inclusion

[uddhava]

I was theming and found this gem in the code (header.tpl) of the default theme of PS 1.4.2:

{if isset($css_files)}
   {foreach from=$css_files key=css_uri item=media}
   <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
   {/foreach}
{/if}

does anybody know how or where the $css_uri variable gets defined?
I want to add my own css and i dont want to use the simple way of just including it with a static link

[uddhava]

I just discovered the Find in Files function of Notepad++ :wow: Thanks for that.
Ok so almost every module injects its own css file. The header.tpl counts now 24 css that get included. That must severely affect performance imho. So thats why the Minify css functions are introduced i guess.

But more to the point, i was looking for the code that decides which css should be included. It does not include all the css files in the /theme/css folder and also not all the /css/modules/*.css files. I already figured out that whenever a block (module) is hooked and displayed, the appropriate css file will be included. There is a the addCSS method, but i cannot figure out where in this code gets decided what css to include.

The global.css is always included (make sense), but where it the logic that decide this ?

[uddhava]

Its clear that each module performs an addCss(). That means that hooks are executed before the header.tpl is executed, because the $css_files variable or array has to be defined beforehand. After that the header.tpl executes and loads all the css files.

In the mean time i found the code that includes the global.css and some more js files. So in case you need to include your own css files you can either choose to override the FrontController class and setMedia() method, include them in the header.tpl or put everything in a custom module. Your choice.

Here is the code where the global.css gets included - FrontController.php from line 427 (PS .1.4.2.0)

public function setMedia()
   {
       global $cookie;

       Tools::addCSS(_THEME_CSS_DIR_.'global.css', 'all');
       Tools::addJS(array(_PS_JS_DIR_.'tools.js', _PS_JS_DIR_.'jquery/jquery-1.4.4.min.js', _PS_JS_DIR_.'jquery/jquery.easing.1.3.js'));
       if (Tools::isSubmit('live_edit') AND $ad = Tools::getValue('ad') AND (Tools::getValue('liveToken') == sha1(Tools::getValue('ad')._COOKIE_KEY_)))
       {
           Tools::addJS(array(
                           _PS_JS_DIR_.'jquery/jquery-ui-1.8.10.custom.min.js',
                           _PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js',
                           _PS_JS_DIR_.'hookLiveEdit.js')
                           );
           Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
       }
   }

to add your own css in the header.tpl i suggest to use this code :

<link href="{$css_dir}YOURCSSFILE.css" rel="stylesheet" type="text/css" media="all" />