Hoist

Hoist issue Styling with CSS

603 state > doomed

milestones

comments

date author attachments
2013-07-06 11:40:44 +0200 jfw 0

A Better Way To Handle CSS

TODO: document how to deliver the CSS using predefined destinations (like .css). – Which includes documenting how to set up those first.

2013-07-06 11:25:37 +0200 jfw 0

It was felt to be important to decouple changes to the "skin", the visual appearance of the site, from changes to the functional core source.

How exactly this is implemented might be subject to change. It deploys a little magic, which will be covered in future docs. Here you are walked through for two purposes:

  1. Changes to the CSS style are usually seen mandatory soon in the process.
  2. It's a good chance to introduce some basic handling.

How It Works

The CSS code as included in the core is only a default. The code will first look for a RDF:Sequence by the name ` CSS 1000 ´ and include all literal values declared to be container member of this sequence.

This CSS 1000 sequence is declared in the initialisation.

How To Add Your Style

To actually add your style as a container member to the CSS 1000 sequence, several steps are required:

(Temporary) Enable RDF Editor

See Enabling menu entries and enable the view spo.

This view gives a rather low level access to the RDF triples.

We will use it now to locate the RDF sequence "CSS 1000", attach a plain text with the desired CSS code and declare this code as a container member:

Dig Up The Sequence

Initially the spo view contains a form labelled "search".

Select A Predicate

Therein you find (only) another one "select any property". (But soon you will find that this is only the middle (predicate) field out of the triple selection.

Towards the end there is an entry member. Follow that link to refine you predicate selection.

Given that there is a selected predicate (member) now, the subject selection is enabled: Above the predicate selection there is now also a subject selection. Since "member" is rather generic, i.e., any resource can be the subject of the member property, you get a "select any resource" selection.

But in fact you learn here, that you want to mostly ignore such broad listings and focus on better refinement.

Next at the page the predicate selection has slightly changed: it displays "member" not as selected (together with some navigation to modify the current selection) followed by a selection for further refinement.

Therein lives the container member property. Select it now.

Select A Subject

The container member predicate is only applicable to subclasses of RDF:Container. Therefore the overfull subject selection from the last step now boils down to only a few entries. Among them "CSS 1000", which we select now.

Create An Object (The CSS)

Now the object selection dialog appeared under the predicate selection.

First we notice that again any resource could be in object position of the "RDF:ContrainerMembershipProperty". Again we don't want to browse that one.

Even worse: the Object we want to add is not yet there. This gives a chance to introduce how to add it:

The idea would be that we continue to refine the selected subject ("CSS 1000") before we are ready to actually declare the membership property. To deselect the property click the -Link at the right of the selected property.

We are back in predicate selection, but now with a selected subject.

To attach the CSS code, we (ab)use the "comment" property. Once selected, find two ways to add your code:

  1. Use the file upload.
  2. Cut&paste into the textarea.

Beware: The text area is by default handled as "markdown" encoded text. For CSS that is not a good idea at all! So before you enter the code, be sure to select plain text from the selection atop of textarea.

Declare The Membership

After submitting you CSS as a comment, you are back at the RDF editor with the subject still selected.

You could now follow the steps above again to select the container member property again. But that would leave you again with the bulky "select any resource" option to browse manually until you find you CSS.

There is a better way: in the lower region of the page all four properties of an RDF tupel (subject, predicate, object and the identifier for this very triple) are ready to be selected in any of the positions.

There are four groups of radio buttons (whereby the details of the user interface are very experimental now) under the headings "<" for the triple itself, "s", "p" and "o" for subject, predicate and object. Each group has three columns for s-,p- and o-position. (Plus the s-position in the s-column has second radio button, which deselects the pre-selected value.)

Keep the CSS 1000 selected as it is plus select your comment in the o-column at o-position (the rightmost radio button that is).

Now push the "refine" button. You land again in the RDF selection. This time with subject and object readily selected. Only a much shorter list of predicates is applicable, just seven entries are left.

Among them: "member", following again (as before) select "container member" (in the "refine" dialog; the "new" dialog underneath is useful sometimes, but not now). And submit!

Done! You CSS is active now.

# 1
Enabling menu entries
Change The Project Title
Backup You Work - How to take a snapshot
Styling with CSS
A Better Way To Handle CSS
News at the homepage.