[All Adaptavist Apps]
Page History
| Wiki Markup |
|---|
{scrollbar:no-css=true}
h1. |
Text
...
Styles
...
CSS
...
This short tutorial provides numerous examples showing how to improve text styles...Excerpt
...
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
...
-themed
...
sites...
...
Font
...
and
...
Size
...
The
...
most
...
obvious
...
customisation
...
is
...
the
...
font
...
and
...
size
...
of
...
your
...
body
...
text,
...
for
...
example:
| No Format |
|---|
} body, p, td, span.smalltext, li { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; } {noformat} |
This
...
simple
...
style,
...
that
...
sets
...
the
...
...
...
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 |
|---|
} body, p, li { line-height:1.6em; } ul { line-height:1.6em; } {noformat} |
By
...
setting
...
a
...
slightly
...
bigger
...
...
,
...
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 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 [AtlassianConfluence: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 |
|---|
} These styles customise ??citations??, +inserted+ and -deleted- text as well as _italic_ text: {noformat} |
Note:
...
As
...
we've
...
just
...
spotted,
...
something's
...
changed
...
in
...
2.x
...
and
...
as
...
a
...
result
...
the
...
style
...
for
...
inserted
...
text
...
no
...
longer
...
works.
...
Atlassian
...
are
...
aware
...
of
...
the
...
issue
...
and
...
we'd
...
greately
...
appreciate
...
your
...
...
...
...
...
...
...
.
Overview
Community Forums
Content Tools
Apps