How to give option to add css classes/IDs to content to in CMS's WYSIWYG content builder/editor to non-technical client?


Tags: css,xhtml,accessibility,sitecore,semantic-markup

Problem :

  • How to give option to add css classes/IDs to content to in CMS's content WYSIWYG builder/editor to non- technical client who doesn't know html, css but knows MS Word.

some time to make content according to design XHTML tags not enough. use of css classes needed.

  • Should we give only css .classes to user or #Id can be given also?
  • and how we should write classes name for ease of client?

In semantic way or like border4px, light-text and pretty-background ? Which method will be good for non-technical client to choose and remember appropriate classes?

  • How popular CMS given this option to client ? What is best method according usability?


Solution :

Most Rich HTML online editors bring a "styles" drop down that allows the user to pick styles. See e.g. here for how it's solved in FCKEditor.

As for what styles to put in there, that depends totally on your client IMO. If they have design guidelines, you will want to put styles there that match the corporate font / colouring / design. You could also make this customizable by the user, there are several online CSS Editors around - they're not really for non-technical people, though.

As for whether to use IDs or classes: Absolutely and definitely classes. It's hard to prevent IDs from being assigned multiple times in a WYSIWYG editor, which is a total no-no.

The naming of classes is up to you, really. I like human-readable formats that at the same time are a class name:

  • HeadingBig
  • HeadingMedium
  • HeadingSmall

  • ProductCategory

  • ProductDeclaration

  • Quote

  • TipOfTheDay

those class names are obviously displayed to the user when selecting the class, so there is no need to keep separate, human-readable class names.


    CSS Howto..

    How can i get spaces between images with the same class?

    How can I use a CSS transform to vertically-center two overlapping elements?

    How to stretch line between two cells ( tags)

    How to indent text in a select drop down option menu using PHP & CSS? [REDUX]

    How to center an item inside of a DIV

    HTML: How to correctly format 4 elements on the same line?

    How to recognise when it is appropriate to code CSS [closed]

    How can I place three block of contents in one line in a way that the middle block is always full width?

    Where do I put my CSS, how do I link to it from the master page?

    JavaScript: How to clear my custom keyboard mappings and use the default ones

    CSS- how to prevent the original title info to be displayed

    How to write specific CSS for mozilla, chrome and IE

    How to show Div after a Specific time of page load?

    How to darken the background image in CSS? [duplicate]

    How do change CSS Class from Code Behind?

    How to grow the width of a div as the width screen decreases using Css?

    How to adjust navbar to a fixed width in Twitter Bootstrap?

    How to over-ride img-width from bootstrap? Set css rule to null?

    How should I add some space between the text and the border using CSS

    How do I get PHPStorm to use the correct path for CSS?

    How to override line-height and height css properties that are adding from external css using inline css?

    How can I create the behavior of a two-frame horizontal-tiled frameset with divs/css?

    In CSS, how to scale multiple overlayed images responsively?

    How to make a div hide properly on hover while trying to make a gif also start on hover

    How to create gradient background with CSS in Firefox < 3.6?

    How can I get a CSS/jQuery animated menu similar to ajusto.com?

    How to base the height of a

    on whether or not its parent div has an image

    How to render same margins for every browser?

    How slow are CSS media-queries?

    How to truly align center of two elemnts with css?