<script language="JavaScript" type="text/javascript">
<![CDATA[
document.write('<style type="text/css"> td field {background-color: Yellow;} <\/style>')
document.write('<style type="text/css"> div#content_view {background-color: Yellow;} <\/style>')
document.write('<style type="text/css"> table#container tr {background-color: Yellow;} <\/style>')
document.write('<style type="text/css"> .wiki {background-color: Yellow;} <\/style>')
]]>
</script> You can change the default WikiSpaces background colour on a page.

To do this on your own Wikispace, use the following steps:
  1. You need to create a new blank page: this will contain some embedded Javascript that overrides the standard stylesheet to give you the colour you require. I generally use a page name of the form zStyle_bground_colorname, as it keeps them together at the end of the pagelist.
  2. Click the Embedded Media Tool external image embed.gif and select 'Other HTML'.
  3. Paste the following code into the new window that appears: (This example will change the page colour to yellow. You can, of course, choose your own.)
<script language="JavaScript" type="text/javascript">
 
 document.write('<style type="text/css"> div#content_view {background-color: Yellow;} <\/style>')
 
</script>
Now save the code, then save the page.

Now open the page you want to apply the new font to, edit it, and insert the following:
[[include page="zStyle_bground_yellow"]]
(Use the name of the page you created if it's not zStyle_bground_yellow!) You can place this WikiTag anywhere on the page: I'd suggest either right at the top or right at the bottom for clarity.

Please note that you won't see the results in the preview window - you need to save the page to see the new colour in place. And if you want to know how this page uses Tahoma and not Arial, look here.

- NeilSunderland NeilSunderland Sep 8, 2007


Here are some ways to play with the colours of a single page

all but the corners use #container .field

  • works except for the corner which are little images (eg. bTL.gif etc) that round the corners of the content....
<script language="JavaScript" type="text/javascript">
 
document.write('<style type="text/css"> #container .field { background-color: #00ffaa; }.<\/style>')
 
document.write('<style type="text/css"> body { background-color: #00aaaa; }.<\/style>')
 
</script>

thin white border solution .innerContentBox

  • still has a border...
<script language="JavaScript" type="text/javascript">
 
document.write('<style type="text/css"> .innerContentBox { background-color: #f7f7cc; }.<\/style>')
 
document.write('<style type="text/css"> body { background-color: #f5f5f5; }.<\/style>')
 
</script>
- jimmorey jimmorey Apr 27, 2012