I thought I'd just tell you how I'm doing my CSS styling since it overcomes some of the issues that you are discussing. However it does not use either core.css or custom.css since the procedure is a bit more complicated in order to cover the many differences in browsers that I think may arise with several other users.
I also think that a CSS specific forum (unrelated to a specific GT product) would be interesting instead of needing to refer people to other forums with CSS specific tips, hacks and rules etc.
In the include_common_head.html I have this code :
<link rel="stylesheet" href="<%config.db_static_url%>/<%t%>/fontstyles.css" type="text/css" media="screen" />
<script type="text/javascript" src="<%config.db_static_url%>/<%t%>/vnjavascript.js"></script>
I could publish all the code but I think most of it is uninteresting and site specific so I'll give illustrating examples.
In filter.css I have this to direct different browsers to different overriding stylesheets in order to modify the CSS for browsers that do not comply to the W3C guidelines properly, inconsistently or for browser specific bugs :
There are references in my CSS to where I found the relevant information, in order to thank people that share when they do and recognition is due :)
@import url("w3cbrowsers.css");
/**
* IE55/Win Styles from
* http://tantek.com/CSS/Examples/midpass.html
*/
@media tty {
i{content:"\";/*" "*/}}@m; @import 'ie55.css'; /*";}
}/* */
/**
* IE5/Win Styles from
* http://tantek.com/CSS/Examples/midpass.html
*/
@media tty {
i{content:"\";/*" "*/}}; @import 'ie5.css'; {;}/*";}
}/* */
/**
* IE5/Mac Styles from
* http://stopdesign.com/examples/ie5mac-bpf/ **/
/*\*//*/
@import "iemac.css";
/**/
In fontstyles I have font specific CSS code that is either understood by browsers or they are not capable of understanding CSS anyway. For example :
.grey {
FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Arial, Helvetica, sans-serif
}
Then in the core CSS file (w3cbrowsers.css) I have this type of code, where 'template_name' is like luna :
BODY {
background: #fff url(../../images/template_name/page_bck.gif) top center repeat-y;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 750px;
TEXT-ALIGN: center;
}
Thus I have CSS files in
www/static/template_name
Images in
www/images/template_name
and my templates in
perl/admin/templates/template_name/local
This means I only have to modify the template_name in the w3cbrowsers.css and browser specific files if used.
This works pretty well for me because I have some complicated CSS styling that doesn't work in all browsers and I know Adrian has done a great job here with his CSS because I tested my beta version on IE5.1, IE5.2, IE5.5, IE6 FireFox and Opera 7. Although I haven't added alot of content I think it's pretty impressive.
Hope this helps some of you. I understand that it doesn't follow the initial beta concept but the two file system just won't work for me and I believe in sharing information when it can be relevant to certain users.
I'm not sure what Adrian thinks but I think that it could easily be modified to work with the core.css system in that you could have "w3cbrowsers.css" called "core.css". This way the core.css could be updated like expected and the template would call the filter.css in the template in order to allow for other browser specific CSS files.
John
PS for mozilla specific CSS code this usually works:
I just use FireFox as a basis so I haven't come across the need for hacks there yet...
Significant Media
I also think that a CSS specific forum (unrelated to a specific GT product) would be interesting instead of needing to refer people to other forums with CSS specific tips, hacks and rules etc.
In the include_common_head.html I have this code :
Code:
<link rel="stylesheet" href="<%config.db_static_url%>/<%t%>/filter.css" type="text/css" media="screen" /> <link rel="stylesheet" href="<%config.db_static_url%>/<%t%>/fontstyles.css" type="text/css" media="screen" />
<script type="text/javascript" src="<%config.db_static_url%>/<%t%>/vnjavascript.js"></script>
I could publish all the code but I think most of it is uninteresting and site specific so I'll give illustrating examples.
In filter.css I have this to direct different browsers to different overriding stylesheets in order to modify the CSS for browsers that do not comply to the W3C guidelines properly, inconsistently or for browser specific bugs :
There are references in my CSS to where I found the relevant information, in order to thank people that share when they do and recognition is due :)
Code:
/** To hide new code from older browsers **/ @import url("w3cbrowsers.css");
/**
* IE55/Win Styles from
* http://tantek.com/CSS/Examples/midpass.html
*/
@media tty {
i{content:"\";/*" "*/}}@m; @import 'ie55.css'; /*";}
}/* */
/**
* IE5/Win Styles from
* http://tantek.com/CSS/Examples/midpass.html
*/
@media tty {
i{content:"\";/*" "*/}}; @import 'ie5.css'; {;}/*";}
}/* */
/**
* IE5/Mac Styles from
* http://stopdesign.com/examples/ie5mac-bpf/ **/
/*\*//*/
@import "iemac.css";
/**/
In fontstyles I have font specific CSS code that is either understood by browsers or they are not capable of understanding CSS anyway. For example :
Code:
/** Text styles **/ .grey {
FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Arial, Helvetica, sans-serif
}
Then in the core CSS file (w3cbrowsers.css) I have this type of code, where 'template_name' is like luna :
Code:
/** Layout **/ BODY {
background: #fff url(../../images/template_name/page_bck.gif) top center repeat-y;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 750px;
TEXT-ALIGN: center;
}
Thus I have CSS files in
www/static/template_name
Images in
www/images/template_name
and my templates in
perl/admin/templates/template_name/local
This means I only have to modify the template_name in the w3cbrowsers.css and browser specific files if used.
This works pretty well for me because I have some complicated CSS styling that doesn't work in all browsers and I know Adrian has done a great job here with his CSS because I tested my beta version on IE5.1, IE5.2, IE5.5, IE6 FireFox and Opera 7. Although I haven't added alot of content I think it's pretty impressive.
Hope this helps some of you. I understand that it doesn't follow the initial beta concept but the two file system just won't work for me and I believe in sharing information when it can be relevant to certain users.
I'm not sure what Adrian thinks but I think that it could easily be modified to work with the core.css system in that you could have "w3cbrowsers.css" called "core.css". This way the core.css could be updated like expected and the template would call the filter.css in the template in order to allow for other browser specific CSS files.
John
PS for mozilla specific CSS code this usually works:
Code:
@im\port url("mozilla.css");Significant Media
