Index > Contao core > How TL handles style sheets - clarification, please!
Hi. I'm new to TL. I have been stumbling around tutorials and documentation, and have several dummy sites set up to play with. It has taken me some time to get my head around the way the system handles stylesheets, and I wonder if someone who really understands what is going on could confirm the following.
As far as I can tell:
1. there are basically two ways of handling stylesheets you have uploaded:
a) you can call stylesheets from any location in the file system (as you would if you were simply coding html pages); interestingly, Leo has taken this approach in his tutorial on adapting an open-source template
OR
b) you can go through the "proper" process of importing stylesheets into the backend
2. if you import stylesheets:
a) they are then automatically called by your TL site pages
b) the active stylesheets are stored in the root directory of the cms - ie they are copies of the originals
c) the styles are also stored in a database table
d) when you use the stylesheet backend editing system you are editing these database records
e) when you edit a record and save it, the active stylesheet concerned is overwritten.
UPDATE:
The exception to all of the above is that the CSS code controlling the basic page layout is built in to the page html, like this:
* html body { text-align:center; }
#wrapper { width:960px; margin:0 auto; }
#header { height:80px; }
#left { width:200px; }
#right { width:120px; }
#main { margin-left:200px; margin-right:120px; }
#footer { height:30px; }
I think it is important to understand these things so as to avoid problems; as I have said, I would welcome confirmation that my picture is accurate, or corrections as necessary.
cheers
Chris
As far as I can tell:
1. there are basically two ways of handling stylesheets you have uploaded:
a) you can call stylesheets from any location in the file system (as you would if you were simply coding html pages); interestingly, Leo has taken this approach in his tutorial on adapting an open-source template
OR
b) you can go through the "proper" process of importing stylesheets into the backend
2. if you import stylesheets:
a) they are then automatically called by your TL site pages
b) the active stylesheets are stored in the root directory of the cms - ie they are copies of the originals
c) the styles are also stored in a database table
d) when you use the stylesheet backend editing system you are editing these database records
e) when you edit a record and save it, the active stylesheet concerned is overwritten.
UPDATE:
The exception to all of the above is that the CSS code controlling the basic page layout is built in to the page html, like this:
* html body { text-align:center; }
#wrapper { width:960px; margin:0 auto; }
#header { height:80px; }
#left { width:200px; }
#right { width:120px; }
#main { margin-left:200px; margin-right:120px; }
#footer { height:30px; }
I think it is important to understand these things so as to avoid problems; as I have said, I would welcome confirmation that my picture is accurate, or corrections as necessary.
cheers
Chris
Last edited by chrisg, 2008-12-09 11:54
2008-12-09 11:27
Unless I am mistaken, you're absolutely correct that's a sharp analysis except for a few things which need to be understood.
You can indeed either store your CSS anywhere you want on the filesystem, but this will mean that you have to edit <?php echo $this->stylesheets; ?> and "hardcode" the path to your CSS files the "old" way in your fe_page.tpl template, the downside being that you'll need to create a different fe_page template for each Page layouts if you need different sets of css (and you'll also be unable to enjoy the advantage of dynamically assign a given CSS files to a page layout).
That's why I didn't go this way. The only reason to go this way IMHO is to enjoy editing in your favorite text editor rather than the no so fluid default interface to edit CSS. Ever since Cyril has offered the CSS Editor extension, this problem has gone away for me
As far as the page layout being set directly in the page, that's the <?php echo $this->framework; ?> in the fe_page template, which is known as TL's CSS framework. If you want to enjoy the ability for the user to set which part of the layout you want to use for a given Page layout (left and or right or just one column and/or custom sections), you'll need to keep it too. Otherwise you fall back on a "static" logic and some items won't be controlled through the adminbut through good old HTML.
I hope this helps clarify the last bits (and also more seasonned TL veteran will check that I am right here).
You can indeed either store your CSS anywhere you want on the filesystem, but this will mean that you have to edit <?php echo $this->stylesheets; ?> and "hardcode" the path to your CSS files the "old" way in your fe_page.tpl template, the downside being that you'll need to create a different fe_page template for each Page layouts if you need different sets of css (and you'll also be unable to enjoy the advantage of dynamically assign a given CSS files to a page layout).
That's why I didn't go this way. The only reason to go this way IMHO is to enjoy editing in your favorite text editor rather than the no so fluid default interface to edit CSS. Ever since Cyril has offered the CSS Editor extension, this problem has gone away for me
As far as the page layout being set directly in the page, that's the <?php echo $this->framework; ?> in the fe_page template, which is known as TL's CSS framework. If you want to enjoy the ability for the user to set which part of the layout you want to use for a given Page layout (left and or right or just one column and/or custom sections), you'll need to keep it too. Otherwise you fall back on a "static" logic and some items won't be controlled through the adminbut through good old HTML.
I hope this helps clarify the last bits (and also more seasonned TL veteran will check that I am right here).
Last edited by davidm, 2008-12-09 20:13
++ open source enthusiast, textpattern and modx veteran, typolight student ++
.: loving typolight's versatility and flexibility, impressed by reliability and security and enjoying fast development time :.
++ amazed by the Catalog/CatalogExt/Taxonomy combo and lots of high quality modules... kudos ! +++
.: loving typolight's versatility and flexibility, impressed by reliability and security and enjoying fast development time :.
++ amazed by the Catalog/CatalogExt/Taxonomy combo and lots of high quality modules... kudos ! +++
2008-12-09 20:12
