Custom Styles List

Oct 15, 2010 at 11:07 PM

How does one create a custom list of styles for the dropdown box that initially shows "Apply CSS Class".

I tried adding a <classes> section to the ToolsFile.xml file, but it doesn't seem to work.

Oct 20, 2010 at 8:08 PM

You can define those in the css file that you specify in the cssfile property. That file needs to reside in your skin directory. A better option IMHO is to not use the css dropdown but rather define  custom styles in the paragraph dropwdown. Still, for true WYSIWYG those styles also need to be set in the editors css file.

Feb 13, 2011 at 6:33 PM
Edited Feb 13, 2011 at 6:35 PM
	Here is an example. Make sure that the styles are defined as spelt in the stylesheets. I use portal.css for this. 
Watch out that all classes are lower cases otherwise the classes drop out of the drop down! 

<classes>
       
		<class name="primarybold_lge" value=".primarybold_lge" />
		<class name="primarybold_med" value=".primarybold_med" />
		<class name="primarynormal_med" value=".primarynormal_med" />
		<class name="contrastbold_lge" value=".contrastbold_lge" />
		<class name="contrastbold_med" value=".contrastbold_med" />
		<class name="contrastnormal_med" value=".contrastnormal_med" />
		<class name="compbold_lge" value=".compbold_lge" />
		<class name="compbold_med" value=".compbold_med" />
		<class name="compnormal_med" value=".compnormal_med" />
		<class name="whitebold_lge" value=".whitebold_lge" />
		<class name="whitebold_med" value=".whitebold_med" />
		<class name="whitenormal_med" value=".whitenormal_med" />
		<class name="blackbold_lge" value=".blackbold_lge" />
		<class name="blackbold_med" value=".blackbold_med" />
		<class name="blacknormal_med" value=".blacknormal_med" />
		<class name="darkgreybold_lge" value=".darkgreybold_lge" />
		<class name="darkgreybold_med" value=".darkgreybold_med" />
		<class name="darkgreynormal_med" value=".darkgreynormal_med" />
		<class name="greybold_lge" value=".greybold_lge" />
		<class name="greybold_med" value=".greybold_med" />
		<class name="greynormal_med" value=".greynormal_med" />
		<class name="silverbold_lge" value=".silverbold_lge" />
		<class name="silverbold_med" value=".silverbold_med" />
		<class name="silvernormal_med" value=".silvernormal_med" />
	</classes>	  
	<colors>

		<color Title ="primary" value="#D42222" />
		<color Title ="contrast" value="#333333" />
		<color Title ="comp" value="#555555" />

		<color Title ="white" value="#FFFFFF" />
		<color Title ="black" value="#000000" />
		<color Title ="darkgrey" value="#6B6563" />
		<color Title ="grey" value="#949294" />
		<color Title ="silver" value="#D6D3D6" />
		<color Title ="lightsilver" value="#EFE7E7" />
		<color Title ="violet" value="#42009C" />
		<color Title ="burntorange" value="#FF9A00" />
		<color Title ="deepblue" value="#0865A5" />
		<color Title ="fadedblue" value="#5292C6 "/>
		<color Title ="paleblue" value="#C6DBE7" />
		<color Title ="fadedcyan" value="#86CFFE" />
		<color Title ="gold" value="#DEB200" />
		<color Title ="fadedggld" value="#E7CB42" />
		<color Title ="lightgold" value="#FFF3A5" />
		<color Title ="paleorange" value="#FFB200" />
		<color Title ="yelloworange" value="#FFCF00" />
		<color Title="aqua" value="#00FFFF" />
		<color Title="black" value="#000000" />
		<color Title="blue " value="#0000FF" />
		<color Title="fuchsia " value="#FF00FF" />
		<color Title="gray" value="#808080" />
		<color Title="green" value="#008000" />
		<color Title="lime" value="#00FF00" />
		<color Title="maroon" value="#800000" />
		<color Title="navy" value="#000080" />
		<color Title="olive" value="#808000" />
		<color Title="purple " value="#800080" />
		<color Title="red " value="#FF0000" />
		<color Title="silver" value="#C0C0C0" />
		<color Title="tea" value="#008080" />
		<color Title="white" value="#FFFFFF" />
		<color Title="yellow" value="#FFFF00" />
	</colors>