Giving Bugzilla a monster makeover.

Jan 3 2013

We use Bugzilla a lot here at RD2. It is a great tool for tracking website and app issues, assigning tasks, and all round helping us get projects from Development to Launch. Unfortunately, especially for those of us that are more design oriented, it’s lack of aesthetics is almost unbearable. When I realized that I would be working with it on a daily basis, I had to find a way to make this tool palatable.

Bugzilla had to get a makeover.

A while ago, I had seem some chatter around the Internet about updating Craigslist with a Chrome extension called Stylish, but I had never really had a need to pursue it in great detail. The time was now. A quick and painless installation  and some time in the Firebug Editor and viola! I was able to insert a custom CSS file on top of the one loaded by Bugzilla and set it to apply to all URLs that are under the Bugzilla installation. The result is a cleaner interface, easier bug input, and a much more pleasurable experience.

I was able to transform this:

Into this:

The bulk of the work was done on the interior pages.



If you’ve got greatness that you’ve done to Bugzilla on your own or using our code as a base, let us know! Tweet us @rd2inc

Download the CSS file or grab the code below and enjoy.

Of note: There is also a Firefox Add-on for Stylish, but the interface is a bit different and will require a different setup. The CSS will work in Firefox as well, but will require you include the following notation before the CSS.

@-moz-document domain("")

Be forewarned: Due to personal preferences, many of the redundant links that appear throughout the site were removed via the CSS.

# {font-family: 'Helvetica', Helvetica, Arial, sans !important; border:none; border-radius: none !important;}
body, p, td, th, input {font-family: 'Helvetica', Arial, sans !important;}
body {width: 90%; margin:20px auto; padding-top: 50px; background:#FFF !important; font-family: 'Helvetica', Arial, sans !important;}
p {line-height; 3em !important;}
hr {display:none !important;}
a {color: #000 !important;}
a:visited {color: #808080 !important;}
a:hover {color: red !important;}

.separator {color: #CCC; margin: 0 10px 0 10px; display: none;}

#titles {background: #d4d6d7; display:none;}
#titles p {color: #333;}
#header {margin-top: 25px !important;}
#header .links {border:none !important; border-radius: none !important; background: #ccc !important; padding: 25px !important;}
.subheader {display:none;}
#header .links li {margin-right: 15px; margin-top: 20px;}
#header .links {clear:both; display: block; margin-top: 10px !important;}
.form {float:right; margin: 0px !important;}

#bugzilla-body {border:none !important; padding-top: 40px; padding-bottom: 40px; background: #FFF !important; border-radius: none !important;}

/* Welcome Section */

#welcome {text-indent: -9999px; background-image: url( !important; background-repeat:no-repeat; height: 50px; background-position:center;}

#page-index {margin: auto; max-width: 100%;}

.bz_common_actions {margin: 0em 2em 10em 2em !important;}

#enter_bug {background-image: url( !important; background-repeat:no-repeat; height: 180px;}
#enter_bug span {display:none;}

#query {background-image: url( !important; background-repeat:none;height: 180px;}
#query span {display:none;}

#account {background-image: url( !important; background-repeat:none;height: 180px;}
#account span {display:none;}

/* Filing Bugs */
#quicksearch_links {margin-top: 20px !important;}

.bz_query_single_product {position:absolute !important; top:215px !important;}

.bz_query_head {text-align:left !important; display:none !important;}
ul.search_description li {display:block !important; margin: 10px; display:none !important; border:none !important;}

.bz_buglist {margin-top: 70px; border-bottom: 1px solid #CCC; padding-bottom: 20px;}
.bz_buglist_header th {min-width: 100px !important; padding-right: 10px !important;}
.bz_sort_order_secondary {float:right; font-size: .25em; margin-top: 3px;}
.bz_sort_order_primary {font-size:.25em !important; padding-left:10px !important;}

.bz_row_odd {background-color: #EEE !important;}
.bz_buglist td {padding-top: 10px !important; padding-bottom: 10px !important;}
.bz_bugitem:hover {background:#444 !important; color: #FFF !important;}
.bz_bugitem:hover a {color: #fff !important;}

.bz_query_buttons {width:30% !important;}
.bz_query_buttons form {float:left !important; margin: 0px 10px 0 0 !important;}
.bz_query_buttons input {background: #000 !important; border-radius: 2px !important; font-size: .8em !important; border:none !important; color: #fff; cursor:pointer !important;}

.bz_query_links {width: 50%;}
.bz_query_links, .bz_query_edit, .bz_query_forget {font-size: .8em;}

.bz_result_count {z-index:99; position:absolute; top:200px; font-style:italic;}
.bz_query_single_product a:hover {background:#c00b13 !important; color: #FFF !important; text-decoration:none !important; padding: 11px !important; border-radius: 5px !important; font-size: .9em !important; font-weight: normal;}
.bz_query_single_product a {background: #1cbcee; color: #FFF !important; text-decoration:none; padding: 11px; border-radius: 5px; font-size: .9em; font-weight: normal;}
.bz_query_single_product {padding: 10px 0 10px 0;}

#links-actions {display:none;}
#links-saved {clear:both; margin-top: 15px;}

#changeform tr {min-height:50px;}
div.bz_alias_short_desc_container {border-radius:none; border:none;}

.knob-buttons input, #commit input  {background:#c00b13; color: #FFF; text-decoration:none; padding: 11px; border-radius: 5px; font-size: .9em !important; font-weight: normal; cursor:pointer;}
.knob-buttons input:hover, #commit input:hover {background: #777;}
#commit_top {display:none;}

.navigation {margin-bottom: 20px;}
.navigation a {margin-right: 15px;}
.bz_alias_short_desc_container {background:none !important; font-size:100% !important;}
#short_desc_nonedit_display {font-weight:normal !important; font-size: 3em; margin-bottom: 25px; clear:both; float:left; width: 82%; letter-spacing: -.05em; padding-right: 50px;}
#summary_alias_container {clear:both;}

#Create.enter_bug_form input[type="submit"] {background:#1cbcee !important; color: #FFF; text-decoration:none; padding: 11px; border-radius: 5px !important; font-size: .9em; font-weight: normal; cursor:pointer !important; border:none !important; margin-top: 40px;}

.knob-buttons input, #commit input {border:none !important; cursor:pointer !important;}

/* Footer + Footer Links */
#footer {background-color: #000 !important;}
#footer {position: fixed; width: 100%; top: 0px; left: 0px; padding-left: 80px; margin-top: 0px !important; height: 100px; z-index:90; background: #000;}
#footer a {color: #1cbcee !important;}
#footer a:visited {color: #808080 !important;}
#footer a:hover {color: red !important;}
#footer ul {margin-top: 40px; z-index: 99; }
#footer #links-actions {margin-top: 25px !important; margin-right: 15px;}
#links-saved li {padding-right: 15px;}

3 Comments to “Giving Bugzilla a monster makeover.”

  1. Wow, amazing weblog format! How long have you ever been blogging for? you made blogging look easy. The total look of your website is magnificent, let alone the content material!

    By air conditioner on April 26th, 2013 at 12:32 am
  2. That’s so awesome! Bugzilla needs a hefty facelift.

    By Christopher Mosure on August 14th, 2013 at 7:31 am
  3. Thanks man… sweetened my day…

    By Arnold on September 26th, 2013 at 1:49 am

Leave a Reply