[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

Background Colours

Excerpt

This tutorial explains how to change background colours in Theme Builder 1.6...

Note: If the page background appears light grey after installing Theme Builder, restart Confluence to ensure the plugin is properly initialised.

Page Background

By default Theme Builder sets the page background to white (#ffffff in hexadecimal). Should you wish to change the colour, search for the following in the CSS Custom Styles box:

No Format
Wiki Markup
{scrollbar:no-css=true}
h1. How do I change the background colours?

{excerpt}This tutorial answers a fequently asked question regarding background colours...{excerpt}

As you can see from the page you're looking at now, there are two "background" colours - the white "page" background and the greyish "document" background that appears either side of the page.

h2. Page Background

By default the Builder theme sets the page background to white (that's {{#ffffff}} in hexadecimal).

If you've forgotten to restart {confluence} after installing the Builder theme you'll almost certainly see an ugly light grey background (and the menu bar will be all bunched up in the left of the page).  Simply restart {confluence} and the page backgrounds should turn white.

Should you wish to change the colour, search for the following in the CSS Custom Styles box:

{noformat}
/* white page background - Confluence 2.1.2 bug */

td.pagecontent, td.pagebody, div.wiki-content, div.content {
background-color: #FFFFFF;
border-style: none;
}
{noformat}

Change

...

the

...

#FFFFFF

...

to

...

whichever

...

colour

...

you require (see this colour chart for a list of colours).

Document Background

The document background is the area surrounding the white part of the page.

To change the document background, add a style similar to the following to the CSS Custom Styles box:

No Format
 require.

h2. Document Background

To change the document background, add a style similar to the following to the CSS Custom Styles box:

{noformat}
body {
background-color: #ff0000#f00;
}
{noformat}

In

...

the

...

example

...

above,

...

the

...

panels

...

either

...

side

...

of

...

the

...

page

...

would be set to

...

a

...

red

...

background

...

colour.

...