Newsletter

Subscribe to our mailing list

August 24, 2014
Editor.css: Giving You & Your Clients Less Headaches

Editor.css: Giving You & Your Clients Less Headaches


As web designers and developers, we love to spice content up and give that extra touch of design to really make it stand out. And sure, that's pretty easy for us to do. We can make custom classes and ids for things like buttons, different font-styles, colors, and so on. Once we've defined everything, then we just open the text/html module and add all those classes to make things pop.

But there can be a huge problem with that.

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.

Read our next post...

Marketing 5 “Must Do” Items to Enhance Your Marketing

Marketing Retargeting: Never Lose Sight Of Your Website Visitor

Web Dev Quality Websites Need Quality Typography

Marketing Web Development Meets Web Analytics: The Knowledge Gap

Web Dev Responsive Design: It's More Than Just Design

Marketing Economic Summit 2017

Marketing Mary Meeker's Global Interent Trends

Marketing, Web Dev A/B Testing: Getting the Most out of Your Site

Marketing, Web Dev Upping the Ante: Interactive Content

Marketing, Web Dev Google’s SEO Best Practices: A Starter Guide

Marketing Creating Timeless Content to Boost SEO

Marketing, Web Dev 2017 Research Recognizes 10 Pound Gorilla as a Leader in SEO

Marketing, Web Dev Designing an Elegant Website using Whitespace

Marketing, Web Dev Test Your Website’s Success Using Heat Maps

Marketing Start Fresh, & Advertise with Facebook!

DNN, Marketing, Web Dev 2017 DNN Summit Sessions

Marketing, Web Dev Web Design: The Past, The Present, & The Future

Marketing, Web Dev Intrusive Pop-Ups to be Penalized by Google

Marketing The New Wave of Advertising: Native Ads

DNN, Web Dev Proud Sponsor of DNN Summit 2017

Marketing Moving to Mobile

Marketing, Video Power of Video

DNN If you’re a DNN user, your site could be vulnerable to hackers

Marketing, Video The Art of Retargeting: How it works and Why You Should Retarget

DNN, Marketing, Web Dev 10 Pound Gorilla Named Top Ten Denver Web Development and Digital Marketing Agency by Clutch.co

Marketing 10 Tips to Design Your Website for Lead Generation

DNN, Marketing, Modules, Web Dev DNNCON: Thank You!

Marketing 10 Ways to Incorporate Direct Response Marketing with Print Media

DNN, Marketing, Web Dev 10 Pound Gorilla... One of Denver's Top 10 Digital Marketing Agencies

Marketing How to Turn Social Media Fans Into New Customers

Marketing Your Facebook Likes No Longer Matter!

Web Dev Is Google Going to Penalize Non-Mobile-Friendly Websites?

DNN DNNCON: Thank You!

DNN, Modules, Web Dev From Ordinary To Extraordinary

DNN, Marketing, Modules How to Sell, Quote or Budget for a DNN E-commerce Website

Web Dev Getting Users to "Respond" to Your Mobile Menu Designs

DNN, Web Dev DNNCON: Editor.css

Marketing Getting The Conversion

Marketing Tips for Writing Effective Newsletters

Marketing Why Should You Have a Newsletter?

Marketing Writing Copy That Will Actually Be Read

DNN Editor.css: Giving You & Your Clients Less Headaches

DNN, Web Dev Connall Cosmetic Surgery: Case Study

Web Dev Making the Case for a Responsive Site

DNN, Modules, Web Dev March Module Madness: Dynamic Forms

DNN, Modules, Web Dev March Module Madness: Ventrian News Articles

DNN, Modules, Web Dev March Module Madness: Form & List

Marketing 5 Tips to Online Marketing

Marketing How the Name "10 Pound Gorilla" Came to Be

Marketing Creative Online Marketing: Groupon & Living Social

Marketing Promoting Your Business With Instagram

Marketing Using Your Blog to Boost SEO

Marketing Suprising Social Media Facts & What You Should Do

DNN, Web Dev DNN Con 2013: Mobile Navigation

DNN, Web Dev DNN Con 2013: Determining What Makes the Mobile Cut

DNN, Modules, Web Dev DNN Con 2013: DDR And JQuery. More Than Just Hover And Drop Down.

Web Dev A Mobile-First Approach to the Web

DNN Southern Fried DNN: Best of both worlds: Great Design and Flexibility

DNN Southern Fried DNN: Different skin designs from just one skin file

Web Dev The Future of the Web: HTML5

DNN Dot Net Nuke World 2012 Speakers & Sponsors

Marketing Google Places is now Google+ Local

DNN, Marketing Day of DNN - Using DNN to Feed Data to Several Social Portals

DNN, Marketing Day of DNN - Easy to Use Strategies for Writing & Submitting Articles to Increase Inbound Links

DNN, Marketing Day of DNN - How to Optimize Your Socialization

DNN Guest Speakers at Day of DNN!

Marketing Enticing Your Followers with Fresh Content: A How To Guide

DNN, Web Dev What Can Website Templates Do For You?

Marketing Getting Up in the Ranks Through SEO

DNN, Modules Best DNN Shopping Cart

Marketing Enter into the "Timeline"

Marketing Making Your Facebook Business Page Secure

Marketing Get Your Tweet-Face On

DNN, Marketing Google Analytics and DNN

Marketing What is Social Media and What Can It Do for You

DNN Advantages of DotNetNuke

Web Dev 8 Ways to Increase Website Speed

Marketing Beyond Facebook and Twitter, Get "In" with Social Media

Web Dev 8 Great Website Development Tools

Web Dev Your Website & Internet Explorer

Marketing What is Google +1

Web Dev What is "The Cloud"?

Succeed

Contact 10 Pound Gorilla Today
for Your Free Consultation

or Call {970} 726.5144 or Connect