extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 16:03:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

new README about how EGroupware uses images and css in templates

Browse Source
This commit is contained in:
Ralf Becker 2013-11-12 11:26:06 +00:00
parent 6ae755b1aa
commit 1434a55e7e
1 changed files with 119 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
phpgwapi/templates/default/README-less-css Normal file
View File

@ -0,0 +1,119 @@
/**
* How EGroupware loads images and style-sheets
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Ralf Becker <rb@stylite.de>
* @package phpgwapi
* @version $Id$
*/
EGroupware uses following directory structure:
=============================================
Applications:
------------
$appname/
+- inc/ directory containing PHP classes (class.$appname_$something.inc.php)
+- lang/ directory with translations egw_*.lang
+- js/ directory containing JavaScript
| +- app.js get automatically loaded by eTemplate and should extend phpgwapi/js/jsapi/app_base.js
|
+- setup/ information about installing (setup.inc.php, tables_(current|update).inc.php, ...
+- templates/
+- default/ directory containing templates eg. eTemplate *.xet files
| +- images/ directory with app specific images, used by all templates not incl. image in own directory
| | +- navbar.png application icon shown in navigation bar
| +- app.css app specific styles automatic loaded, if template does not include own one
| +- app.less (optional) source for CSS preprocessor less, from which app.css is generated
|
+- $template/ directory containing template-set specific templates
+- images/ template-set and app specific images, overwriting these in default, incl. navbar.png
+- app.css template specific CSS file, get prefered over default/app.css NOT loaded additinal
+- app.less (optional) soucre for above app.css
API:
---
phpgwapi/ (basic layout as for an application)
+- inc/ directory containing PHP classes (new ones should use class.egw_$something.inc.php)
| +- $module/ directory containing external modules
+- js/
| +- jsapi/ JavaScript clientside API
| +- jquery/ directory with jQuery, jQuery-UI and jQuery plugins
| +- ... other Javascript modules like ckEditor, dhtmlxtree, ...
|
+- setup/ information about installing (setup.inc.php, tables_(current|update).inc.php, ...
+- templates/
+- default/ containing templates files for all template-sets
| +- images/ containing images automatic found by all apps and template-sets
+- idots/ old idots template (new templates can use different structure, see below)
+- class.jdots_framework.inc.php extending egw_framework class
+- images/ images specific of idots template-set, overwriting the ones in default
+- css/ themes for idots template file (automatic detected by preferences)
New template-sets:
-----------------
$template/
+- inc/ contains PHP files
| +- class.$template_framework.inc.php required PHP class extending egw_framework class
|
+- js/ Javascript files of template
+- images/ template specific images for all apps, overwriting images in phpgwapi/templates/default/images
+- css/ themes of template
| +- $template.css required default theme of template, get automatically loaded, if no other theme specified in prefs
| +- $template.less (optional) source of $template.css
+- less/ (optional) directory containing files for CSS preprocessor less included by .less files in $template/css/
Automatic image loading order:
=============================
1. Instance specific directory defined configuration
2. app's template specific directory, eg. addressbook/templates/$template/images/navbar.png
3. app's default image directory, eg. addressbook/templates/default/images
4. templates image directory, eg. phpgwapi/idots/images or for newer templates $template/images
5. API default image directory phpgwapi/templates/default/images
Images lower down in above hierarchy are NOT to be copied to more specific directories, unless they should be overwritten!
Automatic loading of CSS styles:
-------------------------------
a) theme from template, eg. phpgapi/templates/idots/css/idots.css
b) etemplate/templates/default/etemplate(2).css (only for eTemplate applications)
c) either:
- apps template specific app.css eg. $appname/templates/$template/app.css or
- apps default $appname/templates/default/app.css
CSS preprocessor less:
=====================
More information about syntax can be found under http://lesscss.org/
EGroupware requires at least version 1.4 as we use @include (require) syntax to fetch just definitions
from phpgwapi/templates/default/def_*.less.
Currently commiter is responsible to generate all CSS files depending on a change .less file
and also to made changes in .less file not .css file, if a .less file exits.
One way to do so is automatic with NetBeans 7.4:
-----------------------------------------------
1. install a current node.js and npm (node package manager) follwoing this tutorial
https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
a) for Mac OS X eg. use: port install node npm
You need to symlink node to default location: ln -s /opt/local/bin/node /usr/bin/
b) Ubuntu 13.10 still includes too old node version (at least for less v. 1.5.0),
so follow above tutorial using Chris Lea's node repository
2. install lessc via npm: npm install -g less
3. Got to: NetBeans preferences >> Miscellanceous >> CSS Preprocessor and set:
Less path: /usr/bin/lessc or /opt/local/bin/lessc depending on your way of installing lessc
Uncheck "Generate extra information (debug)"
4. Open EGroupware project configuration in NetBeans (right click on project >> properties)
>> CSS Preprocessor
>> LESS
- check "Compile LESS Files on Save"
- Watch: change default "css/" "less/" to "." "." (generate css file in same directory)
- no compile options used currently
--> after that NetBeans compiles LESS files automatic to CSS files (you have to commit both!)