Skip to content
This repository has been archived by the owner on Jul 2, 2018. It is now read-only.

Style your theme

Jump to bottom
Natasa Bulatovic edited this page Jul 26, 2016 · 2 revisions

This guide should helps administrators and developers to create a new theme / style for imeji by editing the default imeji CSS.

Global Information

The imeji CSS is generated by the CSS Authoring Framework Compass. It uses SASS which generates well formatted CSS. You find the imeji SASS project in github → imeji_sass.

Installation Guide for Compass

A good and short install guide for the authoring framework will be found on compass webpage. Clone imeji_sass into your local workspace and read the notices from README. There are also tips for trouble shooting during the install process.

$ git clone https://github.com/imeji-community/imeji_sass.git

Architecture of imeji_sass

All files with an "_" at beginning will include hierarchically. The file „_combinedStyles.scss“ summarize all single files, which describes the different usages, and compass given comfort functionalities. You find in „_defs.scss“ for example all global descriptions, which are not lists, icons, menus, tags or external overrides.

File hierachy

_vars.scss contains:

  • all variables for major css definitions _defs.scss contains:
  • global definitions
  • "menus" - at end of file
  • "lists" - at end of file _combinedStyles.scss contains:
  • "compass/reset"
  • "compass/css3/border-radius"
  • "compass/css3/transform"
  • "compass/css3/box-shadow"
  • "compass/css3/images"
  • "mixin"
  • "tags"
  • "icons"
  • "defs"
  • "overrides" app.scss contains:
  • "vars"
  • "combinedStyles"

Project file

All files in folder sass without an „_“ at beginning are project files and will compiled to the folder stylesheets. The default app.scss summarize _vars.scss and _combinedStyles.scss.

Config / Style your theme

At first create your own compass project in form of a copy from default or create a new child theme and handle all includes. To configure your own theme use the „_vars.scss“, to describe all major styles. You can change there for example the logo file, colors, font-size, path to icon folder, content width, etc.. If you disagree with some styles feel free to write overrides and include them at last on your project file. The advantage of a new overrides file is the possiblity to update your project with changes of default. Note: For a fast editing, you can use a text editor with the “find/replace” feature, and use the colors information at the top of the file as template. Note: Besides basic colors definition, imeji defines “shades” colors. For a simpler implementation, imeji uses rgba colors, which is a CSS3 features supported by IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+. If your imeji instance must support older browser, you will have to replace this rgba values by HEX values.  

CSS Units

To offers a dynamic and cross-browser style, imeji uses mostly “em” or percent values to define sizes. We strongly recommend to keep the same units. The exception is the definition of icon dimensions.  

Change the icon path

// ICONS
// $icon-path: "../icons/"; // relative path to css source
$icon-path: "/imeji/resources/imj_iconset/"; // path for imeji software resources

 

Change the logo file

// LOGO
$logo-path: $icon_path; // "../logo/";
$logo-file: "logo_imeji.gif";
$logo-position-horizontal: -1.909090em;
$logo-position-vertical: 0;
$logo-width: 13em;
$logo-height: 5em;

 

Change the default font-size

// DEFAULTS ... $font-size-default: 75%;  

Change the maximum content width

// PAGE WRAPPER
...
$page-width-max: 84.0909em;

 

Child-Theme

If you have questions for a child theme please take a look at the edmond folder. Edmond is an imeji instance and uses the default stylesheets with their own config files.

Compile the Compass project

Please read the manual from compass for detailed information. There are different ways to compile the scss to CSS. One way is to configure the config.rb in your compass project or on the other hand you can compile on console manually with the different options. You can also start a watch job to build the CSS on the fly.

$ compass compile <default/>
$ compass watch <default/>

 

Use CSS in imeji

The first way is to compile your CSS and embed it via the admin interface in the imeji software: Admin – Configuration Edit – CSS. The second way is a copy of your CSS to the imeji resources: _imeji – src – main _– webapp – resources – css – theme_default – app.css

Used icons

All icons of imeji are sourced by the Max Planck Digital Library (MPDL) „Icon Library“. The default icons stored also in the imeji software under_ src -main – webapp – resources – imj_iconset_. Please use the URL „/imeji/resources/imj_iconset/" as prefix to use them. The name of the library is the hex code of the color (currently 6CAE2F, BBBBBB, D80000 and F0F0F0). Each icon library is defined for one color. Example for usage: e.g. background-image: url(„**/imeji/****resources/imj_iconset/**HEXCODE/imj_iconAbcdef.ghi“); Global icons (e.g the logo or the favicon) are saved in source code under src – main – webapp – resources – icon. If you support imeji with an external css you should modify path to your icons in the _vars.scss.

What means “imj_”

The string “imj_” is the prefix for imeji to distinguish imeji’s css class or javascript functions from third-party definitions or packages. If you define a new css class,  please use the prefix.

Clone this wiki locally