How do I setup custom styles in a wiki template?

2010-04-20T18:30:39Z

How do I add options to the wiki editor for fonts, sizes and styles via a template?

Answer by adambox for How do I setup custom styles in a wiki template?

2010-04-20T18:30:59Z

FogBugz 8

The guide below is for version 7 only. FogBugz 8 introduced a new editor, CKEditor, which unfortunately removed this feature. See this post for more information.

FogBugz 7

Each Wiki in FogBugz has a template assigned to it. In the template, you can customize the HTML and CSS of pages. You can change existing options by changing these classes in the template CSS, and add new ones by following the existing examples. Just look for the section headers in the template as shown below:

Font Families

Fonts Families must define the font-family property. They can include other CSS properties, but it can get confusing. e.g. if you define font-size, the style will also appear in the size menu.

/* Font Families */
span.Arial { font-family: Arial, Helvetica, sans-serif }
...

Font Sizes

Sizes must define the font-size property. They can include other CSS properties, but it can get confusing. e.g. if you define font-family, the style will also appear in the font menu.

/* Font Sizes */
...
span.Big { font-size: 20px }
...

Paragraph Styles

These show up in the menu under the Body entry in the style menu.

/* Paragraph Styles */
...
p.ExtraPadding { padding: 25px; }

Code Blocks & Quotes

There is only one Code option in the style menu, but you can change its properties by adding something like (make sure the C in Code is capitalized):

p.Code {color: red}

You can also modify the single Quote style in this way. Again, make sure the Q in Quote is capitalized:

p.Quote { font-style:italic }

Heading Styles

Heading styles are listed in the style menu from Heading 1 to Heading 6. You can define custom versions of each which appear below them in the style menu.

/* Heading Styles */
h1.HugeBlue { font-size:100px; color: blue; }
...

Image Styles

Image styles are show as options when you right-click on an image and choose Image Properties

/* Image Styles */
img.FloatLeft { float: left; }
...

Table Styles

You can create new styles (or modify existing ones) for the various elements of tables (tr, td, etc). For example:

/* Table Styles */
...
table.Ludicrous { font-size: 100px; BORDER-COLLAPSE: collapse; }
table.Ludicrous TR TD { border:1px solid black; color: white; background-color: black; }
table.Ludicrous TR TH { border:1px solid black; background-color: blue; }
table.Ludicrous TD.LessLudicrous { font-size:20px; background-color: white; color: black;}

Other Styles

You can set the styles for elements of the HTML template, such as #idContainer, and change and add to the list of color choices (in the /* Palette Colors */ section).

You can also customize the style of tags when they appear within a type of table cell, paragraph style, etc. For example:

/* a custom paragraph */
p.special { margin-left: 20px; color: #003333; }

/* something different for underlined text in "special" paragraphs only */
.special u { color:red; }

or change the style of strikethrough, underline, italic and bold universally

u { color:red }
i { someproperty:somevalue }
b { someproperty:somevalue }
strike { someproperty:somevalue }

Print Formatting

Define styles for printing in the section at the bottom:

@media print {
/* Customize the styles of your printed articles by adding styles within this @media block. */
}

Tutorial

One of our developers, Ben posted this excellent tutorial to show you how these CSS elements work.

How do I setup custom styles in a wiki template? - FogBugz Knowledge Exchange