Storga Style Sheets

Warning: the 'Styles' part of Storga is still experimental.

Apply a stylesheet

A style sheet is defined in the 'Styles' part of the settings page of each Storga site.

To apply a style sheet to a Storga page, use the 'Style' control of the 'Page F7' button
To apply a style sheet to a block of the page, for example a form, we use the 'Style' control in the 'Display parameters' part of its properties.
Warning: in the current version of the code, only the form block has the 'Style' field in its properties, but this can be generalized to other types of blocks if necessary.

Defining a style sheet

Folding UI style sheets

Let's start by describing a Folding UI stylesheet (not to be confused with Storga stylesheets).
Unlike web CSS, a Folding UI style sheet is not a set of rules, but the set of parameters that are used to configure the set of graphic elements (button, title, etc.) in their different forms (active , inactive, hovering, etc.).

The syntax of a site key is like this:

graphical_element_type / sub_which_form / what_parameter ...

For example:

button / standard / text / size

▸ Exhaustive list of parameters of a Folding UI style sheet

Folding UI stylesheets features

A Folding UI style sheet allows for a type of element, for example a paragraph, a title or a link or a button, to choose:

For tables, there is a first series of parameters which is used to define the background of the table globally, then a second which is used to define the background of standard cells, and finally a third that is used to define the background of title cells (this last series is probably not used by the Storga 'table' block, but is used for the formatting of the Storga 'report' block).

Storga style sheets

For now, a Storga stylesheet includes:

Structure of the additional UI definition field

Each Storga stylesheet includes a primary Folding UI stylesheet, plus 10 secondary Folding UI stylesheets.

The primary Folding UI stylesheet serves as the default definition for anything not defined in a secondary Folding UI stylesheet.
In particular, the main Folding UI stylesheet defines the standard paragraph block, as well as the general title of the page, but not the subheadings which are defined in secondary Folding UI stylesheets. The explanation for this inconsistency is that Storga uses three levels of subtitles, while a Folding UI stylesheet only defines one.

Additional UI definitions field syntax

The additional UI definitions field is provided as a series of lines of type key, space, value.
When we want to modify a parameter of one of the secondary Folding UI style sheets, we add at the head of the line the identifier of the style sheet followed by a colon symbol, without separating spaces.
Here are a few examples:

para/text/font noto/NotoSans-Regular
para/text/size 5

title/text/size 20

header1:header/text/font/bold noto/NotoSans-Regular
header1:header/text/color #80A080

button/standard/box/image mycorp/myicon.png

comment:table/header/r1/round 0
comment:table/header/r1/color #FF8040
comment:table/cell/r1/color #FFC080

You will notice that the colors are specified using one of the web notations, namely a hash symbol followed by 6 digits in hexadecimal to define the three components red, green, and blue.

The page must be reloaded at the Storga level for the style sheet changes to be taken into account.

Fonts

In the previous example, we specified the font 'noto / NotoSans-Regular'.

Warning: In this experimental version, this supposes that we add in the Storga tree structure of the client workstation a file 'pliant_data / pliant / font / noto / NotoSans-Regular.sfd'
This will be changed in the future, and the font will be provided directly via a .ttf file in Storga, but I haven't written the machinery for it yet.

To convert a .ttf font to .sfd, use the 'Fontforge' software
To install it on Debian Weezy, the command is 'apt-get install fontforge'
The conversion can be done in two different ways:
Either we click on the font file to load it into fontforge, then we select File save as,
either we use the following tosdf.pe script, which allows to convert a set of fonts via the command './tosdf.pe * .ttf'

Background images for buttons and more

In the previous example, we specified the image 'mycorp / myicon.png'

Warning: In this experimental version, this supposes that we add a file 'pliant_data / pliant / icon / mycorp / myicon.png' in the Storga tree structure of the client workstation
This will also be changed in the future, and the icon will be provided directly via a .png file or photo in Storga, but I haven't written the machinery for it yet.

If you change a font or an icon, as opposed to adding a new one, you have to restart the Storga client for the new version to be taken into account.

Header and footer

Here's how to add a header.
We create a Storga page, with the header. It can for example contain a single file type block, with an SVG graphic file in it (at the file block properties level, select 'offer a link to open / edit: no' and 'Show content: yes').
Next, we select the page, ('Copy URL' icon in edit mode), then paste it in the 'Content added to page header' field of the style sheet.

Background

To change the background color of Storga windows

window/ground_color #C0C0C0
window/left/box/r1/color #FFC0C0
window/top/box/r1/color #C0C0FF

'window / ground_color' is the background color used to start any drawing.
Then each window has a box, which can come over it.
By default, the background window has an empty box, and the others have as mode 1, which means filling the rectange 'r1' only.

So we could have replaced:

window/ground_color #C0C0C0

by:

window/main/box/mode 1
window/main/box/r1/color #C0C0C0

Fleas

The bullets of the links are not managed by the style sheets: to remove the bullet in front of a link, write 'none' at the level of the 'Puce' property of the link.

Additional CSS definitions field syntax

Modifier la feuille de style CSS générée par Storga

CSS rules define rendering when the client used is a web browser as opposed to the native Storga client.

Each CSS rule is given on a line in the 'Additional CSS web definitions' field of the stylesheet.
For details, refer to the specific CSS documentation available on the web.
Here is an example:

span#import_top p { font-size: 10pt }
span#middle { display: block; width: 500pt; margin-left: 16pt; margin-right: 16pt }
h1 { font-family: Times,serif;  font-size: 24pt; font-weight: normal; color: #6060A0; text-align: center }
h2.header1 { font-family: Times,serif; font-size: 18pt; font-weight: normal; color: #6060A0; margin-left: -16pt }
h2.header2 { font-family: Times,serif; font-size: 14pt; font-weight: normal; color: #6060A0; margin-left: -8pt }
h2.header3 { font-family: Times,serif; font-size: 10pt; font-weight: normal; color: #6060A0; margin-left: 0px }
p { font-family: Palatino,serif; font-size: 12pt; line-height: 140%; margin-top: 12pt; margin-bottom: 12pt; text-align: justify }
td { vertical-align: top; padding: 4pt }
table.noborder>tr>td { vertical-align: top; padding: 0pt }

Modifier le code HTML généré par la page Storga

Souvent, pour pouvoir exprimer plus facilement les règles CSS à appliquer, on désire ajouter l'attribut 'id' ou 'span' à certains éléments spécifiques de la page.
Au niveau de tous les blocs Storga qui disposent d'un attribut 'Sous style' (paragraphe, table, champ de saisie, etc), on peut indiquer une valeur sous la forme de deux mots, conformément à la table ci-dessous, qui modifiera le code HTML issu de Storga, en encapsulant l'élément dans un tag <div> ou un tag <span>, avec au choix l'attribut 'id' ou l'attribut 'class'.