Tridion 2011 GUI Extension, how to include css file?

3
votes

I've been building a JavaScript and CSS only GUI extension.

I followed the instructions in Albert's post here: http://albertromkes.com/2012/01/30/tridion-gui-extensions-how-to-load-a-javascript-without-showing-a-gui-element/

The JavaScript loads in OK but I can't get the CSS included, am I missing something?

Here's an approximation of my configuration file:

<?xml version="1.0" ?> 
<Configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge"
      xmlns:cfg="http://www.sdltridion.com/2009/GUI/Configuration"
      xmlns:ext="http://www.sdltridion.com/2009/GUI/extensions"
      xmlns:cmenu="http://www.sdltridion.com/2009/GUI/extensions/ContextMenu">
  <resources cache="true">
    <cfg:filters/>
    <cfg:groups>
      <cfg:group name="Rob.Prototype.Extensions"
       merger="Tridion.Web.UI.Core.Configuration.Resources.CommandGroupProcessor" 
       merge="always">
        <cfg:domainmodel name="Rob.Prototype.Extensions.Domain">
          <cfg:fileset>
            <cfg:file type="script">/Scripts/script1.js</cfg:file>
            <cfg:file type="script">/Scripts/script2.js</cfg:file>
            <cfg:file type="style">/CSS/styles.css</cfg:file>
          </cfg:fileset>
          <cfg:services/>
        </cfg:domainmodel>
      </cfg:group>
    </cfg:groups>
  </resources>
  <definitionfiles/>
  <extensions>
    <ext:editorextensions/>
    <ext:dataextenders/>
  </extensions>
  <commands/>
  <contextmenus/>
  <localization/>
  <settings>
    <defaultpage>/Views/Default.aspx</defaultpage>
    <navigatorurl>/Views/Default.aspx</navigatorurl>
    <editurls/>
    <listdefinitions/>
    <itemicons/>
    <theme>
      <path>/CSS/</path>
    </theme>
    <customconfiguration/>
  </settings>
</Configuration>
4
tridion
Hey Rob, I see that you accepted my answer. Does that mean that it was indeed a matter of putting your CSS in a separate (non-domainmodel) group? If that is the case, I'll update my answer to say that a bit more explicitly, since likely others will encounter this problem too. - Frank van Puffelen

4 Answers

4
votes

The domain model is supposed contain non-visual things only, so Tridion only processes non-visual file types. You should not include CSS files in a domainmodel, but instead put them in a separate fileset outside of any domainmodel.

This requires that you have a GUI element that uses the group that your CSS is in. If you weren't planning to add any GUI elements, you could add a dummy ribbon button to links to the CSS.

2
votes

I don't have the answer Rob but the following blog post from @poeticGeek may help you out.

Setting up a Tridion 2011 GUI extension in 8 steps

2
votes

This might help you

How does the Tridion GUI Extensions CommandSet map to js methods?

The same should apply to CSS as for JS.

If that doesn't work, have you tried incrementing the modification attribute in System.config stored at C:\Program Files (x86)\Tridion\web\WebUI\WebRoot\Configuration

2
votes

Here is the config from an extension I wrote that 'injected' javascript into the publish dialog view, maybe worth giving it a shot to see if it also includes any css:

<?xml version="1.0"?>
<Configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge" xmlns:cfg="http://www.sdltridion.com/2009/GUI/Configuration" xmlns:ext="http://www.sdltridion.com/2009/GUI/extensions" xmlns:cmenu="http://www.sdltridion.com/2009/GUI/extensions/ContextMenu">
  <resources cache="true">
    <cfg:extensiongroups>
      <cfg:extensiongroup name="Company.Extensions.Group">
        <cfg:extension target="Tridion.Web.UI.Editors.CME.Views.Popups.Publish">
          <cfg:insertafter>Company.Extensions.Resources</cfg:insertafter>
        </cfg:extension>
      </cfg:extensiongroup>
    </cfg:extensiongroups>
    <cfg:groups>
      <cfg:group name="Company.Extensions.Resources">
        <cfg:fileset>
          <cfg:file type="script">/js/SelectRollbackFailure.js</cfg:file>
          <cfg:file type="script">/js/NoPublishItemWarning.js</cfg:file>          
        </cfg:fileset>
      </cfg:group>
    </cfg:groups>
    </resources>
    <definitionfiles/>
  <extensions>
    <ext:dataextenders/>
    <ext:editorextensions />
  </extensions> 
    <commands />
    <contextmenus/>
  <localization></localization>
    <settings>
        <defaultpage />
        <navigatorurl />
        <editurls/>
        <listdefinitions/>
        <itemicons/>
    <theme>
      <path></path>
      <resourcegroup />
    </theme>     
    <resourceextensions>
      <resourceextension>Company.Extensions.Group</resourceextension>
    </resourceextensions>
    <customconfiguration></customconfiguration>
  </settings> 
</Configuration>

You'll need to change this part:

<cfg:extension target="Tridion.Web.UI.Editors.CME.Views.Popups.Publish">

To where you'd like the items to be included. If it's not quite right, or you need an explanation let me know.

p.s I also suspect some empty nodes can be stripped out :)