Overriding css - quick tour

Author Message

Valentin Svelland

Wednesday 01 June 2005 11:02:52 am

I've been missing an easy overview as to how to use stylesheets in eZp v.3.5 and later. Of course Bård's article (see link under) is of great help, but nevertheless - here's a start for you other noobs on the community. Feel free to rewrite and add information to this text:

<b>TAKE CONTROL OF eZ CSS</b>
----------------------

<i>CHANGE COLORS, DESIGN AND PLACE YOUR MAIN ELEMENTS (LEFT MENU ETC.)</i>

1. For this guide, first choose sitestyle no.1 under designthemes in admin. (You can pick any theme, but then correct the path under with correct number.)

2. Edit the two files classes-colors.css and site-colors.css in the folder (take a deep breath..): <b>packages/styles/t01/files/default/file/design/base/stylesheets/t1/</b> of the eZ publish root.

3. Read Bårds article (http://www.ez.no/community/articles/build_table_less_css_layouts_with_ez_publish) or visit www.webmonkey.com for hints on css-editing.

Basicly you can create the look of your site here in terms of colors and fixed designelements.

4. Export your settings to a "package-file" in admin for reuse or backup.

<i>LAYOUT - CUSTOMIZING TEXT ELEMENTS LIKE H1, P AND SO ON</i>

1. Override <b>base/stylesheets/classes.css</b> by copying this file to <b>/design/yoursite/stylesheets/classes.css</b> and changing the contents.
2. You may have to clear cache for the override to be linked correctly in your sites html.
3. TRYOUT: Try adding this to make your paragraphs more spacious in main content of articles etc.:

div.attribute-long p 
{
  margin-top: 1.5em;
}

PLANNING FUTURE UPGRADES?
Well, then perhaps you should consider adding your customised css in brand new css-files adding them to pagelayout.tpl with @import-lines after the other existing css-imports. This way you override or add the attributes you need and at the same time isolate this from missing core css changes in later upgrades of eZp. :)

--------
Also see:
http://www.ez.no/community/articles/build_table_less_css_layouts_with_ez_publish
--------
Good luck guys, eZ rocks - when you get the hang of it that is! ;)

------------------------
I made eZ run on www.eigersund.kommune.no, bjerkreim.kommune.no, lund.kommune.no and sokndal.kommune.no. Municipalities should use open source!

Łukasz Serwatka

Thursday 02 June 2005 3:40:28 am

Hi Valentin,

This is very good input ;) I suggest to make from it an article and we can publish it here in Community section in ez.no, will be usefull for other users ;)

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.

eZ debug

Timing: Jan 31 2025 08:03:48
Script start
Timing: Jan 31 2025 08:03:48
Module start 'layout'
Timing: Jan 31 2025 08:03:48
Module start 'content'
Timing: Jan 31 2025 08:03:48
Module end 'content'
Timing: Jan 31 2025 08:03:48
Script end

Main resources:

Total runtime0.0191 sec
Peak memory usage2,048.0000 KB
Database Queries3

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0064 588.1328151.2109
Module start 'layout' 0.00640.0030 739.343836.6484
Module start 'content' 0.00950.0078 775.992290.2656
Module end 'content' 0.01730.0017 866.257833.9922
Script end 0.0190  900.2500 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.002513.2372140.0002
Check MTime0.00105.4386140.0001
Mysql Total
Database connection0.00084.293610.0008
Mysqli_queries0.003015.754630.0010
Looping result0.00000.177510.0000
Template Total0.00136.610.0013
Template load0.00094.876110.0009
Template processing0.00031.661210.0003
Override
Cache load0.00062.946210.0006
General
dbfile0.003015.619680.0004
String conversion0.00000.047540.0000
Note: percentages do not add up to 100% because some accumulators overlap

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1print_pagelayout.tpl<No override>extension/community/design/community/templates/print_pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0001 secs