7

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...?

Thanks!

6

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.

The 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.

1

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

  • Login on the site as an Admin.
  • Navigate to the Configuration page of the formats. (Configuration » Content authoring » Wysiwyg profiles)

    enter image description here

  • Edit any of the format.

    enter image description here

  • Open the CSS fieldset.

    enter image description here

  • 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

  • Try creating a content and use the Format in which you have added the Style.
  • Under Styles you would see the Style settings that you have created. enter image description here
  • Simply write the test and select the style. After you do that the markup would look something like

    <div class="static_page_title">Testing</div>

  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.