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

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>
        <!-- This adds the Alloy template assembly to the "default module" -->
        <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>
</module>

#80587
Jan 27, 2014 12:03
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
Vote:
 

Thank you, Jonas!

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

#81377
Feb 16, 2014 15:40
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
Vote:
 

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

<clientResources>
<add name="epi.shell.ui" path="~/css/ui-improvements.css" resourceType="Style" />
</clientResources>

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
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.