Using CSS to Customise the Easy Reader Theme

This page gives some hints on using the space CSS style sheets to customise the Easy Reader theme.

You can customise the Easy Reader theme using CSS at space or site level. A common modification is to change or remove the background image.

CSS elements are specific to each theme

You will need to match your theme choice and custom CSS. If you want to use the CSS on this page, you will need to apply it to a space that is using the Easy Reader theme. If you apply the CSS at site level, then your entire site must use the Easy Reader theme.

CSS の編集

To edit a space's CSS style sheets,

Go to the 'Space Admin' tab of the Browse Space view. To do this:
- Go to a page in the space, open the 'Browse' menu and select 'Space Admin'. The 'Space Administration' view will open.
  'Space Admin' is only displayed if you are a space administrator for that space or you are a Confluence system administrator.
Click 'Stylesheet' in the left-hand panel under the heading 'Look and Feel'.
[編集] をクリックします。
カスタムCSSを、テキストフィールドに貼り付けます。
Click 'Save'. The new CSS will be visible on all content pages in the space.

Simple CSS Customisations for Easy Reader Theme

To change the background image:

body { background: #ccc url("path/to/your/background.gif") 50% 0 repeat-y; }

Remember to set an appropriate background colour to extend past the left and right edges of the image. In the example we use colour code #ccc. This colour should match the last pixel on the left and right of your background image.

Upload your background image as a page attachment

You can upload your background as a page attachment. Make sure that you restrict editing (but not viewing) of that page to yourself or the space/site administrators.

To replace the theme's gradient image with your choice of background colour:

body { background: #ccc; }

To add a border to the left and right of the content area, using a specific colour (in the example we use colour code `#ccc`):

#full-height-container { border-left: 1px solid #ccc; border-right: 1px solid #ccc; }

ページツリー

CSS の編集

Simple CSS Customisations for Easy Reader Theme

To change the background image:

To replace the theme's gradient image with your choice of background colour:

To add a border to the left and right of the content area, using a specific colour (in the example we use colour code `#ccc`):

関連トピック

ページツリー

Using CSS to Customise the Easy Reader Theme

CSS の編集

Simple CSS Customisations for Easy Reader Theme

To change the background image:

To replace the theme's gradient image with your choice of background colour:

To add a border to the left and right of the content area, using a specific colour (in the example we use colour code #ccc):

関連トピック

To add a border to the left and right of the content area, using a specific colour (in the example we use colour code `#ccc`):