Changes for page Skins

Summary

• Page properties (1 modified, 0 added, 0 removed)
• Objects (1 modified, 1 added, 1 removed)
  • XWiki.XWikiComments[1]
  • XWiki.XWikiComments[2]
  • XWiki.XWikiComments[0]

Details

Page properties

Content

...	...	@@ -1,8 +1,88 @@
1		-# test 2
2		-# test 3
3		-# test 4
4		-# test 5
5		-# test 6
	1	+1 Skins
6	6
7		-* Replace the content of the logo.png file on the filesystem with your own logo. You'll need to have admin access to the XWiki server machine and stop/restart it.
	3	+A skin is a set of images, [CSS files], [a layout>CSS Layout] and XWiki templates allowing to change the layout of the wiki.
8	8
	5	+A skin is usually developped by administrators and graphics designers and can be used to change the look of a XWiki installation for:
	6	+- one page
	7	+- one user
	8	+- one [space>FAQ.WhatIsASpace]
	9	+- the whole wiki
	10	+
	11	+A skin can have multiple Stylesheets which are switchable by the users and can stay active using a cookie.
	12	+
	13	+You'll find the following tutorials on this page:
	14	+#toc("" "" "")
	15	+
	16	+1.1 Changing the skin
	17	+
	18	+There are several levels and ways to change the skin. Here's the order in which XWiki looks for a skin:
	19	+# First XWiki checks if the request has a "skin" parameter. Thus to quickly apply a skin to a page, append ~~?skin=<skin name>~~ to the end of a XWiki URL. The default skin is named "default".
	20	+# Then the user's preference is checked for a "skin" element. This allows to have a different skin per user. Right now there's no inline view for that element so you'll need to edit your user's profile in "Edit Objects" mode (only available when using the Advanced View). For example to edit the objects for the JohnSmith user you would use the following URL: ~~http://\<server\>/xwiki/bin/edit/XWiki/JohnSmith?editor=object~~
	21	+# Then the Space preferences are checked for a "skin" element. This can be changed by using the "Administration" link.
	22	+# Then the global preferences are checked for a "skin" element. This can be changed by using the "Administration" link.
	23	+# Then the default base skin name is used if defined. It's defined in ~~xwiki.cfg~~ under the ~~xwiki.defaultbaseskin~~ property.
	24	+# Then the default skin is used if defined. It's defined in ~~xwiki.cfg~~ under the ~~xwiki.defaultskin~~ property.
	25	+# Then the skin named "default" is used. This is skin on the file system in the XWiki webapp, in the ~~skins/~~ directory
	26	+
	27	+#info("The Default Base Skin is the skin used when you create a new skin using the XWiki.XWikiSkins objects (as explained below) and when you don't specify the 'base skin' field.")
	28	+
	29	+1.1.1 Upgrading to the XWiki 1.0 Skin
	30	+
	31	+See the [Release Notes>Main.ReleaseNotes].
	32	+
	33	+1.1 Changing the logo for the Albatross skin
	34	+
	35	+By default the Albatross skin looks for a ~~logo.png~~ file either attached to your skin page (as an attachment) or in your skin directory (in \webapp\/skins/\). Thus there are 2 options for changing the logo:
	36	+
	37	+* Replace the content of the logo.png file on the filesystem with your own logo. You'll need to have admin access to the XWiki server machine and stop/restart it.<br />
	38	+*or*
	39	+* Create a new skin that inherits from the skin you wish to use, attach a logo file to edit and edit the logo property to point to, as described below
	40	+
	41	+** Find the /xwiki/bin/view/XWiki/DefaultSkin page.
	42	+** Attach an image file that is exactly 200 pix wide, and 70 pix high (else the logo will look bad) to that page. For example: call the file "mylogo200x70.gif".
	43	+** Click to edit this skin, and in the "objects" editor you will find an object XWiki.XWikiSkins.
	44	+** Alter the XWiki.XWikiSkins object so that the "logo" property says: mylogo200x70.gif (or what ever you chose to call the file name above)
	45	+
	46	+#info("If you're using an old XWiki.XWikiSkins page it may not have the logo property. In that case, create it by editing the XWiki.XWikiSkins class using the class editor (either by going to that page and choosing Edit > Class or by using the xwiki/bin/edit/XWiki/XWikiSkins?editor=class URL directly).")
	47	+
	48	+1.1 Creating a skin
	49	+
	50	+To create a skin, you need to have notions of one or more of:
	51	+* XHTML
	52	+* CSS (Cascading Style Sheets)
	53	+* [Velocity Templates>http://jakarta.apache.org/velocity/user-guide.html]
	54	+* [The XWiki API>http://build.xpertnet.biz/doc/api/com/xpn/xwiki/api/package-summary.html]
	55	+
	56	+With a skin, you can change (and therefore break) the layout of *everything* in XWiki.
	57	+
	58	+Usually you just want to change the basic layout of XWiki, and therefore you need to modify:
	59	+
	60	+* the main styles file: style.css
	61	+* the header template: header.vm
	62	+* the footer template: footer.vm
	63	+* the main logo
	64	+
	65	+To do this you need to:
	66	+
	67	+* Be using the Advanced mode if you're using XWiki 1.0 (beta1, beta2, etc). You'll need this to see the advanced edition menus. This entails going to your profile page and switching to the advanced mode.
	68	+* Create an empty page
	69	+* Attach any images needed in the skin to this page
	70	+* Select "Edit Objects" in the Edit menu
	71	+* Add the objects from the class "XWiki.XWikiSkins"
	72	+* Modify the style.css (overriding standard rules)
	73	+* Modify header.vm and footer.vm content
	74	+
	75	+You will find the original content at:
	76	+
	77	+* XWiki 1.0 files and templates can be found in your local XWiki installation (http://\<yourserver\>/xwiki/skins/xwiki10b1/ for XWiki 1.0 Beta 5 and before and http://\<yourserver\>/xwiki/skins/albatross/ for XWiki 1.0 Beta 6 and after).
	78	+
	79	+To start, the best is to copy-paste the original content and make a slight modification.
	80	+
	81	+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.
	82	+
	83	+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) 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)
	84	+
	85	+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
	86	+
	87	+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)
	88	+

XWiki.XWikiComments[1]

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.Aneiba
	1	+XWiki.JanEldenmalm

Comment

...	...	@@ -1,9 +1,5 @@
1		-Dear all,
2		-
3		-I am trying to change the wiki skin and other things, but the below message always appears preventing me to change anything, despite i accessed as an admin, any hints
4		-
5		-"You are not allowed to view this document or perform this action"
6		-
7		-Thanks,
8		-
9		-Adel
	1	+*A simple and fast way to change the logo with a predefined size:*
	2	+1. Find the /xwiki/bin/view/XWiki/DefaultSkin page.
	3	+1. Attach an image file that is exactly 200 pix wide, and 70 pix high ( else the logo will look bad) to that page. For example: call the file "mylogo200x70.gif".
	4	+1. Then click to edit this skin, and in the "objects" editor you will find an object XWiki.XWikiSkins.
	5	+1. Alter the XWiki.XWikiSkins object so that the "logo" property says: mylogo200x70.gif ( or what ever you chose to call the file name above)

Date

...	...	@@ -1,1 +1,1 @@
1		-2007-01-24 10:48:09.0
	1	+2007-04-30 19:22:20.0

XWiki.XWikiComments[2]

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.JanEldenmalm

Comment

...	...	@@ -1,5 +1,0 @@
1		-*A simple and fast way to change the logo with a predefined size:*
2		-1. Find the /xwiki/bin/view/XWiki/DefaultSkin page.
3		-1. Attach an image file that is exactly 200 pix wide, and 70 pix high ( else the logo will look bad) to that page. For example: call the file "mylogo200x70.gif".
4		-1. Then click to edit this skin, and in the "objects" editor you will find an object XWiki.XWikiSkins.
5		-1. Alter the XWiki.XWikiSkins object so that the "logo" property says: mylogo200x70.gif ( or what ever you chose to call the file name above)

Date

...	...	@@ -1,1 +1,0 @@
1		-2007-04-30 19:22:20.0

XWiki.XWikiComments[0]

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.Aneiba

Comment

...	...	@@ -1,0 +1,9 @@
	1	+Dear all,
	2	+
	3	+I am trying to change the wiki skin and other things, but the below message always appears preventing me to change anything, despite i accessed as an admin, any hints
	4	+
	5	+"You are not allowed to view this document or perform this action"
	6	+
	7	+Thanks,
	8	+
	9	+Adel

Date

...	...	@@ -1,0 +1,1 @@
	1	+2007-01-24 10:48:09.0