[All Adaptavist Apps]

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Text

...

Styles

...

CSS

...

Excerpt

This short tutorial provides numerous examples showing how to improve text styles...

...

One of the key factors in making content look nicer, especially text-heavy

...

content,

...

is

...

the

...

subtle

...

styles

...

that

...

can

...

be

...

applied

...

to

...

text.

...

We've

...

provided

...

several

...

common

...

customisations

...

that

...

have

...

been

...

applied

...

to

...

numerous Theme Builder themed sites...

...

Font

...

and

...

Size

...

The

...

most

...

obvious

...

customisation

...

is

...

the

...

font

...

and

...

size

...

of

...

your

...

body

...

text,

...

for

...

example:

No Format


{noformat}
body, p, td, span.smalltext, li {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
}
{noformat}

This

...

simple

...

style,

...

that

...

sets

...

the

...

font

...

attributes

...

of

...

all

...

common

...

text

...

(including

...

text

...

in

...

lists),

...

instantly

...

allows

...

you

...

to

...

completely

...

change

...

the

...

look

...

of

...

all

...

your

...

content.

...

Line

...

Spacing

...

Often

...

overlooked,

...

the

...

spacing

...

between

...

lines

...

makes

...

a

...

huge

...

difference

...

to

...

the

...

look

...

of

...

your

...

content:

No Format


{noformat}
body, p, li {
 line-height:1.6em;
}

ul {
 line-height:1.6em;
}
{noformat}

By

...

setting

...

a

...

slightly

...

bigger

...

line-height

...

,

...

your

...

content

...

instantly

...

looks

...

less

...

text-heavy.

...

In

...

addition,

...

if

...

you

...

use

...

emoticons

...

or

...

other

...

icons

...

in

...

your

...

content

...

then

...

the

...

increased

...

spacing

...

between

...

lines

...

reduces

...

the

...

liklihood

...

that

...

lines

...

will

...

become

...

unevenly

...

spaced.

...

Common

...

Text

...

Styles

Although Confluence provides several additional text styles which can be used in your content, the default browser styles are normally used for them which might result in less than desirable output.

As shown in our tutorial on Basic Text Formatting, some subtle enhancements can make all the difference:

No Format


Although {confluence} provides several additional text styles which can be used in your content, the default browser styles are normally used for them which might result in less than desirable output.

As shown in our tutorial on [Basic Text Formatting], some subtle enhancements can make all the difference:

{noformat}
cite:before { content: "\""; }
cite:after { content: "\""; }
cite, cite:before, cite:after {
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
}

ins {
background-color: #DBFFDB;
}

del {
background-color: #FFE5E5;
}

i, em {
letter-spacing: 1px;
}
{noformat}

These

...

styles

...

customise

...

citations

...

,

...

inserted

...

and

...

deleted

...

text

...

as

...

well

...

as

...

italic text

...

which

...

is

...

obtained

...

using

...

the

...

following

...

wiki

...

markup:

No Format


{noformat}
These styles customise ??citations??, +inserted+ and -deleted- text as well as _itlaicitalic_ text:
{noformat}

Note: As we've just spotted, something's changed in Confluence 2.x and as a result the style for inserted text no longer works. Atlassian are aware of the issue and we'd greatly appreciate your vote on the corresponding issue ticket.