251740 - Add local CSS hook file

Status: RESOLVED FIXED

(Bugzilla :: User Interface, enhancement)

Description

[Christian Reis]

I'm suggesting we add a local.css CSS hook file that can hold all site
customizations; it will make maintaining an installation much easier if we
ensure that the file gathers site-wide configuration, will never conflict, and
has a ready-made hook in the global header.

Patch coming up.

Comment 1

[Christian Reis]

Attachment: kiko_v1: add local and header link line

Comment 2

[Gervase Markham [:gerv]]

Netscape 4.x really doesn't like links to non-existent CSS files. Do you plan to
check in a stub file as well?

Gerv

Comment 3

[Christian Reis]

The stub file is called local.css and is in the patch. Care to r+? :-)

Comment 4

[Gervase Markham [:gerv]]

Is local.css the clearest name for it? site-specific.css? custom.css? 

Gerv

Comment 5

[Christian Reis]

I'm fine with either one of them. I've seen configuration stubs that were named
"site.foo" and others named "local.foo". I don't think it's a really big deal as
long as we don't collide with anything Bugzilla-specific (bug.css would be
"bad"), and I think local.css isn't at risk there. site.css might be clearer.
You decide, I patch -- I just don't want this to take forever :-)

Comment 6

[Christian Reis]

Dave, could you please cast in a decision for a filename if you do approve?

Comment 7

[Myk Melez [:myk] [@mykmelez]]

Comment on attachment 153420 [details] [diff] [review]
kiko_v1: add local and header link line

The "global" in global.css refers to pages, not installations, just as
template/en/default/global/ refers to non-page-specific template files.  I'm
not averse to overloading it with the other meaning by naming this file
local.css, but we're starting to see page-specific CSS, and over in bug 251068
I'm discussing exactly how this should be integrated: whether as part of
global.css or in separate page-specific files like index.css.

If we go with page-specific files, won't installations want to add to those in
a page-specific way rather than globally, in which case shouldn't we provide a
directory (f.e. css/foo/) with page-specific CSS files (css/foo/index.css)
along with the global one (css/foo/global.css)?

>Index: css/local.css

>+/* place local styles here */

This comment could use improvement.  Even if the file gets called local.css in
the end, "local styles" is ambiguous.  Something like the following would be
better:

Put here any additional style rules you want to apply to the pages in your
Bugzilla installation.	The rules you put here will take precedence over rules
defined in the standard Bugzilla stylesheets.

You should also add a comment to global.css telling customizers to put their
rules in local.css instead.


>Index: template/en/default/global/header.html.tmpl

>     <link href="css/global.css" rel="stylesheet" type="text/css">
>+    <link href="css/local.css" rel="stylesheet" type="text/css">

Having two stylesheet links makes it hard to provide alternate stylesheets. 
Instead, have one stylesheet link to local.css and then @import global.css in
local.css.  

http://www.w3.org/TR/REC-CSS2/cascade.html#at-import

Note that rules in a stylesheet take precedence over rules imported from other
stylesheets, which is why you want to link to local.css and have that file
@import global.css rather than the other way around.

http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

Comment 8

[Christian Reis]

(In reply to comment #7)
> If we go with page-specific files, won't installations want to add to those in
> a page-specific way rather than globally, in which case shouldn't we provide a
> directory (f.e. css/foo/) with page-specific CSS files (css/foo/index.css)
> along with the global one (css/foo/global.css)?

There are definitely some styles that need to be specified globally: font types,
sizes and default colours and header styling. It's also a lot more convenient
for simple changes (which is what most people will do) to localize them into a
single file. I understand the fact that there's potential "semantic confusion"
with global.css; I think site.css or custom.css are better choices, and went
with the latter.

> >Index: css/local.css
> 
> >+/* place local styles here */
> 
> This comment could use improvement.  Even if the file gets called local.css in
> the end, "local styles" is ambiguous.  Something like the following would be
> better:
> 
> Put here any additional style rules you want to apply to the pages in your
> Bugzilla installation.	The rules you put here will take precedence over rules
> defined in the standard Bugzilla stylesheets.

Sounds good.

> You should also add a comment to global.css telling customizers to put their
> rules in local.css instead.

Will do.

> >     <link href="css/global.css" rel="stylesheet" type="text/css">
> >+    <link href="css/local.css" rel="stylesheet" type="text/css">
> 
> Having two stylesheet links makes it hard to provide alternate stylesheets. 

Sorry, I don't understand how it makes it harder to provide alternate
stylesheets. Alternate stylesheets have different "rel" attributes -- see my
patch attached to bug 252278 which provides a persistent implementation of them
for an example of how they are specified.

Revised patch coming up.

Comment 9

[Christian Reis]

Attachment: kiko_v2: reviewed

Comment 10

[Myk Melez [:myk] [@mykmelez]]

Comment on attachment 153846 [details] [diff] [review]
kiko_v2: reviewed

Per discussion in bug 251068 (see bug 251068, comment 7) I'm close to
concluding we want page-specific CSS files, in which case this should be
css/custom/global.css instead of css/custom.css.  Note that customizers will
still be able to customize their installations in a single file, even for
page-specific customizations, since global.css applies to all pages.


>Index: template/en/default/global/header.html.tmpl
>===================================================================
>RCS file: /cvsroot/mozilla/webtools/bugzilla/template/en/default/global/header.html.tmpl,v
>retrieving revision 1.26
>diff -u -p -r1.26 header.html.tmpl
>--- template/en/default/global/header.html.tmpl	16 Jul 2004 00:30:40 -0000	1.26
>+++ template/en/default/global/header.html.tmpl	21 Jul 2004 00:40:23 -0000
>     [%+ INCLUDE "global/help-header.html.tmpl" %]
> 
>     <link href="css/global.css" rel="stylesheet" type="text/css">
>+    <link href="css/custom.css" rel="stylesheet" type="text/css">

In order for alternate stylesheets to work correctly you need to give the
global.css file a title attribute.  Otherwise it will be considered a
"persistent" stylesheet rather than a "preferred" one and applied even when the
user specifies an alternate stylesheet, as I understand it.  See the following
page for the details:

http://www.alistapart.com/articles/alternate/

Note that the custom.css file shouldn't have a title, since we want it to be
persistent (i.e. it should style the site no matter what skin the user selects
so that installation customizations can override both the default style and
skin styles as per template customizations).


>Index: css/global.css

>+/*
>+ *

Nit: two blank lines at the beginning of this comment seems like one too many.


>+ * Notice to Bugzilla customizers: site-specific rules should be added
>+ * to the css/custom.css file: rules placed in custom.css take
>+ * precedence over those defined here. You should not modify the rules
>+ * in this file.

Use the active rather than the passive tense for this comment:

Notice to Bugzilla customizers: add site-specific rules to the
css/custom/global.css file.  Rules placed in that file take precedence over
those defined here.  You should not modify the rules in this file.

Comment 11

[Christian Reis]

(In reply to comment #10)
> Per discussion in bug 251068 (see bug 251068, comment 7) I'm close to
> concluding we want page-specific CSS files, in which case this should be
> css/custom/global.css instead of css/custom.css.  

Okay, we can discuss this on-list. Good that we're converging towards this
anyway :-)

> >Index: template/en/default/global/header.html.tmpl
> >     <link href="css/global.css" rel="stylesheet" type="text/css">
> >+    <link href="css/custom.css" rel="stylesheet" type="text/css">
> 
> In order for alternate stylesheets to work correctly you need to give the
> global.css file a title attribute.  Otherwise it will be considered a
> "persistent" stylesheet rather than a "preferred" one and applied even when the
> user specifies an alternate stylesheet, as I understand it.  

Right, but that was specifically what I wanted. I see that I'm not being clear
in my intent here, maybe I should have been clearer.

My "vision" of styling here was that:

  a) we would have one, central and single Bugzilla look. This look would be
contained in one file, global.css. 

  b) Page-specific customizations could go into the pages themselves or in
page-specific css files included. 

  c) local.css would be the site administrator's local point of customization.
He can style all content through here. local.css is supposed to be a *simple*
mechanism -- for someone who wants to do basic styling (though if you look at
the bztest stuff, you'll realize you can get easily carried away). Anyone who
wants to do more than a little *must* hack the CSS and live with risk of
conflicts upon updating -- and IMO that's actually a feature!

I now realize that local.css needs to apply *last* of all styles specified if we
have page-specific styling.

All the styles above would be "persistent". The end-user wouldn't have a choice
(nor do I think he should, in release Bugzilla) of what style he'd be accessing. 

The alternate stylesheet mechanism *I'm* proposing would be used as a
domain-specific styling *for Bugzilla-related concepts*. It's a bit of an
advanced idea, but maybe it would work -- at least for certain pages, which is
why I added it as a page-specific thing. Basically, I think it would be
interesting to be able to enter "priority-mode" for instance and then visit
buglist, maybe dependency-tree and others with a style specific to that mode.
The user could shift into "timetracking-mode" and then we're visually enhance
bugs that were late, took a long time to fix, or had long hours reported on them
already.

Hmmm. Is this akin to rocket-science?

Comment 12

[Bill Barry]

(just randomly looking at open bugs)

Is this bug still relevant? It appears that bug 322693 is a better way to do this and has more recent activity (and a working patch).

If it is no longer relevant should it get closed WONTFIX (or even marked as a dupe of the above bug)?

Comment 13

[Guy Pyrzak]

so this is VERY old and bugzilla has many ways to change css. It seems like this bug has 2 desires. A "blank" version of global.css that is an easy way for someone to change a skin, however, with skinning the way it is i don't think there is a need for this. 

The other request may be to have a hook in global/header.html.tmpl, however, this isn't explicit as I would have thought such a request should be. 

I'll add a patch for that and request review from... myk and mkanat.

Comment 14

[Guy Pyrzak]

Attachment: Header hook patch v1

Comment 15

[Max Kanat-Alexander]

Yes, the hook itself looks great. This would be good for plugins.

Comment 16

[Frédéric Buclin]

tip:

Checking in template/en/default/global/header.html.tmpl;
/cvsroot/mozilla/webtools/bugzilla/template/en/default/global/header.html.tmpl,v  <--  header.html.tmpl
new revision: 1.56; previous revision: 1.55
done

3.0.3:

Checking in template/en/default/global/header.html.tmpl;
/cvsroot/mozilla/webtools/bugzilla/template/en/default/global/header.html.tmpl,v  <--  header.html.tmpl
new revision: 1.49.2.2; previous revision: 1.49.2.1
done

Comment 17

[Max Kanat-Alexander]

Added to the release notes for Bugzilla 3.2 in a patch on bug 432331.