[xwiki-devs] Adding CSS code into Xwiki skin

[Sergiu Dumitriu]

On 02/06/2012 09:43 AM, Kaya Saman wrote:
> Hi guys,
>
> I know I've asked this before so please bare with me and save the
> lynching for later ;-)
>
>
> I have added this CSS to the Xwiki file system and would like to add it
> to the Xwiki Skin Document instead....:
>
>
> body#body,
> #allviewpanels .accordionTabContentBox{background-image: url(
> ../../images/colors/gray/H4x4-GRAY.png); }

You really shouldn't use this kinds of hardcoded URLs... This will fail 
when you move the style from the filesystem to the skin, since the base 
URL will be different. Use:

$xwiki.getSkinFile('images/colors/gray/H4x4-GRAY.png')

if the file is in the baseskin on the filesystem, or:

$doc.getAttachmentURL('H4x4-GRAY.png')

if the file is attached to the skin document.

> body#body #xwikimaincontainer,
> body.hideright #xwikimaincontainer,
> body#body.hideright #xwikimaincontainerinner,
> body.importbody #xwikimaincontainerinner,
> body.exportbody #xwikimaincontainerinner,
> body.adminbody #xwikimaincontainerinner,
> body.hidelefthideright #xwikimaincontainerinner,
> body#body.hidelefthideright #xwikimaincontainerinner
> { background-image :url( ../../images/colors/bg/gpl-red.png) ; }
>
> #xwikimaincontainerinner,
> body#body.editbody #xwikimaincontainerinner,
> body#body.eportbody #xwikimaincontainer,
> body#body.importbody #xwikimaincontainer,
> body#body.adminbody #xwikimaincontainer,
> body#body.hidelefthideright #xwikimaincontainer,
> body#body.hideleft #xwikimaincontainer,
> body#body.editbody #xwikimaincontainer
> { background-image :url( ../../images/colors/bg/gpl_right-red.png) ;}
>
> body#body.editbody #globallinks,
> #globallinks,
> #rightPanels,
> #editPanels.panels{ background-image: url(
> ../../images/colors/bg/gpl-red.png);}
>
> #company { background-image: url( ../../images/colors/bg/gpl-red.png); }
>
>
>
> First of all where do I add it, into which section?? I created a new
> skin doc called WWW_Skin (I was told to not use Default Skin) - then
> select customize and insert where??
>
>
> I tried adding to Style section and UI broke....
>

The style section is supposed to override style.css as found on the 
filesystem. If you write some content in it, the content that's in the 
original style.css on the filesystem won't be used anymore. The UI broke 
because the content in the original style.css is important, it pulls in 
all the other style from toucan.css. So, all you have to do in order to 
not break the skin, is to first copy the original content from 
skins/toucan/style.css, then add your custom styles.

> After I find the section what's the syntax to use????
>

CSS plus velocity. You don't need to mark the velocity code in any way, 
the whole content will be passed through Velocity for interpretation. 
You'll have access to $xwiki, and $doc will point to the skin document.

>
> Or would it be simpler to change the 'default stylesheet' under Admin ->
> Presentation and create my own style.css doc???? (which I kind of did
> anyway but it calls another css doc)
>

No, it's better to create your own skin.
-- 
Sergiu Dumitriu
http://purl.org/net/sergiu/