I use wysiwyg with ckeditor, and I was wondering how I would add css styles so a user could, for instance, float images to the left or make other similar changes...?
Ckeditor uses the
ckeditor.styles.js file to define the available styles in the Styles drop down. Documentation in that file states:
'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.
If you look at the file, it should be fairly straight forward to modify it using the given examples.
ckeditor.styles.js file can be copied to a directory accessible by Drupal and modified to include your styles. Then you have to configure your CKeditor profile to point to the new file, including any applicable CSS.
Instead of hooking into
ckeditor.styles.js, we can directly do it on the configuration page of the Format.
WYSIWYG format gives you an option to your own styles and we can simple write css on the basis of those formats.
Steps to add Styles
Navigate to the Configuration page of the formats. (Configuration » Content authoring » Wysiwyg profiles)
Edit any of the format.
Open the CSS fieldset.
Under CSS classes textarea, create the style you want to create. Format of it should be
Style Name = html_element.class_name
Example of the same is
Static Page Title = div.static_page_title (So the name of the style is Static Page Title, which when applied will wrap the text in div adding static_page_title as the class of the div element.)
Steps to use it
Simply write the test and select the style. After you do that the markup would look something like
So we can simply write the css for static_page_title class and everything would work as expected.
Hope that the answer of mine would be helpful