How to load CSS-file when creating a simple property editor?

Marcus Andersson

Vote:

Hi,

I'm trying to learn more about creating simple custom editors for properties.

The question I have is this:
- How do I load a CSS-file when creating a simple property editor?
As you can see below (in 'TestEditorDescriptor.js') I have a span with a class, 'myClass'. I want to define 'myClass' in a CSS-file and load it along with my code.

This is what I have so far (nothing fancy since I'm trying to learn):

TestEditorDescriptor.cs

namespace EPiServer.Templates.Alloy.Business.EditorDescriptors
{
   [EditorDescriptorRegistration(TargetType = typeof(String),
                                  UIHint = "TestHint")]
   public class TestEditorDescriptor : EditorDescriptor
   {
       public TestEditorDescriptor()
       {
           ClientEditingClass = "alloy.Test.TestEditorDescriptor";
       }
   }
}

TestEditorDescriptor.js

define([
    "dojo/_base/declare",

   "dijit/_CssStateMixin",
    "dijit/_Widget",
    "dijit/_TemplatedMixin"
],
function (
    declare,

   _CssStateMixin,
    _Widget,
    _TemplatedMixin
) {
   return declare("alloy.Test.TestEditorDescriptor", [_Widget, _TemplatedMixin, _CssStateMixin],
       {
           templateString: "<div class=\"dijitInline\"><span class=\"myClass\">Test</span></div>"
        }
   );
});

module.config

<?xml version="1.0" encoding="utf-8"?>
<module>
    <assemblies>
        
        <add assembly="EPiServer.Templates.Alloy" />
    </assemblies>

    <dojoModules>
        
        <add name="alloy" path="Scripts" />
    </dojoModules>
</module>

#80587

Jan 27, 2014 12:03

Jonas Peterson

Vote:

Maybe this is not what you want, but this is how we solved it in a few projects:

_loadCssFile: function () {
                var $ = document; 
                var cssId = 'DocumentList';  
                if (!$.getElementById(cssId)) {
                    var head = $.getElementsByTagName('head')[0];
                    var link = $.createElement('link');
                    link.id = cssId;
                    link.rel = 'stylesheet';
                    link.type = 'text/css';
                    link.href = '/ClientResources/Scripts/Editors/themes/DocumentList.css';
                    link.media = 'all';
                    head.appendChild(link);
                }
            },

And then you could just call the function in your postCreate

#81369

Feb 15, 2014 14:06

Marcus Andersson

Vote:

Thank you, Jonas!

I used this along some code for a JS ColorPicker and it worked.

#81377

Feb 16, 2014 15:40

Dmytro Duk

Vote:

It should be possible to define client resources in your module.config and configure to load it automatically.

Something like this:

<?xml version="1.0" encoding="utf-8" ?>
<module loadFromBin="false">
  <assemblies>
    <add assembly="EPiServer.Templates.Alloy" />
  </assemblies>

  <dojoModules>
        <!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
        <add name="alloy" path="Scripts" />
  </dojoModules>

  <clientResources>
    <add name="foo.propertyStyles" path="PathToCssFiles/Styles.css" resourceType="Style"/>
  </clientResources>

  <clientModule>
    <requiredResources>
      <add name="foo.propertyStyles" />
    </requiredResources>
  </clientModule>

</module>

The path value is a partial path to the css file in your module directory. In this case we edit module.config of Alloy Templates which is the default module on website, so path can be specified from the site root.

#81431

Edited, Feb 17, 2014 12:24

Magnus Wallin

Vote:

The above configuration works perfectly, we have been using this techinque to slightly change the edit mode.

However, not all parts of EPiServer editmode if affected. Some parts are still "old" legacy style. And are usually "shoehorned" into the editormode with iframes and such.

Is there some namespace that can be used to simply inject scripts and styles into these old styles pages without building hidden plugin and extending/overriding CMS6-style?

(sorry for thread hijacking)

#81645

Edited, Feb 21, 2014 13:36

Try our conversational search powered by Generative AI!

How to load CSS-file when creating a simple property editor?