Forums / Setup & design / Overriding css - quick tour

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

eZ debug

Timing: Jan 31 2025 06:18:04
Script start
Timing: Jan 31 2025 06:18:04
Module start 'content'
Timing: Jan 31 2025 06:18:04
Module end 'content'
Timing: Jan 31 2025 06:18:04
Script end

Main resources:

Total runtime0.2761 sec
Peak memory usage2,048.0000 KB
Database Queries141

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0067 587.9297180.8359
Module start 'content' 0.00670.0053 768.765693.9922
Module end 'content' 0.01200.2640 862.7578525.2734
Script end 0.2760  1,388.0313 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00321.1599200.0002
Check MTime0.00130.4851200.0001
Mysql Total
Database connection0.00080.273010.0008
Mysqli_queries0.230383.40731410.0016
Looping result0.00130.48441390.0000
Template Total0.263895.510.2638
Template load0.00080.289010.0008
Template processing0.263095.237310.2630
Override
Cache load0.00060.209310.0006
Sytem overhead
Fetch class attribute can translate value0.00100.351210.0010
XML
Image XML parsing0.00040.139810.0004
General
dbfile0.00732.6418200.0004
String conversion0.00000.001430.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

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

Time used to render debug report: 0.0002 secs