Giving Bugzilla a monster makeover

At RD2, we use Bugzilla a lot at work. It is a great tool for tracking website and app bugs. But it’s about the ugliest damn thing I’ve ever encountered. 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 an extension called Stylish, but I had never really had a need to pursue it in great detail. A quick installation and some time in the Firebug Editor and viola! I uploaded a custom CSS file and set it to apply to all URLs that apply to 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.

Before:

After:

# {font-family: Helvetica, Arial, sans; border:none;}
body {width: 90%; margin:20px auto; padding-top: 50px;}
p {line-height; 3em;}
hr {display:none;}
a {color: #808080;}
a:visited {color: #1cbcee;}

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

#header .links {border:none !important;}
.subheader {display:none;}
#titles {background: #d4d6d7;}
#titles p {color: #333;}
ul.links li {line-height: 2em; margin-right: 15px;}
.links {clear:both; display: block; margin-top: 10px !important; height: 50px;}
.form {float:right;}

#bugzilla-body {border-top: 1px solid #CCC; padding-top: 40px; padding-bottom: 40px;}

/* Welcome Section */

#welcome {text-indent: -9999px; background-image: url(https://dl.dropbox.com/u/32990292/bugzilla-welcome.jpg) !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(https://dl.dropboxusercontent.com/u/5063845/bz-home-file.png) !important; background-repeat:no-repeat; height: 180px;}
#enter_bug span {display:none;}

#query {background-image: url(https://dl.dropboxusercontent.com/u/5063845/bz-home-look.png) !important; background-repeat:none;height: 180px;}
#query span {display:none;}

#account {background-image: url(https://dl.dropboxusercontent.com/u/5063845/bz-home-pref.png) !important; background-repeat:none;height: 180px;}
#account span {display:none;}

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

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

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

.bz_buglist {margin-top: 70px; border-bottom: 1px solid #CCC; padding-bottom: 20px;}
.bz_buglist_header th {min-width: 100px; padding-right: 10px;}
.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;}
.bz_buglist td {padding-top: 10px; padding-bottom: 10px;}
.bz_bugitem:hover {background:#444; color: #FFF;}

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

.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 {background:#c00b13; color: #FFF; text-decoration:none; padding: 11px; border-radius: 5px; font-size: .9em; font-weight: normal;}
.bz_query_single_product a:hover {background: #777;}
.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:#c00b13 !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 {background-color: #333;}
#footer {position: fixed; width: 100%; background: #33; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; top: 0px; left: 0px; padding-left: 80px; margin-top: 0px !important; height: 100px; z-index:99;}
#footer ul {margin-top: 35px;}