Hi, I was also looking for such a tutorial without success. To acheive the goal in order to make my custom skin, I just tried to copy the toucan skin files to a new folder and modify classes (or add new ones for special cases) using Firebug to detect each block assigned class or id. The CSS architecture is very complex and very difficult to understand. Hope this will help. -- Hoani CROSS Globotraders Tahiti Founder [http://globotraders-tahiti.com] 2008/10/14 Azzedine Ait Khelifa <aaitkhelifa@yahoo.fr>

Hello all,

I'm looking for a real tutorial (step by step or How to) for creating skins and template for XWiki ... I'm Looking for the Xwiki Documentation ... and it's not really understable ...

Someone have some knoewledge about ?

Thanx,

Azz ..

PS : If someone write a good Tutorial, I'll paid him/her beer in a wonderfull pub in Paris ...

_______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users

I'd also love such a tutorial. Who can write it? Thanks -Vincent On Oct 15, 2008, at 6:30 AM, Hoani Cross wrote:

Hi,

I was also looking for such a tutorial without success. To acheive the goal in order to make my custom skin, I just tried to copy the toucan skin files to a new folder and modify classes (or add new ones for special cases) using Firebug to detect each block assigned class or id. The CSS architecture is very complex and very difficult to understand. Hope this will help.

-- Hoani CROSS Globotraders Tahiti Founder [http://globotraders-tahiti.com]

2008/10/14 Azzedine Ait Khelifa <aaitkhelifa@yahoo.fr>

...

Hello all,

I'm looking for a real tutorial (step by step or How to) for creating skins and template for XWiki ... I'm Looking for the Xwiki Documentation ... and it's not really understable ...

Someone have some knoewledge about ?

Thanx,

Azz ..

PS : If someone write a good Tutorial, I'll paid him/her beer in a wonderfull pub in Paris ...

_______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users

_______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users

On Oct 17, 2008, at 11:31 AM, Sergiu Dumitriu wrote:

Vincent Massol wrote:

...

I'd also love such a tutorial. Who can write it?

I think we should first have a _much_ cleaner and modular skin. To be done once we have all the extension mechanisms in place. After that, a tutorial will be easy.

Sure I agree but both are not exclusive. Otherwise we'll not progress. We decided to clean the skins at least 6 months ago and we're far from there yet. So it'd be better to have a quick tutorial now rather than wait for several more months ;) So if a contributor (someone who has created a skin) can write a quick one it'll help a lot others. Thanks -Vincent

...

On Oct 15, 2008, at 6:30 AM, Hoani Cross wrote:

...

Hi,

I was also looking for such a tutorial without success. To acheive the goal in order to make my custom skin, I just tried to copy the toucan skin files to a new folder and modify classes (or add new ones for special cases) using Firebug to detect each block assigned class or id. The CSS architecture is very complex and very difficult to understand. Hope this will help.

-- Hoani CROSS Globotraders Tahiti Founder [http://globotraders-tahiti.com]

2008/10/14 Azzedine Ait Khelifa <aaitkhelifa@yahoo.fr>

...

Hello all,

I'm looking for a real tutorial (step by step or How to) for creating skins and template for XWiki ... I'm Looking for the Xwiki Documentation ... and it's not really understable ...

Someone have some knoewledge about ?

Thanx,

Azz ..

PS : If someone write a good Tutorial, I'll paid him/her beer in a wonderfull pub in Paris ...

I'm sorry to dig up this topic but, Is this tutorial was created since Oct 17, 2008? and this much cleaner and modular skin was it already done, or still not? AdminGuide Skins exist since Jan 04, 2007 and last contribution at Aug 10, 2008. It's very very difficult to understand css and vm architecture of toucan skin from scratch.. Need help... Azzedine wrote:

--- En date de : Ven 17.10.08, Sergiu Dumitriu <sergiu@xwiki.com> a écrit : De: Sergiu Dumitriu <sergiu@xwiki.com> Objet: Re: [xwiki-users] A Real tutorial for creating Skins and Template ... À: "XWiki Users" <users@xwiki.org> Date: Vendredi 17 Octobre 2008, 11h31

I think we should first have a _much_ cleaner and modular skin. To be done once we have all the extension mechanisms in place. After that, a tutorial will be easy.

Great Idea but when can we have a "_much cleaner and modular skin" ?

__________________________________________________ Do You Yahoo!? En finir avec le spam? Yahoo! Mail vous offre la meilleure protection possible contre les messages non sollicités http://mail.yahoo.fr Yahoo! Mail _______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users

-- View this message in context: http://n2.nabble.com/A-Real-tutorial-for-creating-Skins-and-Template-...-tp1... Sent from the XWiki- Users mailing list archive at Nabble.com.

Thanks for you help, i doesn't know this technique but i do same thing (i think) overriding stylesheets by the Xwiki.XWikiSkins class... When i say "from scratch" i heard "in darkness with firebug without knowing the tree of stylesheets and their roles". I would love to have a map of " XWikiskins / toucan / albatross skin ", perhaps because i'm not the real developper's profile, and because i think it could help me to save lot of time!! What you explain is not really what i want to do, even if its just an example. Our goal for now, is to use xwiki for our website too, like http://www.xwiki.com http://www.xwiki.com , it seems not really difficult if i have more documentation, but a real puzzle without. Niels Mayer wrote:

On Tue, Mar 17, 2009 at 10:49 AM, Remi <remi.pierrard@conseiltechno.com>wrote:

...

It's very very difficult to understand css and vm architecture of toucan skin from scratch..

I don't know if it's worth understanding from scratch.

What about "understanding" it from firebug, in firefox, on a working xwiki page. This includes changing the stylesheet live to make it look like you want it to. Once you've got some things working, figure out how to make your settings work as !override forms in a standalone CSS file.

Then just go to Administrate Wiki->Presentation, andadd the following to "HTTP Meta Information":

<link rel="stylesheet" href="$xwiki.getURL("Macros.MyStyleOverride","view","xpage=plain")" type="text/css" />

The above will override for the whole site. To be safe, I suggest trying out stylesheet override changes on a specific space where you can do experiments w/o messing up the site for everybody else. This is done by using Administrate Space->Presentation->"HTTP Meta Information"

Once you've decided the location, create a stylesheet as a document called for example, Macros.MyStyleOverride

...

$response.setContentType("text/css") {pre}

/* place all overrides to default stylesheet here */

...

/* example: .rssfeed {border:0px!important;padding:0px!important;width:100%!important;} */ {/pre}

(suggest starting out with an empty Macros.MyStyleOverride then adding new styles individually, and shift-reloading to force all the stylesheets to reload on each test).

Of course I haven't tried the above yet, other than for a different example that uses the same technique/hack but locally rather than globally... but I plan to do this some more soon. .........................

Date: Mon, 16 Mar 2009 18:04:07 -0700 Subject: generalizing Radeox RSS:FEED macro in Xwiki From: Niels Mayer <nielsmayer@gmail.com> To: XWiki Users <users@xwiki.org>

(1) Create a stylesheet http://nielsmayer.com/xwiki/bin/view/Macros/styledRSS?xpage=plain Which is a document http://nielsmayer.com/xwiki/bin/view/Macros/styledRSS?viewer=code with following wikicode:

...

$response.setContentType("text/css") {pre} .rssfeed {border:0px!important;padding:0px!important;width:100%!important;} {/pre}

(2) Refer to that stylesheet wherever you want/need the RSS:FEED macro to appear sized to the container displaying it, e.g. to make a "Panel" display feed contents:

<link rel="stylesheet"

...

href="$xwiki.getURL("Macros.styledRSS","view","xpage=plain")" type="text/css" /> #panelheader('Twitter Lyme') {rss:feed= http://search.twitter.com/search.atom?q=Lyme+Disease|count=5|img=false|full=false|search=true } #panelfooter()

The results: http://morgellonswiki.info/xwiki/bin/view/Panels/Twitter+Lyme http://morgellonswiki.info/xwiki/bin/view/Panels/Twitter+Morgellons http://morgellonswiki.info/xwiki/bin/view/Panels/Google+News+Lyme http://morgellonswiki.info/xwiki/bin/view/Panels/Google+News+Morgellons

(3) You can change the way your feed presents in your XWiki user page, e.g. http://nielsmayer.com/xwiki/bin/view/XWiki/NielsMayer is done by placing the following in the "Description" field of the User document:

<link rel="stylesheet"

...

href="$xwiki.getURL("Macros.styledRSS","view","xpage=plain")" type="text/css" /> {rss:feed= http://nielsmayer.com/roller/NielsMayer/feed/entries/rss|count=50|img=true|full=false|search=true }

(4) Using the same stylesheet hack along with documented information on the radeox RSS macro ( http://code.xwiki.org/xwiki/bin/view/Macros/RssMacro ) one can assemble numerous feeds in one page, fully expanded, with space for images, etc: http://morgellonswiki.info/xwiki/bin/view/Main/FeedsOfInterest

.....................................

Niels http://nielsmayer.com _______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users

-- View this message in context: http://n2.nabble.com/A-Real-tutorial-for-creating-Skins-and-Template-...-tp1... Sent from the XWiki- Users mailing list archive at Nabble.com.

i'm ok with your hack, i tested it and his approach is effectivly more intuitive. But I have no problem with the method, my original question was just to know if a better tutorial was done since the time of Vincent Massol and Sergiu Dumitriu-2 was talking about above in this topic. I think it was a good idea, even if exist hack and others solutions in darkness of course, that we are oblige to use without. About my "from scratch" expression, it don't fit. I don't want to reinvent the wheel, and rewrite all existing and certainly very good code present in xwiki and skins. I just want to understand it and his map. I had found in another old topic definitions of css files and their roles, but its fit of very old version and lot of files seems obsolete today.. Niels Mayer wrote:

On Wed, Mar 18, 2009 at 3:29 AM, Remi <remi.pierrard@conseiltechno.com>wrote:

...

Thanks for you help, i doesn't know this technique but i do same thing (i think) overriding stylesheets by the Xwiki.XWikiSkins class...

When i say "from scratch" i heard "in darkness with firebug without knowing the tree of stylesheets and their roles". I would love to have a map of " XWikiskins / toucan / albatross skin ", perhaps because i'm not the real developper's profile, and because i think it could help me to save lot of time!!

I think the difference between "my hack" suggestion and the one in http://platform.xwiki.org/xwiki/bin/view/AdminGuide/Skins is that my approach is simpler, less prone to leaving you with an unreadable site if you make a mistake, and more immune to changes in the underlying skin as you upgrade XWiki versions.

The problem with developing from scratch is that you have to develop from scratch... I prefer standing on the shoulders of giants, and if you take a look at the CSS involved in xwiki, you need to stand on the shoulders of giants... :-) But just like we don't go off creating new organisms from scratch, we modify existing one's DNA, the same goes for software. It also doesn't help that there's no formal way of defining, enforcing, or testing the semantics occurring between DOM/CSS and javascript and velocity... other than poking at it in different browsers and looking at how it behaves under the microscope of 'firebug.'

Also, "my hack" can be done "interactively" by editing a xwiki document containing the css data, whereas the correct approach requires editing XWikiSkins in the class editor, or the installation of a skin either as files at the apache level (assuming you front your xwiki with httpd), or into the servlet container itself requiring a relaunch for each iteration of what is supposed to be rapid prototyping. "My hack" enables rapid prototyping, but is less efficient as it requires all the overhead of an extra xwiki document (the override css file) getting created or loaded from the cache for each page.

There's no question that if you're building http://idiva.com or http://www.bestventes.com then "my hack" is not the way to go. However, it might be the way to make incremental changes to the existing CSS before rolling the changes back into the skin and pushing out a new release.

One question is could the "overriding" approach suggested by "my hack" be integrated directly into Admin->Presentation by having an wiki-specific area in which CSS overrides reside. From there, some of the more common customizations (e.g. changing the header-image and dimensions, changing the background fill/color/pixmap, transparency on/off, etc) could be done in the web-GUI by a wiki-owner, rather than becoming a sysadmin task.

FYI, here's the approach suggested in the documentation:

To start, the best is to copy-paste the original content and make a slight

...

modification.

If you want to derive your skin from another skin, you should write the name of the skin to derive in the "baseskin" textfield at the bottom of the page.

It is possible to modify the other templates. To do so you need to edit the XWiki.XWikiSkins class using the Class Editor ( http://<yourserver>/xwiki/bin/edit/XWiki/XWikiSkins?xpage=editclass<http://%3cyourserver%3e/xwiki/bin/edit/XWiki/XWikiSkins?xpage=editclass>) and add a TextArea field that has the name of the template (for instance if you want to modify viewheader.vm which takes care of the action bar at the top, you need to create a TextArea field named viewheader.vm)

Once you have make some modifications, you can test your skin by adding the "skin=Main.MySkinPage" at the end of the URL. For example if you are creating a skin on <yourserver>, you can test the skin on the Home Page at http://<yourserver>/xwiki/bin/view/Main/WebHome?skin=Main.MySkinPage<http://%3cyourserver%3e/xwiki/bin/view/Main/WebHome?skin=Main.MySkinPage>

Finally, when you are really happy with your skin, you can apply the skin to the whole wiki or to a space by modifying the "skin" field in the XWiki or Web Preferences. You should also modify the default and alternative styles (If you haven't created alternative styles, put 'style.css' in both fields)

Niels http://nielsmayer.com _______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users

-- View this message in context: http://n2.nabble.com/A-Real-tutorial-for-creating-Skins-and-Template-...-tp1... Sent from the XWiki- Users mailing list archive at Nabble.com.