604443 - Add CSS rules for KB Article wiki markup

Status: VERIFIED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P1)

Description

[Ricky Rosario [:rrosario, :r1cky]]

We need to add CSS rules for all the possible wiki markup elements in an article (p, ul, ol, img, h1, h2, h3, video, etc).

Comment 1

[James Socol [:jsocol, :james]]

I'll put together a list of all the elements then bounce to Chris for stylin'.

Comment 2

[James Socol [:jsocol, :james]]

Attachment: content of a markup example wiki document

Comment 3

[James Socol [:jsocol, :james]]

I put together an example article with at least almost everything we will need styles for inside an article. Obviously there's a lot of stuff there. You can see the example on master.support[1] (for now).

(I've attached the source of the document in comment 2 in case the document gets wiped off stage.)

Chris: bouncing over to you for that voodoo that you do, so well. Note that there are things, especially the <dl>s toward the bottom, that don't have any distinguishing marks at all right now, but really are unique DOM nodes.

[1] https://master.support.mozilla.com/en-US/kb/markup-chart

Comment 4

[Chris Howse [:chowse]]

Attachment: Article Content CSS

Here's my suggested CSS for article markup, based on what's in the mocks and what styles are currently used in the KB.

The wiki page provided was lacking images and videos, so I haven't provided any styling for them. There is also no special class for external links, so they are not styled different from internal links.

Comment 5

[James Socol [:jsocol, :james]]

If I add a couple image and video examples, would you have time? If not we can make something up.

Do you think it's worth styling external links specially? Because we can. Any suggestions for it?

Comment 6

[Ricky Rosario [:rrosario, :r1cky]]

http://github.com/jsocol/kitsune/commit/1700d064f7597ca870a0d4f89edb193c29f75f0b

Comment 7

[Rebecca Billings [:rbillings]]

Verified the above