Creation of a skin

Help / Discuss
1

Hi,
I try to create a new skin to give to my Wikis a “website” appearance. I’d like to change the whole aspect of my wiki, in order to have a page which looks like xwiki.com with a top-bar, a background and a customizable layout with using CSS code.
However, I can’t find the place where I can change the HTML content of the Default Skin Flamingo. With reading some tutorials in xwiki.org, I found that I should override the skin templates, but I don’t find the /webapps/xwiki/skins/flamingo/ folder because I use xwiki cloud.
Maybe you can help me to find the HTML area where I can edit the code.
Best regards.

2

If you don’t have access to the filesystem then you can create a page that contains an XWikiSkin class and you can override the templates from there.
You should read:

If you just need to add more style, but let the templates as they are (easier for when you will do upgrades) you could just use an SSX (http://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/SkinExtensionsTutorial/#HMinimalStyleSheeteXtension) or just override the custom.less template (see http://extensions.xwiki.org/xwiki/bin/view/Extension/Flamingo%20Skin#HCustomisingstying)

In the past there was also Leiothrix Skin contributed in e.x.o, see http://extensions.xwiki.org/xwiki/bin/view/Extension/Leiothrix%20Skin You could use it as inspiration in order to start, but remember this is kind of old and I don’t know it’s maintaining status.

Have fun and give us some pictures when you are done to see how it looks.

3

Hi,
I succeed to integrate my html code using overrinding templates. I put it in “view.vm” overriding template. And I put my CSS code in a template which is “mynewfile.css”. The layout and the colors are working but the background image do not appear. In spite of the tutorials instructions, I tried to attached my image to my skin document but I don’t succeed to make reference to it.

4

You need to identify the correct location of your file. You can use $xwiki.getSkinFile(…) or $doc.getAttachmentURL(…). Some usage examples on http://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/SkinExtensionsTutorial/ or http://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/Skins/