MidCOM style editor

New on-site style editor is on its way.

Since we are slowly starting to deprecate both Aegir and Spider Admin, we are needing several new features. Style editor is one of those. I have been working on a new way to edit styles with Bergie.

At the current phase style editor is mainly for content style editing.

Main features

  • On-site editing
  • Always up-to-date default style elements
    • style elements are fetched from local style files, so that they are always compatible with the current system configuration and component version
  • Show where else the style is in use
  • Remember the last viewed screen

Bergie is also working on implementing a file handling interface for e.g. stylesheets and image files.

How does it work

Access it from toolbar

Depending on the location you are in, there might already be Edit layout template link on the folder menu on the toolbar.

Go to editor

If this isn't the case, select Edit topic from the toolbar. Then select [!New layout template] from Style template dropdown

Create a new style

Save the edited folder to create the new style. This new style will be named after the currently selected folder. After this phase there should be now the link Edit layout template in the folder menu.

Select what to edit

Style editor consists of two separate screens. The first page is for selecting, which style element should be edited. Each of the components - as we proceed writing the documentation - will describe which style elements will be used and to what purpose.

Some fancy features were implemented:

  • Twisty style hiding and revealing
  • JavaScript and anchor based 'remember this view' for linking purposes
    • uses anchor locations to point out, which view was open
  • A list of the locations which use the same style template
  • A list of components, which use the same style template with a full list of style elements

Developers ho! You need to create documentation/style.en.txt to display the help text.

At the moment only a few of the components already have a textual information on what does a specific style element do.

Select the style element to edit

Edit the style element

After selecting the style element for editing, write the changes and click on save. Admire the results and repeat phase 6 as often as your client requires.

Edit the style element

Back