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.