SearchWiki:
Printable View

Netstreams < Skins > NewsPaper   (talk? | users? | test page | RWD? | set as default | unset | validate: HTML, CSS)

Update

Updated on 2007, 14 January: general revision, compatibility with pmwiki 2.2. Updated on 2009, 19 April: Css modif for width in Firefox

Attempt to be the default skin was not successful, though PM has finally agreed for a similar color scheme, but have not retained other points nor the `SideBar presentation. Also in Neutral skin, the font size is the users default instead of being fixed.

Overview

This skin was a proposition to be the default distribution skin.
It is closely derived from the pmwiki skin, with some modifications reviewed below.
One of its objective is to be usable by most people for any wiki use, hence the not very fancy name 'Neutral'.

It is also derived from the work done for skinnice module, in SkinConfig. Please have in mind that a lot of parameters as defined below can be modified by a simple CSS file generated by this module. - New revision may not work completely with Skinnice -

Design objectives

  • Maximize the page area.
  • Choose a way to try maintaining a good readability and being acceptable by most people.
  • Tentative to improve the aesthetics

Install

Install the NeutralSkin.zipΔ content in /pub/skins/neutral and set in local/config.php the following

 $Skin = 'neutral';

The template

Modifications to the pmwiki template :

  • The `RecentChange link is replaced by a symbol _Δ_ which is sufficiently appealing (?) to invite the user to click on (also there is a bullet comment associated).
  • A link to an index page is set in top bar. It may contain, by example the following text:
  (:pagelist fmt=dictindex list=dict:)
  • Backlinks (page referenced by:) link is also set in the top bar
  • $Title is replaced by $TitleSpaced, to have titles with separated words

The CSS file

The margins have been reorganised in order to have no borders on colored areas (say no margin on body element, margins (padding) are set in wikileft, wikibody and others containers). The margins also have been significantly reduced at 8px or 0.5em, instead of 20px in the pmwiki skin.

The color scheme have been chosen to be quite neutral, and with no cultural involvment. The grey is often used in computers and is less aggressive than any other color. Also a slighltly greyed background is less visually tiring than a white one, and preserve a good contrast.

The title size have been reduced from 200% to 132%. With the use of (:title:) directive, which favor more verbose titling, and also the fact than language others than english are often more verbose, there is a real need to decrease the title size.

The headers police size have been significantly reduced, and also their vertical spacing.

Header 1 <h1> is now 132%

Header 2 <h2> is now 124%

Header 3 <h3> is now 116%

Header 4 <h4> is now 108%

Miscellaneous margin handling have been done, in order to gain some space without giving a too overcrowded look.

And the most delicate point, which might be the one mostly discussed, the link color handling. The standard link colors are well known from most users, so that ease the preliminary contact. Though, they don't look very nice and are quite intrusive in texts, so another proposal is done here:

  • Background color when hovering link is set to yellow.
  • Links remained underlined in the text.
  • Non visited links are set in italic and dark grey color.
  • visited links are back to normal font style and black color.

The result is less visually intrusive and remains significant for the reader.

Hacks

Playing with CSS is like going through a bug labyrinth. Here the ones dealed with in this skin:

  • Headers vertical intervals cannot be set in em or % units, should be in pixels.
  • On IE 6, due to the block display of links, you should set a width of 99% to avoid the disparition in some cases of the solid line on the right of the menu.
  • On IE 6, the right padding should be set in pixels, because if set in 'em' units, when text is right-justified, the padding is reversed, say, the command menu go out of the table element and then out of the screen.

Contributor

PRZ

Please inform if there are any troubles in your browser.

Category: Skins, PHP72
Edit Page - Page History - Printable View - Recent Changes - WikiHelp - SearchWiki
Page last modified on September 25, 2017, at 05:25 PM