By Ectopod on

No matter what I do, I cannot get CKEditor to display any style options. Here's what I've been doing:

  1. Go to /admin/config/content/formats and select 'Configure' on the Full HTML text format.
  2. Drag-and-drop the 'Styles' button from 'Available buttons' to 'Active toolbars'.
  3. Select the 'Styles dropdown' tab and enter in several styles using the recommended format (i.e element.class|Label). Rules for these styles have already been added to my CSS.
  4. Save configuration.

When I try to create new content, the 'Style' button has appeared in the toolbar, but it is greyed out; I cannot select any styles. Things I've tried to remedy this:

  • Clear caches via the UI.
  • Clear caches manually via PHPMyAdmin
  • Manually run cron.
  • Visit the /admin/appearance page to refresh the theme.
  • Clear the browser's cache.
  • Log-in to the site using an incognito tab, hoping that this would provide a clean cache.

None of these things worked. I consistently get a greyed out 'Styles' button. Any suggestions on how to fix this would be much appreciated.

⋅ Categories: Drupal 8.x

Comments

Ectopod’s picture

Ectopod commented

For anyone who may stumble across this post, the reason my styles weren't showing up is because I was trying to use 'img' as the element, which will not work for obvious reasons. In similar fashion, 'a' will not work either (which was used in a tutorial I was reading and part of the reason I got confused). Instead, you have to use 'div', 'p' or any other standard text-content element, and it should work.

capysara’s picture

capysara commented

This was very helpful! Here are some other notes for other people coming across this. I wanted to an additional bullet style (a new style to the <li> tag).

1. Configure your text format.

2. Add Styles to your Active Toolbar

3. Under Style drop, add li.checkmark|Checkmark

4. If you've enabled "Limit allowed HTML tags..." then you also need to be sure that your new class ("checkmark") is added to the list of Allowed HTML Tags. It should be automatically added when you save. <li class="checkmark">

5. Save Config

6. Add or edit some content using the Text format that you were just configuring.

7. Note that your new Checkmark Style is not available until you select your text and give it the <li> tag, using the Bullet button.

7.a. The same thing will work for other tags, e.g., <a>. In your Text format, you could add 'a.btn|Button' style. Your new style won't display until you've turned some text into a link so that you have an <a> tag to style.