wiki:Creating_a_new_Style

Creating a new style for eXe

Creating a new style for eXe is quite a simple. You should already be familiar with the basics of HTML and CSS to create a new style.

Each style in eXe is contained within its own directory. These directories can normally be found at:

  • c:\program files\exe\style - for a Windows install
  • /usr/share/exe/style - in Linux.
  • within the eXe application bundle at Contents/Resources/exe/style - on OS X

These default locations can be overridden by changing the webDir configuration in your exe.conf file. The styles will be found in the style subdirectory of webDir.

Inside this style directory are directories/folders for each individual style. These directories contain the following:

  • a complete set of icons
  • 3 style sheets:
    • base.css - styles that are present across every style
    • content.css - this CSS controls most of the unique characteristics of each style
    • nav.css - used by the Web Export option to create the navigation

If you create a new directory/folder within the styles folder the name of this directory will be automatically picked up by eXe when started as a new style and added to the Styles menu. The easist way to start developing a new style is to copy content.css and nav.css from one of the existing style directories into a new directory that will contain your new style, then start up eXe. You should notice that you new style name has been picked up in the style menu and is quite functional, although at this point it will be the same as the style you've copied it from. Edit content.css and refresh the eXe content pane. To refresh just the pane, right click and select This Frame > Reload Frame.

If you do create a new style please consider contributing it back to the community to use.

CSS Details

Based on Default style, content.css

IDs:

#nodeTitle - styles the title of your page (same as the title of the node); usually this is a colour and font-size.

#nodeDecoration - whether or not the above title has any decoration or not, ie. an underline, padding, whether it is aligned left or right, etc.

Classes:

.emphasis 0,1 - every iDevice has an emphasis class associated with it. emphasis0 is no emphasis at all, this is what the Free Text iDevice would have or the Wiki iDevice if the user selects "no emphasis". Generally the only style associated with the class emphasis0 is some padding on the bottom of the element to seperate it from the next iDevice. emphasis 0 does not include an icon. Most other iDevices are emphasis1. This defines the border, background colour, padding, etc.