MediaWiki:Xwiki/Background

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:


$TOMCAT_HOME/webapps/xwiki/skins/toucan/images/colors/NAME_OF_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.


bg.png


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:


catcssbg.png


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:


catcssbg2.png


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