Documentation about Skin and Theme


WaihonaPedia is a platform for many supportgroups around many diffrent diseases.
People in these communities understand like no one else; it is important to belong in your group.

This is why we value the concept of adapting the waihonapedia to the supportgroup instead of the other way around. And this is why we actively have used, but also customized, the use of XWiki Skins ans XWiki Flamingo Colorthemes!

Skins

It is important to be able to customize the look, but also to be able to follow the XWiki releases in orther to offer a modern adpaptive platform:

Base WaihonaPedia skin

We use the smart way XWiki allows skins to use other skins.
This means we have developped a skin: waihonapediaBaseSkin2021 that will have as a base skin: flamingo (which is bundled with each release of XWiki).

The effect will be that we will use as much as possible the standard out-of-the-box layers of the flamingo skin. A side-effect of this is that we will use well-known standard frameworks as 'bootstrap', 'jQuery', excetera albeit the versions of these framworks that belong to the release.

The following macro's of the flamingoskin are customized!

  • menus_macros.vm
  • companylogo.vm
  • hierarchy.vm
  • menus_view.vm
  • menus_content.vm
  • menus_extra.vm
  • login.vm
  • docextra.vm
  • create.vm
  • admin.vm
  • register.vm
  • contentview.vm
  • contentheader.vm
  • endpage.vm
  • startpage.vm

We also added a number of velocity macro's to this skin to minimize the customization inside the customized vm's

Next step: Is add documentation of why the default vm's are customized. This will help to evaluate if all is really needed... Note that the development skills and knowledge of best practises in XWiki of the WaihonaPedia dev-team has been growing over 8 years, and some older customizations might actually not be needed anymore...

This is called the Base-Skin as it should allow different structures inside a single code base.

Custom Skins

To allow for different look and feels, especially if there is a desire for a really different layout we have the so-called Cutom Skins that will use the WaihonaPedia base skin as a base skin (that itself will use flamingo as base skin)

Currently we have two custom skins

  1. WaihonaPedia skin
  2. CdLS skin

Until now we will limit the use of custom skins by production server to ONE! So either they use WaihonaPedia OR CdLS

Both custom skins only customize a few vm's

  • layoutExtraVars.vm
  • global.vm
  • stylesheets.vm
  • footer.vm

As you can see the WaihonaPedia layout uses the global area to display a banner
The stylesheets are customized to add ONE waihonapedia stylesheet. Note that this page also has some javascript that is always used because it is set to usage on wiki. The stylesheet (which is extensive) is set to 'on demand' and included by the stylesheets.vm

The footer.vm might be a candidate to move to the base-skin as there is very little difference between the two. This is actually also true for stylesheets.vm and global.vm.

Color themes (flamingo-style)

The way WaihonaPedia adapts to communities is driven by costs!

  1. Do nothing but use of content to present your community (free)
  2. Develop a colortheme that allows for your own logo, colors and fonts
  3. Develop a skin to really change the underlying html (most expensive)

The second option is currently the only one effective to adapt to a community.

How does it work

Each waihonapedia colortheme has a large chunk of LESS in the advanced section. The LESS in advanced is 99% the same in each theme. Thus we allow only for a logo, use of the flamingo theme editor UI to adapt colors and fonts. Sometimes there is need for some more customization and we add as limited as possible some less to the END of theadvanced less below comments lines 'Color theme specific changes compared to default above (Do not remove this)'

Second is the advanced LESS limited to color and fonts!
All other CSS styling standard for each WaihonaPedia is in the ONE waihonapedia stylesheet.

To understand which colortheme will be used we have developped a number of XWiki XClasses

And the setting in XWikiServerXwiki is important!

For a guest visitor to the WaihonaPedia server the domain is used.
The domain of the user is compared to setting in XWiki.XWikiServerXwiki. If there is a so-called ALIAS domain that is equal to the domain used by the guest that domain-string (e.g. rtsyndroom.nl) is used to query the objects of SupportGroup Class in the property 'groupDomainAlias'. When a match is found the same object of the supportgroup will inspected in the properties:

  • skinForSupportgroup (skinForSupportgroup: Page)
  • themeForSupportgroup (themeForSupportgroup: Page)
  • bannersForSupportgroup (bannersForSupportgroup: Page)
  • homePage (homePage: Page)

Note that we currently do NOT use 'skinForSupportgroup'!

This will all be done in layoutExtraVars.vm with the help of some macro's in the base skin waihonapediaBaseSkin2021, most notably skinselector() in skinSelector.vm

This will then result in a supportGroupCode which will be written in a cookie to allow for the same look-and-feel during a session until four (4) cases:

  • language (localization?)
  • login
  • Use of a querystring variable supportGroupCode that will override the current theme (when different compared to code in cookie)
  • use of a alias-domain (currently only rtsyndroom.nl). Note that this will require the supportgroup to have a DNS registrar register (claim) this domain. And the DNS registrar must POINT the domain to the waihonapedia server

Login

When logging in the session variables will be extended quite dramatically. This is mainly done for performance reasons: we do some queries for the user that has logged in to see which will then be stored in a session-variable-object to avoid thes queries on each page.

Each XWiki.XWikiUser is linked to ONE waihonaPedia profile that is stored in a privat space. This makes it better compared to XWiki.XWikiUser object to store privacy sensitive data. Note that therefore this informaromation can only be used after logging in and being approved by registration in group Waihona

In the WaihonaPediaUserProfileClass we have a property supportGroup that will contain ONE key to one of the supportgroups. So this key will be stored in the cookie and (one of) the approppiate:

  • skinForSupportgroup (skinForSupportgroup: Page) (currently not used, always use skin set in Wiki-Admin)
  • themeForSupportgroup (themeForSupportgroup: Page)
  • bannersForSupportgroup (bannersForSupportgroup: Page)
  • homePage (homePage: Page)
    will be used!

Language localization

For the CdLSworld waihonapedia we only have supportgroups supporting the Cornelia de Lange syndrome. They each support regions around the world (countries). For some countries a unique language is spoken (e.g. the Netherlands, Belgium, Surinam all speak Dutch) and are all supported by ONE supportgroup.

So if a guest-user is going to www.cdlsworld.org and the language is known from the browser the XWiki session will have the xcontext.language variable. We then query the supportgroups for the language they support. If this language will match a UNIQUE supportgroup (only ONE supportgroup spoorts this language) AND thius supportgroup has (one of) the variables set:

  • skinForSupportgroup (skinForSupportgroup: Page) (currently not used, always use skin set in Wiki-Admin)
  • themeForSupportgroup (themeForSupportgroup: Page)
  • bannersForSupportgroup (bannersForSupportgroup: Page)
  • homePage (homePage: Page)
    We will use the code of that supportGroup to write in the cookie and use the appropiate colortheme

supportGroupCode (queryString)

Especially on other sites, social media or email's from the community a community can directly send people (as guest, before they login) to pages on WaihonaPedia and put their unique supportGroupCode in a queryString with the url of the page...

This code will then be stored in the cookie as if the guest is member of this community.

domain

A really good way to have your ommunity on the internet is by using a domain-name registered by a DNS Registrar.
You can then use this to have email adresses , a website (can be WaihonaPedia) and other thinks linked to your community.

For this to work we need this domain setup as a domain alias in XWikiServer page.
And in the supportgroup page we need to add this domain in the property groupDomainAlias.

The result will be that the homePage, logo, fonts and Colors of that community will be used when the lonked page is visited!

Note that if that community also has a supportGroupClass page on other waihonapedia servers you can use that domain (or the default-domain of that server) in the property: groupExternalDomain. This will result that links to that supportgroup will point to the correct server (if that server is a WaihonaPedia!)

About the website contents

All of the information on this WebSite is for education purposes only. The place to get specific medical advice, diagnoses, and treatment is your doctor. Use of this site is strictly at your own risk. If you find something that you think needs correction or clarification, please let us know at: 

Send a email: info@cdlsWorld.org