https://docs-old.ckeditor.com/index.php?action=history&feed=atom&title=CKEditor_3.x%2FHowto%2FCustom_StylesCKEditor 3.x/Howto/Custom Styles - Revision history2026-05-19T14:27:43ZRevision history for this page on the wikiMediaWiki 1.29.1https://docs-old.ckeditor.com/index.php?title=CKEditor_3.x/Howto/Custom_Styles&diff=5907&oldid=prevAnna: Article contents added2011-03-09T05:53:01Z<p>Article contents added</p>
<p><b>New page</b></p><div>{{#CUSTOMTITLE:How Do I Add Custom Styles Based on CSS Classes?}}<br />
Add a style definition as described in the [[CKEditor_3.x/Howto/Styles_List_Customization|How do I customize the Styles drop-down list?]] article and pass the class name in the <code>attributes</code> parameter.<br />
<br />
<note>Do remember that since <code>class</code> is a resereved word in JavaScript, you need to place it in quotes.<br />
</note><br />
<br />
<br />
The following example adds a <code>myClass</code> class to an <code>img</code> element. The image element will now be styled as defined in this CSS class.<br />
<br />
<source lang="javascript"><br />
{<br />
name : 'Custom Image',<br />
element : 'img',<br />
attributes : { 'class' : 'myClass' }<br />
}<br />
</source><br />
<br />
For more details on the definition format and best practices on how to customize the styles please refer to the [[CKEditor_3.x/Developers_Guide/Styles|Styles]] article from the [[CKEditor_3.x/Developers_Guide|Developer's Guide]].</div>Anna