Skip to content

3 Easy Steps to Adding Your Own Custom CSS Style Classes to DNN 7 Content Editor Dropdown List

by on December 24, 2012

DotNetNuke 7.0 HTML Editor Customization

So you want to put your own styles into the DotNetNuke.RadEditorProvider, like you could in the FCKEditor? Guess what, you can!

Unfortunately, it still does not appear to be content aware, showing the entire list of styles at all times, but it’s something!

Step 1: Check or set your style sheet specification

In the Toolbar, go to Host > Advanced Settings left tab (two gears) > HTML Editor Manager

image

Click on the “Default Configuration” item in the tree:

image

Scroll down to CSS File and you will see “editor.css” specified. If you hover over the (i) info button, you will see the below in the popup:

The css file to be used by the editor in wysiwyg mode. This file must reside either in the skin directory or in the website directory. The path set here is relative to its parent (e.g. /editor.css is a file in the root of your skin)

Note: there are a number of other editor formatting options you can set, such as rendering new lines as breaks instead of paragraphs, standard format stripping, available edit modes, content editor design (border width, height, etc.), and even language. You can also specify the defaults for insert buttons such as the image manager and document manager and their allowed/associated files.

image

Step 2: Create your css for your portal or skin

Create a editor.css file in the portal root (or skin root, theoretically) and put in any classes you want to appear. If they are already styled, you do not have to style them, but this can make it easier for the user to select the right one. It really irritates me that you cannot dynamically pull in the skin styles to make it easier to work in the editor and see final output – I am not sure if that is entirely possible in this editor.

Although you could link to your skin.css (again, theoretically, as I was unable to reproduce), this may pull in a large amount of junk code and styles that could confuse the end user.

 image

Step 3: Use your custom styles

Edit an HTML module, and your styles should now appear!

It may be a good idea to set ul.mystyle or p.mystyle so the user can tell what the style was designed for – the css style actually appears as a tooltip!

image

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: