[All Adaptavist Apps]
...
...
...
Excerpt |
---|
This short tutorial shows you how to change the heading styles using CSS... |
The most common first step when customising headings is to choose a font that more closely matches that of your design guidelines and remove the background and bottom border from the headings.
Here's an example of CSS that will do just that:
No Format |
---|
{excerpt}* By default, {confluence} puts a grey background behind most heading styles (h2. to h6.) - this rarely fits with your organisations design guidelines so it's time to take some action... h2. All Heading Levels The most common first step when customising headings is to choose a font that more closely matches that of your design guidelines and remove the background and bottom border from the headings. Here's an example of CSS that will do just that: {noformat} h1, h2, h3, h4, h5, h6 { font-family: trebuchet ms, arial, verdana, lucida grande, sans-serif; line-height: normal; font-weight: bold; background-color: transparent; border-bottom: none; } {noformat} |
This
...
CSS
...
modifies
...
all
...
heading
...
styles
...
to
...
ensure
...
that:
...
...
...
...
...
Footnote |
---|
When specifying the font, always remember that the person viewing the page might not have that font installed. As such, you should specify alternative fonts (in order of priority) to try and at the end of your list have either |
Footnotes Display |
---|
After deiining the common features for all headings, the next thing to do is define each individual heading (if required).
Because each heading is actually wrapped in an anchor (so that you can link to it), you need two separate styles - one for the heading itself and another to correct any oddities that may appear when the mouse is over the heading.
Example:
No Format |
---|
|http://www.w3schools.com/css/pr_font_font-family.asp|More info...]{footnote}When specifying the font, always remember that the person viewing the page might not have that font installed. As such, you should specify alternative fonts (in order of priority) to try and at the end of your list have either {{sans-serif}} or {{serif}}.{footnote} * Their [line-height|http://www.w3schools.com/css/pr_dim_line-height.asp|More info...] is normal (so our [Text Styles CSS] doesn't make them look odd) * Their [font-weight|http://www.w3schools.com/css/pr_font_weight.asp|More info...] is set to *bold* so they stand out from any other text of a similar size * Their [background-color|http://www.w3schools.com/css/pr_background-color.asp|More info...] is transparent (ie. remove that grey background) * Thier [border-bottom|http://www.w3schools.com/css/pr_border-bottom.asp|More info...] is removed (to remove the blue or grey line that appears under some heading styles) {display-footnotes} h2. Specific Heading Levels After deiining the common features for all headings, the next thing to do is define each individual heading (if required). Because each heading is actually wrapped in an [anchor|Linking to Headings and Anchors] (so that you can link to it), you need two seperate styles - one for the heading itself and another to correct any oddities that may appear when the mouse is over the heading. Example: {noformat} h1 { font-size: 22px; color: #003366; padding: 0px; padding-bottom: 4px; padding-top: 12px; margin: 12px 0px 4px 0px; } h1 a:hover { border-bottom: none; } {noformat} |
The
...
first
...
style
...
sets
...
the
...
overall
...
design
...
for
...
heading
...
level
...
1
...
(
...
h1
...
)
...
wheras
...
the
...
second
...
(
...
h1
...
a:hover
...
)
...
corrects
...
any
...
visual
...
glitches
...
that
...
you
...
may
...
see
...
when
...
the
...
mouse
...
is
...
held
...
over
...
the
...
heading.
...
The
...
most
...
useful
...
settings
...
for
...
each
...
heading
...
level
...
are:
...
...
,
...
...
,
...
...
...
and
...
...
.
Common heading font-sizes
...
are:
...
Center | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
You've no doubt got a couple of questions about the table above:
Q | Why are h3 and h4 the same size? |
---|---|
A | They are usually different colours or one may be bold whilst the other isn't. For example, while |
Q | Why is h6 so big? |
---|---|
A | We normally style |