Issue 864: Support ability to change theme with CSS
Status:  Submitted
Owner: ----
Closed:  Dec 2012
Reported by carol.nichols@gmail.com, Mar 2, 2011
We would like to change some of the things about the way our company's internal gerrit instance looks by adding CSS.

My suggestions would be:

- Make the CSS class names in the markup more human-readable and discoverable. For example, the class that sets the header background color is .G1cxqn1eKF. It would be nice if this was something like .header instead.

- Have a way to specify a stylesheet for the instance. We can add one to our custom header, but it would be nice if there was just a stylesheet hook.
Mar 2, 2011
#1 docw...@gmail.com
I asked on IRC and "js2" said that Gerrit is using https://code.google.com/webtoolkit/

I'm no Java or GWT expert, but after a quick read through the documentation, it looks like the better style names could be as simple as adding calls to setStylePrimaryName() in Java for element objects.

If so, it maybe simple enough that I could put together a patch for submission.
Mar 2, 2011
#2 docw...@gmail.com
Also, "js2" pointed out you can create a site css file (see: http://gerrit.googlecode.com/svn/documentation/2.1.6/config-headerfooter.html) though when I read that, I thought it was the case that only CSS for the header/footer would go there.
Mar 2, 2011
#3 sop@google.com
Actually, edit gerrit.css and add @external lines in the header for any class names you want published onto elements.

We don't do this for most CSS class names because most of them are heavily reused. Trying to override them with your own rules might have some unexpected results.
May 20, 2011
Project Member #4 nas...@grainawi.org
Shawn is there something more that needs to be done from the Gerrit side here?
May 23, 2011
#5 sop@google.com
This bug is just waiting for someone to add the relevant @external lines to gerrit.css. We may need to clean up some of our class usage to make the external names more meaningful.
Status: Accepted
Mar 14, 2012
#6 roan.kat...@gmail.com
You can add your own stylesheet by adding file called GerritSite.css in review-site/etc , and you can add your own HTML (and JavaScript!) by putting a GerritSiteHeader.html file in the same directory. Kudos to LinuxJedi for discovering and exploiting this to make Gerrit somewhat skinnable:
http://www.linuxjedi.co.uk/2012/03/changes-coming-to-gerrits-style.html
https://review.openstack.org/#change,5234,patchset=4

However, GerritSite.css is included BEFORE Gerrit's own CSS, which means that unless you use !important everywhere, your CSS is overridden by Gerrit's. I'll file a separate bug about this.
Mar 14, 2012
#7 roan.kat...@gmail.com
Filed issue 1290 for this.
Dec 18, 2012
Project Member #8 choro...@wikimedia.org
Took care of marking all CSS as @external last month in https://gerrit-review.googlesource.com/#/c/39251/
Status: Submitted
Dec 18, 2012
Project Member #9 bklarson@gmail.com
Do we also need to do anything to external-ize css contained in uibinder xml files?