6 Feb
2012
6 Feb
'12
3:43 p.m.
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); }
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....
After I find the section what's the syntax to use????
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)
Best regards,
Kaya
7 Feb
7 Feb
6:10 a.m.
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/
6:31 a.m.
Thanks for your response Sergiu!
<snip>
Ok so I gota learn velocity I guess.... :-)
Whenever this is mentioned it really confuses me as I am struggling to
find examples....
I am currently going through many Xwiki docs on Skinning but I don't see
a 'start from scratch' guide - skins for beginners or something similar ;-)
Probably the closest I've come is this:
http://platform.xwiki.org/xwiki/bin/view/DevGuide/Skins
But then am also going through all of these too:
http://platform.xwiki.org/xwiki/bin/view/Features/Skins
http://platform.xwiki.org/xwiki/bin/view/AdminGuide/Skins
http://extensions.xwiki.org/xwiki/bin/view/Extension/Skin+Editor+Application
In order to keep things automated and dynamic it's best to load
everything at the database level so that when performing an upgrade the
UI doesn't break or go funny which is what happened to me previously
but, then how do you create a skin using Xwiki docs??
Am probably doing something wrong again but here's what I've got so far:
I created a new doc called XWiki_Skin under:
<ip>:8180/xwiki/*/bin/view/XWiki/XWiki_Skin*
Then added the Xwiki Skin object to it using the object editor. Then
attached a css file to the skin doc and then got lost :-)
So I guess any help on the procedure would really be appreciated!!
Many thanks,
Kaya
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.
How would this apply to say:
<snip>
>
> { background-image :url( ../../images/colors/bg/gpl-red.png) ; }
<snip>
??
As in if gpl-red.png was an attachment to the skin doc itself?
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.
style.css had @import statements in which I tried adding but nonetheless
the UI still broke....
I guess if I opened up those import statements then pasted each css doc
into the style section it would work. However, that said it seems like
things would become messy if that happened!
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.
4702
days inactive
4703
days old
2 comments
2 participants
participants (2)
-
Kaya Saman -
Sergiu Dumitriu