Installation

Replace "en" with the language code of your site's main language.Right-to-left rtl direction for RTL languages are supported, see RTL Support

Configuration

The SideBar menu position is by default on the right side.To show the menu on the left side, add to config.php:$AmberConfig['menu'] = 'left';

Many customisations can be done via CSS rules, ideally put into pub/css/local.css, like the following examples. Create local.css, if you do not have it. All rules in local.css are applied after the skin's own css files are loaded, and will overrule any matching rules.

Setting a custom background image in the header:

myheaderimage.jpg in folder pub/img/. The path is relative to pub/css/local.css.

Custom mobile sidemenu, top actions and top search form

Here are two examples for a different colour scheme for the side menu, top action menu and top search form. Note the @media screen condition, as we do not want this to affect desktop (wider) screens, just the mobile and tablet screens, which have a slide-out menu and pop-up search form.

note the plain number, no px in the above. This is for the skin javascript function, which handles the width on window resizes.

Preventing font-increase for very wide or full screen windows:

(setting it to same values as for standard desktop window widths).
@media screen and (min-width: 75em) {body {font-size:1em;}}

Custom fonts for header, headings and text

Google Fonts offer a vast selection of stylish fonts to use in web pages, so an admin person may want to choose some font families which suit best for a particular site.
I've choosen the serif font family Lora as general text font for good readability, and Hind for headings. The site header is using PT Sans. All are imported via a css rule at the top of skin.css. Remove or replace this rule at your liking:
@import url(https://fonts.googleapis.com/css?family=Lora:400,400italic|PT+Sans:700|Hind:500);

Page Elements and Side Menu

The skin uses Site.SideBar (or a Group SideBar page) for a main right-hand side menu, as is traditional with PmWiki. Creating a page Site.PageElements allows customisation by the admin for all important page elements. Look at the installed Site.PageElements as an example for some customised page elements.The Page Elements sections:

One can also create sections in group-specific PageElements pages, like GroupName.PageElements, which will be used instead of the section with same name in Site.PageElements.If it is not desirable to allow this, please add to config.php:

$SkinElementsPages = array('Site.PageElements');

which will exclude any use of <GroupName>.PageElements.

Images

Images are by default displayed with a slight box shadow. For individual images style %noshadow% will suppress the box shadow, or apply class noshadow to a div. To configure the whole site for showing images without box shadow add to pub/css/local.css:

if a css injection via $HTMLStylesFmt['rtl'] = "..."; is present in config the skin will switch to RTL. Note this method is not encouraged, as Amber will load all necessary css rules for RTL from a short style sheet (skin-rtl.css).

if this recipe is used, $HTMLTagAttr will be set according to the user language choosen, and if it is one of the RTL languages, and the page contains text in it, then the skin will switch to RTL.

classes 'rtl' and 'ltr'

these classes are provided by inclusion of scripts/xlpage-utf-8.php, which will be needed in any case for support of RTL languages (see UTF-8). 'rtl'and 'ltr' classes can be used to specify direction of text independently of the general text direction within a page, for example:

see Internationalizations for adding special translation pages. You can add your own phrases to such pages. You can also change text of Amber's Site.PageElements, write the site header in your rtl language etc.

this variable is usually set in config.php and will appear as part of a page's title tag, which is seen in the browser's tab. $WikiTitle can be set to a rtl word or phrase, but only if care is taken to save the config.php page encoded in UTF-8 (NO BOM). Your text editor needs to support this.

Note that the skin has a number of layout classes, which result in the layout adapting to the screen width. See grid layouts below.

Tables

The use of tables can be tricky for a responsive design. It is best to avoid tables for the purpose of positioning page sections, and use some method of responsive grid as outlined below.
Horizontally wide tables will receive a horizontal scroll bar, to avoid content not being accessible.

Tables and table cells can be styled using a number of class names:

(none)

default, show no borders.

class=lines

show a horizontal line under each row.

class=grid

show lines both horizontally and vertically around and within the table.

class=zebra

show every odd row with a light grey background.

class="zebra grid"

show every odd row with a light grey background, and show both horizontal and vertical lines.

border=1

show borders, borders are not collapsed (not thin).

Positioning divs into a responsive grid layout

These grid float classes are experimental, and I would love your feedback for improvement on this system! HansB

The skin offers a range of shorthand style classes for easy positioning and proportionally sizing divs into a grid system, all defined in the grid.css file. Content layouts with two, three and four columns or div boxes floating side by side can be created, as boxes with margins in between, or as tiles without in-between margins. On a mobile in portrait orientation these floats will be arranged in a single column. For instance

>>lf50<<

this will create a left-floating div with 50% width.

>>rf25<<

this will create a right-floating div with 25% width.

>>lf33 clear<<

this will create a left-float div with 33.33% width, and it will not float into space above (useful if it is the first floating div in a row).

>>lfx33<<

this will create a left-floating tile (no space between such tile divs) 33.33% wide.

All the grid float classes have padding, and classes like lf50, rf33 have a margin, so the boxes leave a little space in between. Classes like lfx50, rfx33 have no margin, so will look like tiles, touching each other. To easily remember: lf stands for left float, rf for right float, the attached number for the nominal percentage width, of which there are:

Boxes behaving as links (link boxes)

To create link box divs, which act as links when clicked or tapped, use style class link on a div, and put exactly one link into it, plus optional text and optional image. Put other styles to the div if needed.

The rf and lf style class in front of an image inside a link class box adapts according to device width:

for mobile portrait mode the image will be a third wide of the full-width box.

for mobile landscape and other screens it will be half the width of the surrounding link box (which may well be less than full width, like half or third width of the content area)

if it is used for an image inside 20% (fifth width) boxes, the image will not have text float beside it (as there is little space), but have text below it instead, when viewed in anything but mobile portrait mode.