Wiki source code of Simple Skin Improvement
Last modified by Vincent Massol on 2024/11/19 16:12
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{include document="XWiki.DesignClassSheet"/}} | ||
| 2 | |||
| 3 | The objective of this proposal is to **very quickly** make improvements to the default Skin/Color Theme of XE to give a much more modern look to XWiki. | ||
| 4 | |||
| 5 | Multiple experience have shown that people first installing XE find the default skin quite "rough" and that it will always lead to modification of the default skin to not only adapt to the users corporate look and feel but also to get out of the "roughness". | ||
| 6 | |||
| 7 | Now in the 3.4 cycle if we want to change something we cannot make a lot of changes, so we would like to make **quick** changes that are **effective**. | ||
| 8 | |||
| 9 | We have the reference of XWiki Cloud (by XWiki SAS) and we can compare the XE default color theme/skin to the XWiki cloud default color theme/skin. | ||
| 10 | |||
| 11 | Here is a side by side comparaison: | ||
| 12 | |||
| 13 | |||
| 14 | [[image:XEHome.png||style="width: 826px; height: 516px;"]][[image:XWikiCloudHome.png||style="width: 827px; height: 478px;"]] | ||
| 15 | |||
| 16 | |||
| 17 | [[image:XELogin.png||style="width: 821px; height: 437px;"]][[image:XWikiCloudLogin.png||style="width: 820px; height: 439px;"]] | ||
| 18 | |||
| 19 | Obvisously one gets a better impression from the XWiki Cloud look and feel on first look on these two pages. | ||
| 20 | |||
| 21 | What we can learn from this side by side comparaison is: | ||
| 22 | |||
| 23 | 1. The login page is particularly more good looking in XWiki Cloud | ||
| 24 | 11. We absolutely need to remove the panel from the XE login page | ||
| 25 | 11. The logo over the login form is nice | ||
| 26 | 1. The general skin is nice IMO for the following reasons | ||
| 27 | 11. Generally more softer (softer blue, softer font for titles, softer icons) | ||
| 28 | 11. White background which reduces the rough breaking with multiple colors in the XE skin (5 differents colors in 100 pixels in height) | ||
| 29 | 11. Image for the top banner behind the logo which make it look quite nice. There is a transition from the top menu bar to the banner to the white of the content background | ||
| 30 | 11. Logo is a little too much on the right in XE and it does not look super nice | ||
| 31 | |||
| 32 | Some other remarks | ||
| 33 | |||
| 34 | 1. Icons are softer in cloud but it's not that important and it might be complex as all icons are not available in the cloud skin | ||
| 35 | 1. The edit bar is still not so good in both cases and something should be done | ||
| 36 | 11. The edit bar in blue is breaking the design of the content page. It is too imposing in terms of look. | ||
| 37 | 11. I believe the edit bar should be replaced by ONE UNIQUE Edit icon/button (aligned on the right) and the other menu items should be moved in the Page top menu | ||
| 38 | |||
| 39 | So I believe we could make quick changes in the 3.4 timeframe in order of importance/less complexity: | ||
| 40 | |||
| 41 | 1. Remove panels from the login page | ||
| 42 | 1. Remove background color (use white background color) | ||
| 43 | 1. Use softer blue | ||
| 44 | 1. Use softer font color for titles | ||
| 45 | 1. Move logo slightly right | ||
| 46 | 1. Add a background image or using CSS to have something nice in the banner | ||
| 47 | |||
| 48 | Probably not in 3.4 | ||
| 49 | |||
| 50 | 1. Redesign the login form with some background image. We could do something similar to XWiki Cloud. | ||
| 51 | |||
| 52 | Some food for thoughts | ||
| 53 | |||
| 54 | 1. Can we do better for icons | ||
| 55 | 1. Completely new skin for 4.x |
