Here is what you 'll find in the zip file you download:
1) skins folder: in this folder there is the beyondcss.zip which is the zip file with the skins you have to upload to your portal. 2) containers folder: in this folder there is the beyondcss.zip which is the zip file with the containers you have to upload to your portal. 3) about.htm: installation info, license and copyrights.
When you 'll have both skins and containers installed, in your admin > site settings or admin > skins you 'll find the following:
Skins: beyondcss : 1column (1 column skin without menu. You can use this skin for the registration page.) beyondcss : 2columns (2 columns skin with vertical menu. You can use this if you don't need a right pane. Panes available: LeftPane, ContentPane.) beyondcss : 3columns (3 columns skin with vertical menu. Panes available: LeftPane, ContentPane, RightPane.)
You 'll find three more skins with a _speerio addition in the name where instead of the CurrentDate skin object there are the Speerio Skinergy accessibility tools.
* All skins include also a BannerPane in the header.
Containers: common : A common boxed style container. notitle : The same boxed style container without title.
How the Speerio Skinergy accessibility tools work:
The tools don't need additional skins to implement the accessibility options. For the skin's width and font size there is a prefs folder in the skin with the CSS styles that will override the default styles.
The color templates implementation is not that simple... Two additional files needed to make it work: the skincolor.css and palettes.xml. In the skincolor.css we set the CSS styles we need to have dynamic values. In the palettes.xml we set the color values for each palette.
Example:
For example if we want to have different body background color for each palette we do the following:
In skincolor.css: html,body{background:[Background]}
The dynamic color value above is the [Background], so when we 'll choose the "Hi-Contrast" pallete, the [Background] value becomes #000 as you can see in palettes.xml below.
In palettes.xml:
< Palettes > ... < Palette name="Hi-Contrast" > < Color name="Background" value="#000" / > < Color name="Foreground" value="#FFF" / > < Color name="Link" value="#FFF" / > < Color name="LinkHover" value="#FFF" / > < Color name="Link2" value="#FFF" / > < Color name="Link2Hover" value="#FFF" / > < Color name="Color1" value="#036" / > < Color name="Color2" value="#369" / > < Color name="Color3" value="#69C" / > < /Palette > ... < /Palettes >
If you need more clarifications on how the BeyondCSS skin works, so you can create your own variations, just let me know and I 'll try to help.
Cheers,
Vasilis |