Forums / Developer / Use specific Css in an extension

Use specific Css in an extension

Author Message

Patrice DUCLAUD

Wednesday 13 December 2006 6:25:44 am

Hi all,

In an extension, i need to define a css file, but i don't know how to make this css file used by my template. (ezpublish 3.8.11 - php 4.3)

my css file is located here :
extension/MyExtension/design/standard/stylesheets/MyExtension/MyCss.css

my design.append.ini.php file in extension/MyExtension/settings/ contains
...
[Stylesheetsettings]
MyExtension=extension/MyExtension/design/standard/stylesheets/MyExtension/MyCss.css
...

i've cleared the cache
but my design don't use MyCss.css

I'm sure i do something wrong ;-( but what ?

Thanks for help

Patrice

Claudia Kosny

Wednesday 13 December 2006 1:44:31 pm

Hi Patrice

I have never tried it, but shouldn't this be:

[ExtensionSettings]
DesignExtensions[]=MyExtension

[StylesheetSettings]
CSSFileList[]=stylesheets/MyExtension/MyCss.css

And your pagelayout.tpl needs to have something like this in the <style> part to get the above working:

{section var=css_file loop=ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' )}
    @import url({concat( 'stylesheets/',$css_file )|ezdesign});
{/section}

The problem with this is that it will load all CSS files for all active extensions.

Again, I have never tried it, so no guarantees...

Claudia

Patrice DUCLAUD

Thursday 14 December 2006 3:09:56 am

Hi Claudia,

Thanks for your reply, i've done something which works fine, but need certainly to be improved.

i've created :
<b>a css file</b> called MyModule.css located in /extension/MyModule/design/standard/stylesheets/MyModule/

<b>an ini file</b> located in /extension/MyModule/settings/MyModule.ini
with this code

[StylesheetsSettings]
CSSFile=/extension/MyModule/design/standard/stylesheets/MyModule/MyModule.css

<b>a function in MyModule.php </b> located /extension/MyModule/modules/MyModule/class/ in a php class MyModule

MyModule.php contains the class and function of my module.

function MyModuleInit ( $Section, $Var) {
  $Value=array();
  $MyModuleINI =& eZINI::instance( 'MyModule.ini');
  $Value['Value']=$MyModuleINI->Variable($Section, $Var);
  return array( 'result' => $Value);
}

This function read MyModule.ini and returns $Value corresponding to parameters $Section and $Var. (yes, yes ... it's seems to be an eZini look like ;-) )

In MyPageLayout.tpl

i've just do , between <head>..</head>:

{if ne($ui_component,'content')}   
  def $Css=fetch( $ui_component, concat($ui_component,'INI',
                        hash( 'Section', 'StylesheetsSettings', 
                                 'Var', 'CSSFile'))}
  <style type="text/css">
    {foreach $Css as $css}
       @import url("{$css}");
    {/foreach}
    {undef $Css}
  </style>
{/if}

The use of $ui_componnent allow me to look for css only if i access MyModule, or a Module which contain a function called ModuleINI ... $ui_component in my case = MyModule otherwise 'content' which is the default ezpublish acces content ... !
<i>
I use only one css file in my module MyModule.
All the Name used in code and file must be MyModule.
In MyModule.ini, you must use StylesheetsSettings and CSSFile
and this work could be certainly used with another Module
</i>

In MyPageLayout.tpl i can see

<style type="text/css">  
@import url("/extension/MyModule/design/standard/stylesheets/MyModule/MyModule.css");
</style>

i hope i'm clear enough (sorry for my english) and thanks for your comments.

Patrice

Claudia Kosny

Thursday 14 December 2006 9:51:37 am

Hi Patrice

The way I understand it the problem is the path of the css file as the html code to include it looks fine otherwise. Unfortunately I don't know an easy and safe way to create a valid path out of the path you have. The usual suspects ezurl() and ezroot() will not work, because your css file is not a view of a module (which is ok, it shouldn't be).
ezdesign() works only if you tell ez that your extension contains a design directory by setting this in the design.ini.append.php of your extension. This would be the easiest way, but I don't know whether this is an option for you as this would mean that template overrides in this directory would override other templates no matter the ui_component (I believe).

I haven't worked with ui_component yet, so I don't know what is possible there or not. Sorry, but itr looks like I can't help you.

Good luck

Claudia

Pascal Specht

Friday 22 June 2007 7:33:35 am

Hello,

I had a similar problem (using eZ Publish 3.9.2), the CSS never really wanted to show up...

In my case, the UNIX files on the server had been created remotely through SVN update, and had a wrong file permission. Doing a chmod -R a+x myextension solved the problem.

-Pascal