Problem getting css-style added in the edit dropdown

Emil Cardell
Member since: 2004
 

I'v spent to much time trying go get custom formats in the editor in edit mode.

I'm using Episerver CMS 5 R2

Steps that have been taken:

1. Created a stylesheet file /Templ/Templates/Styles
2. Added a reference in webconfig setting the  attribute uiEditorCssPaths="/Editor.cssates/Styles/Editor.css"

3. The stylesheet file contains this:

h2 { EditMenuName: Head1; }
h3 { EditMenuName: Head2; } 

And still the dropdown is only containing "Remove Formating". If I go to the file via the adressbar i can se the style.

 

Any thoughts?

 

#25938 Nov 13, 2008 11:04
  •  

    Hi Emil!

    Do you have a dynamic property on the pages saying anything about uiEditorCssPaths?

    There are two ways to set the uiEditorCssPath, either in web.config, by settings available in admin mode, or the other way is by having a property on the page (not necessarily dynamic). If the page has a property that is set to some css file the setting in web.config will not be read. This is because different parts of a site not necessarily uses the same CSS and you need a way to specify individual editor css files for different parts of the site.

    In the public content site that comes with EPiServer we have a dynamic property on the page, which if it's set will override the setting in web.config, maybe yours has too.

    The only other reason I can think of is that your css file couldn't be found. The uiEditorCssPaths you specify above looks strange but I guess it's a typo...?

    /Regards
    Henrik

    #25961 Nov 13, 2008 21:02
  •  

    hi,

    I'm experiencing the exact same problem, has anyone found the problem causing this? I have pointed out the editor.css file like this: uiEditorCssPaths="/util/styles/editor.css". And I have the following css ineditor.css:

    a{
    text-decoration:none;
    color:#002d56;
    font-weight:bold;
    background-color:#f0f;
    EditMenuName:Link;
    }

    a.red{
    EditMenuName:RedLink;
    text-decoration:none;
    color:#002d56;
    font-weight:bold;
    background-color:#f00;
    }

    I Still only have "remove formatting" option in the drop down in the edit menu. I believe I have configured everything right because the style on the links in the edit menu follow the above generall css rule.

     

    Regards
    Niklas

     

    #28044 Feb 18, 2009 10:27
  • henningson
    Member since: 2006
     
    The editor css is usually cached quite hard. I'm not sure by what, but it helps to rename the editor css file.
    #28502 Mar 12, 2009 10:46
  • Per Nergård
    Member since: 2007
     

    I've also noted this. The only thing that hepls is to empty the browser cache. This must be done each time you do a change.

     Per N

    #28506 Mar 12, 2009 12:00
  • Eric
    Member since: 2007
     

    CSS-files are stored local by the browser so when making changes to these files you always have to, rename or make sure you empty you cache in your browser. This could be done by right-click in the gray area when you are inside the editor mode or by the complete clear chache functionality in you browser.

    Also make sure your css-file actually are beeing used inside episerver cms.

    /eric

    #34023 Oct 26, 2009 11:22
  • Daniel Pålsson
    Member since: 2008
     

    I'm also having the same problem.  Using CMS5 R2.

    The path to the file in web.config is correct, no global properties overriding. Has emptyed the browser cache several time but still the same dropdowns with the fonts I have on my computer. No css classes!

    What to do????

    #34342 Nov 03, 2009 13:39
  • Eric
    Member since: 2007
     

    Have you have a had a look at these blogpost?

    http://labs.episerver.com/en/Blogs/Per/Archive/2009/3/Files-being-cached-too-aggressively-in-R2/

    http://labs.episerver.com/en/Blogs/Per/Archive/2009/3/Configuring-cache-expiration-on-IIS-7/

    Have a look at them and see if they can fix your issue as well?

    Also try to add the css-style to a <h1>-tag instead of a <a>-tag im not sure if you can put a editmenuname on a <a>-tag

    /Eric

    #34345 Nov 03, 2009 13:54
  • Daniel Pålsson
    Member since: 2008
     

    Tried it all but still no change:

    Editor.css:

    h1 { padding: 0px; margin: 0px; EditMenuName: Header 1; }   
    h2 { padding: 0px; margin: 0px; EditMenuName: Header 2; }   
    h3 { padding: 0px; margin: 0px; EditMenuName: Header 3; }   
    h4 { padding: 0px; margin: 0px; EditMenuName: Header 4; }   
    h5 { padding: 0px; margin: 0px; EditMenuName: Header 5; }
    #34346 Nov 03, 2009 14:26
  • Eric
    Member since: 2007
     

    ok i would say you are missing you editor.css file and why i dont know. but you can have a look in the code for the editor by using ie developer tools or firebug. You should see a ifram where the editor is and it should look something like this:

    <iframe name="....egion_PC_50_1_EditForm_MainBody_MainBody_Editor" src="/util/editor/emptyeditor.aspx?uieditorcsspaths=%2ftemplates%2fstyles%2feditor.css" style="width: 100%; height: 100%;" designMode="on">

    you should have a src set to your stylesheet if this is missing episerver cant find the css.

    #34348 Edited, Nov 03, 2009 15:58
  • Daniel Pålsson
    Member since: 2008
     

    I put the css-file directly in the root to see if that worked but no.

    The src is this: /util/editor/emptyeditor.aspx?uieditorcsspaths=%2fEditor.css

    #34349 Nov 03, 2009 16:03
  • Eric
    Member since: 2007
     

    hmm have no clue but i should try to install a new site with our demopackages and see if that site have the css-files. I have tried to make any possible changes to the public package but i cant reproduce your error..

    Do you know if you are able to browse the css-file from ie?

    #34350 Nov 03, 2009 16:31
  • Daniel Pålsson
    Member since: 2008
     

    Yes I can browse to it.

    #34351 Nov 03, 2009 16:34
  • Daniel Pålsson
    Member since: 2008
     

    Ok, I found it. I had the "Remove Formating" unchecked under the plug-in manager. Can't remember why I had it uncheck, if it was bacause it didn't work with it checked in SP1 with tinymce integration to make epi work in FireFox or because I have an editor field on a public page.

    However now I have the following issue: On the public page where I have the editor the dropdown with the css-items gets filled twice, and there is an empty dropdown to the right, this dropdown doesn't appear in edit mode.

     

    #34358 Edited, Nov 04, 2009 9:12