CODEWITHSUNDEEP
imagesitecore
Jay
Jay

Reputation: 1201

Sitecore Image CSS in Properties

I'd like to add new CSS class lists into "Apply Class" droplist in Image Properties dialog. I can customize CSS and update EditorPage.aspx to add new classes and it is perfectly working, but not in Image Properties dialog.

Below is current my setting in EditorPage.aspx and I set "TableLayoutCssFile" for table layout. Is there another attribute name for Image CSS? or Is there another place only for Image Properties??

<telerik:RadEditor ID="RadEditor1" runat="server"
    CssClass="scRadEditor"
    Width="100%"
    ContentFilters="DefaultFilters"
    DialogsCssFile="/sitecore/shell/themes/standard/default/Content Manager.css"
    StripFormattingOptions="MSWordRemoveAll,ConvertWordLists"
    StripFormattingOnPaste="All"
    LocalizationPath="~/sitecore/shell/controls/rich text editor/Localization/"
    Skin="Metro"
    ToolsFile="~/sitecore/shell/Controls/Rich Text Editor/ToolsFile.xml"
    ImageManager-UploadPaths="/media library"
    ImageManager-DeletePaths="/media library"
    ImageManager-ViewPaths="/media library"
    FlashManager-UploadPaths="/media library"
    FlashManager-DeletePaths="/media library"
    FlashManager-ViewPaths="/media library"
    MediaManager-UploadPaths="/media library"
    MediaManager-DeletePaths="/media library"
    MediaManager-ViewPaths="/media library"
    DocumentManager-ViewPaths="/media library"
    TemplateManager-UploadPaths="/media library"
    TemplateManager-DeletePaths="/media library"
    TemplateManager-ViewPaths="/media library"
    ThumbSuffix="thumb"
    OnClientCommandExecuted="OnClientCommandExecuted"
    OnClientLoad="OnClientLoad"
    OnClientSelectionChange="OnClientSelectionChange"
    OnClientInit="OnClientInit"
    OnClientModeChange="OnClientModeChange"
    OnClientPasteHtml="OnClientPasteHtml"
    TableLayoutCssFile="~/layouts/styles/modules/Telerik-table-themes.css" />

screen

Upvotes: 2

Views: 863

Answers (1)

Anton
Anton

Reputation: 9961

Sitecore Rich Text Editor is based on Telerik editor. And to find something about its configuration you should look how Telerik editor should be configured and repeat it in Sitecore.

When you go to Sitecore showconfig.aspx page and look for WebStylesheet setting you see that it equals to "/default.css". (It can differs after customization). It is default stylesheet configuration for Telerik Editor. Telerik reads styles configuration there. If you change your default editor profile in Sitecore you can see "Apply CSS Classes" dropdown. It is populated from your "/default.css" file. Even more you can set up names for your CSS classes in "\sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml" file.

I suppose that this method should be propagated to Image Properties dialog, but it doesn't. I event looked at dialog code and found that it should be populated:

this._cssClasses = clientParameters.CssClasses != null ? clientParameters.CssClasses : [];

But I still get empty dropdown...

However on Telerik example everything works(but version is different, and ToolsFile.xml differs from the one that is used). And there is nothing in references about this dialog...

So, you have few options:

  • Make deep dive to Telerik Editor to find out how CSS Classes are transfered to dialog.
  • Use Apply CSS Classes dropdown for setting styles to images.(It works for me)
  • Embed your custom scripts that will fill this dropdown(not recommended).

Upvotes: 1

Related Questions