The graphical interface since SPIP 1.8

The graphical interface of the private area has been largely reworked in version 1.8. Leaving aside the purely graphical aspect of the interface (which does not need a detailed explanation), we list below some of the new ergonomic elements that should make things easier for both beginners and expert users.

“The «Un-seul-click»™ interface for the SPIP-user”

One of the main improvements in this version is the reduction of the number of clicks needed to access various pages. Many pages are no longer “hidden” as sub-options of other pages, but are directly accessible from the menu bars. This is intended to help both expert users who will "save" time accessing pages, and also beginners, by making the full range of pages more visible.

As is usual with SPIP, we have tried to avoid confusing beginners as they learn how to use the interface, whilst aiming to facilitate the work of more expert users.

The most obvious change from previous versions (since version 1.4) is the disappearance of the second navigation bar. From now on, all the elements of this “second bar” will appear as pop-ups by way of browsing through the main buttons. (These elements have been reorganised according to simplified principles, much like returning to the SPIP 1.0 interface!). Thus each and every page of this “second bar” becomes accessible with a single click from any other page from the private space.

Following the same logic, the coloured bar, apart from the interface options for colour and screen size, contains various pop-ups containing some useful information and control buttons:
-  navigation through the entirety of the hierarchical structure of the site’s sections;
-  a reminder of articles in preparation or proposed for publication, as well as the "create an article" and "create a news item" buttons;
-  the search interface;
-  shortcuts for the internal calendar and the messaging system.

A number of small [+] buttons appear at various places in the interface, especially on the “Launch pad” page. These link to pages intended for more expert users. Indeed, due to the absence of any written explanation one discovers the use of these buttons by experimentation. For instance, if next to a list of articles, the button will link to the page listing “all your articles”; when next to a list of news items, it will link to the page managing the news items, and so on.

Changing status in the lists

An interface for changing the status of items in a list (mainly articles) allows administrators to change a series of items without needing to navigate to other pages. This operation, which is instantly effective, makes it possible to change, for example, the status of all the articles in a section (for example, publishing or de-publishing them) without moving to another page.

Thumbnails and rotations

If your web server supports image processing functions, SPIP can use them to graphically “illustrate” the private area:
-  logo thumbnails in the lists of articles, news items and sub-sections;
-  authors’ logos in the internal forums.

These graphic functions make the interface clearer and more pleasant; the small logos help you to differentiate between items:

Furthermore, these functions allow you to rotate images in the portfolio interface, using the buttons at the top right-hand corner of each image:


Aside from the graphical changes to the internal calendar, five small buttons for ergonomic adjustment have made their appearance:
-  small clocks expand either the morning or afternoon display;
-  “plus” and “minus” magnifying glasses allow the user to zoom in and out.

Pure text interface

SPIP 1.8 introduces a new version of the interface intended for the visually impaired. This version is considerably “lighter” than the “text” interface introduced with version 1.4. (The “text” interface is rather suited to slower connections, but nevertheless for users with unimpaired vision.)

You can access this interface by the address:/ecrire/oo, or by following the link "Show the simplified text interface" that appears in browsers lacking Javascript support.

It is possible to go back to the usual interface by following the link “back to complete graphical interface”. Note that you would then go back to the so called “simplified” view.

The developer team (spip-dev mailing list) is particularly interested in hearing feedback from users’ own experiences. We desperately lack personal accounts from users concerned by this interface which would help us improve the system according to their needs.

Note that this interface is also well adapted to very slow mobile and/or small screens (smartphones, PDAs, etc.).

Bigger spaces (or not...)

The “Text” box of the article editing form adapts itself to fill the entire height of the window. This, if you are using a screen bigger than 800x600, will give you much more space in which to work on your article.

In the same way, the “Quick browsing” panes fill the whole height of the window.

Dynamic Forms

Many forms are now dynamic: validation buttons, check boxes and text zones appear or disappear depending on the choices a user makes.

Thus, when displaying an article, some “submit” buttons will only appear when the choice in the adjoining drop-down menu is changed. You may also notice similar forms in the site configuration pages. For example, in the box “Sites referencing and syndication”, you will notice the configuration options change instantly according to whether you select “Manage Web sites directory” or “Disable Web sites directory”, and whether or not you select “Use automated syndication”.


The principle of the statistics pages has not changed. But there are now “zoom” buttons for following the level of visits.

And the “visits distribution” page is now much easier to understand!

For webmasters...

HTML enthusiasts might ask how the big navigation icons of the private area can change colour according to the user’s choice. This effect is made possible by using the PNG24 format and by making the most of the precise transparency allowed by this format (alpha transparency).

It is however well known that Microsoft Internet Explorer does not support the alpha transparency of PNG24. However, SPIP’s private area uses a trick which allows Internet Explorer to use this alpha transparency. Those who wish to could use this trick for their public site when they creating their own templates.

The trick is to create a CSS class for the images involved (please note that there is no risk in applying this class to images in formats other than PNG. The class will simply be ignored and won’t cause any change to those images).

This class may be defined as such:

.format_png {
	behavior: url("");

which you apply in tags: <img src="..." class="format_png">.

You may notice that this class uses a characteristic of Internet Explorer: calling a behavior. The file in question (/ecrire/ is a JavaScript file located in the private area . In order to use it outside the private area, this file should be copied to the root of the site.

Opening this behavior file, you will see that it calls a /img_pack/rien.gif file. You should therefore also copy this file from the directory /ecrire/img_pack/rien.gif and change the path in the copy of the file installed at the root of the site.

So you don’t like green?

everyone to his or her taste...

The interface colours can either be replaced by other colours, or have other colour schemes added. In order to do this, you should place variables in the /ecrire/mes_options.php file:

global $couleurs_spip;

// replace an existing colour
$couleurs_spip[1] = array (
		"couleur_foncee" => "#508A72",
		"couleur_claire" => "#A5DFC7",
		"couleur_lien" => "#657701",
		"couleur_lien_off" => "#A6C113"

// add a new colour
$couleurs_spip[] = array (
		"couleur_foncee" => "#949064",
		"couleur_claire" => "#DFDBA5",
		"couleur_lien" => "#657701",
		"couleur_lien_off" => "#A6C113"

Here, we have replaced the green (variable “1”. The standard colours are numbered from 1 to 6). The second example adds a new, extra colour: ($couleurs_spip[] adds a new entry to the array $couleurs_spip without overwriting any existing colours.

Author George, Abla Published : Updated : 26/10/12

Translations : català, corsu, English, Español, italiano, Nederlands, slovenčina