For the everyday user who just wants to update the content, they're not going to have a clue how to add a class, or for that matter, what a class even is.
And of course you could always tell them to just go into the "html" section in the editor and add a class of "button" or "large" or whatever it may be, but chances are they're going to forget and mess things up. And the whole point of having a powerful cms like DNN is to make things easier for the every-day average Joe, so explaining how to do these more advanced things is just counter-productive. You might as well just forget about DNN all together.
And this is where the editor.css comes in.
A little extra time on the developer's part, but a huge time saver and stress-reliever for your clients, the editor.css is going to allow your "I have no idea what technology is, grandma" the ability to come in and make cool stuff appear, like buttons.
This is what normal text looks like, but by using the "Apply CSS" in the dropdown, we can turn text into cool things like this:
Make this text turn into an accent color
Make this text larger
Turn This Link Into a Button
That might not look like much, but it was all done just by selecting text in the editor and choosing a style from a dropdown menu — No coding involved!
How Do I Do This?
If you're editor.css has been made, go to edit your text/html module as normal.
Highlight or type in whatever word/words you want to change, then click on the "Apply CSS" drop down and choose the desired style.
That's It! Just hit "update" and you're done.
Note: if you want to edit something that is a link, it's best to create the link first, then choose the desired css from the drop down.
Important Info For Developers
A couple of things to get you started on the editor.css
You'll need to create an editor.css and put it in the root folder of your site.
Once you've done this, you'll take all your css that you want the client to have as option for the editor, things like p tags, h tags, ect. and any classes or ids you have that allow for things like buttons, different font-sizes, styles, and colors and paste those into the editor.css — That's pretty much it.
One important thing to note is if you have elements that require multiple classes or ids, such as .Button.Large { css stuff here }, you'll have to turn that into one class. (selecting multiple classes from the drop down in the text/html module doesn't really work) So in your css you'll need to make a new class that combines those two classes.
Example:
Original Css
.Button { background: #fff; border: 1px solid #646464; }
.Large { font-size: 2em; }
Make a new class that combines these two classes
.Button-Large { background: #fff; border: 1px solid #646464; font-size: 2em; }
You'll want to make sure that you have this new class in both your main css where you're defining everything and in your editor.css
Now when the client wants to add a button, they'll just highlight what they want to turn into a button and select "Button-Large". And Boom! There's a button!
It does cause a tiny bit of extra code that is redundant, but for the sake of you and the client, it's going to save a lot of time on both ends. So if you know ahead of time you're going to be making an editor.css, it would be best to avoid having elements with multiple classes that you want the client to be able to choose from to avoid redundancy.
Be sure and stay tuned in for more tips and tricks for administrators and best practices for inputting content.
If you'd like more info on the editor.css or would like to get it set-up on your current dotnetnuke site, give us a call or contact us today to get going.