From wiki
Jump to: navigation, search

Editing the Xwiki Background Image

Step 1

The first thing to do is either upload some load images to the server directly or attach them to the skin document by going to:

Administration -> Administer Wiki -> Presentation -> Customize Skin -> Add Attachments

The first method however, would require the creation of a new folder:


For my example I am going to use the directory name bg as a shorthand method for saying 'background'.

Upload the images via; FTP, SFTP, SCP, RSYNC, WGET, or if on a Windows box then SMB or SAMBA for UNIX to Windows systems.


Step 2

Now that some images are contained in our newly created image folder we can begin to edit one of the 'alternative-style' sheets located under: $TOMCAT_HOME/webapps/xwiki/skins/toucan/

Choosing style-red.css as a template, concatenating the file reveals that there is an extra:

@import "css/colors/red.css"

statement which overrides portions of the toucan.css file as can be seen below:


The next stage is to copy the css/colors/red.css over to a file called bg-mod.css taking the 'abbreviated' naming convention from background-modification. This can be done with one simple UNIX command:

#cd css/colors
#cp red.css bg-mod.css

Then edit these items:

body#body.hidelefthideright  #xwikimaincontainerinner 
{  background-image :url( ../../images/colors/bg/gpl.png) ; }

body#body.editbody #xwikimaincontainer
 {  background-image :url( ../../images/colors/bg/gpl_right.png) ;}

#editPanels.panels{  background-image: url( ../../images/colors/bg/gpl.png);}

#company { background-image: url( ../../images/colors/bg/gpl.png); }

until the file looks like so:


Step 3

Add the following line to the style.css file:

@import "css/colors/bg-mod.css";

so that the file now looks like this:

wiki# cat style.css
@import "microformats.css";
@import "toucan.css";
@import "css/colors/bg-mod.css";

Step 4

Finally reboot Apache Tomcat and refresh the page. The new background should take effect.

/usr/local/etc/rc.d/tomcat6 restart