Steps to repeat: 1. https://developer-dev.allizom.org/en-US/docs/Lorem_Ipsum$edit 2. Select the first paragraph. 3. Apply any of the styles mentioned in the bug summary. Expected result: Styles are applied in WYSIWYG and in rendered page. Actual result: The styles are not applied. Instead, the selected paragraph loses a bottom margin in the WYSIWYG and on the resulting page.

Sheppy: please comment; should these go in the main site stylesheet or a customizable stylesheet for you? https://github.com/mozilla/kuma/pull/359 I would prefer the main stylesheet but we can do whichever.

Commit pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/07497b65930afe5c01756861bf90c384d79d5113 fix bug 771645 - Update styles dropdown classes

Awesome! Thanks for taking care of this, David. Two things: * On allizom, "Two Columns" and "Three Columns" still look great but "Callout Box" still has no effect. * Also, all of these styles remove the bottom margin of the paragraph.

Hmmm; looks like :groovecoder removed the .geckoVersion class from my PR. Can you let me know on that groovecoder? Also, to prevent the margin issue, it the geckoVersion class should have the following added to it: margin: 0 0 1.286em;

.geckoVersion is in https://developer-new.mozilla.org/en-US/docs/Template:CustomCSS now.

Still seeing the same thing on allizom.

Does that template exist on allizom?

Good point. Not seeing it on -new either, though.

Works for me on -new: https://developer-new.mozilla.org/en-US/docs/David_Walsh_Test If we desire the same bottom margin as paragraphs, adding this style to .geckoVersion will do so: margin: 0 0 1.286em; I don't have permissions to do this so I'll need :sheppy to do so.

(In reply to David Walsh :davidwalsh from comment #9) > Works for me on -new: > > https://developer-new.mozilla.org/en-US/docs/David_Walsh_Test Awesome. That works for me, too. The only thing is that the style is not applied within the WYSIWYG itself. Also, the "Callout box" button is not using the style like buttons for "Note box", "Warning box", and others. Any idea why that is?

:groovecoder -- is this the result of weird or aggressive caching? Les merged my PR (https://github.com/mozilla/kuma/pull/367/files) which is an array instead of a single file, yet going to (https://developer-new.mozilla.org/en-US/docs/David_Walsh_Test$edit) and typing "CKEDITOR.config.contentsCss" into the console still shows the old, single file path. Any idea here?

For what it's worth, using these from the style drop-down never worked in MindTouch; it's why we had the <div> button, so we could use that to pick the style from there. It worked but was lame.

Just so the status of this is clear, I'm fairly certain this is a caching issue. And everything displays properly on the view page, the callout button just doesn't look blue-ish in the editor.

The problem is that the styles are applied individually to each paragraph in the selecction, instead of the entire selection being wrapped in the appropriate style. This makes a huge difference, and breaks these styles pretty badly in terms of how they're meant to be used.

(In reply to Eric Shepherd [:sheppy] from comment #14) > The problem is that the styles are applied individually to each paragraph in > the selecction, instead of the entire selection being wrapped in the > appropriate style. This makes a huge difference, and breaks these styles > pretty badly in terms of how they're meant to be used. Sheppy: Does this apply to all styles? Could you file a bug for this?

A few other things were mentioned in this thread, but I do think it makes sense to break them down into separate bugs. Opened bug 773916, bug 773917, and bug 773918 about those things.