At one of my previous jobs I had setup Request Tracker to handle support tickets. Request tracker is actually a very powerful piece of software that is unfortunately stucking using a quite ugly theme. They did recently modernize the code behind the theme but it’s still far from perfect.

To that end I decided to include some Bootstrap (pre-version 3) to the theme to help spice things up a little bit. I’ve decided to share my custom CSS with the world.

Custom CSS#

Apply this stylesheet in Tools -> Configuration -> Tools -> Theme -> Custom CSS (Advanced)

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:200);
/* ===[ Page ]=== */
body { background: #ccc url(/NoAuth/images/custbg.png) repeat }
/* ===[ Page title ]=== */
div#header h1 {
margin-top: 0px;
font-family: 'Titillium Web', sans-serif;
font-weight: 200;
font-size: 1.8em;
}
/* ===[ Buttons ]=== */
input[type="reset"],
input[type="submit"],
input[class="button"],
input[type="reset"]:active,
input[type="submit"]:active,
input[class="button"]:active,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[class="button"]:focus {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 13px;
line-height: 18px;
*line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* ===[ Button hover ]=== */
input[type="reset"]:hover,
input[type="submit"]:hover,
input[class="button"]:hover,
.btn {
color: #333333;
text-decoration: none;
background-color: #e6e6e6;
*background-color: #d9d9d9;
/* Buttons in IE7 don't get borders, so darken on hover */
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
input[type="submit"],
input[type="submit"]:active,
input[type="submit"]:focus {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0074cc;
*background-color: #0055cc;
background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x;
border-color: #0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
input[type="submit"]:hover {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0055cc;
*background-color: #004ab3;
}
div#quickbar {
min-height: 20px;
padding-right: 20px;
padding-left: 20px;
background-color: #2c2c2c;
border-bottom: 1px solid #444444;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
ul#app-nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}
.sf-menu > li { padding: 0 6px }
ul#app-nav > li > a {
float: none;
padding: 9px 10px 11px;
line-height: 19px;
color: #999 !important;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border: none !important;
}
ul#app-nav li > a:hover {
color: #ffffff !important;
text-decoration: none;
background-color: transparent;
}
ul#app-nav li > a > .sf-sub-indicator { right: -2px !important }
ul#app-nav li li > a > .sf-sub-indicator { right: 4px !important }
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul { /*left: 1em !important;_NO__DOTCOMMA__AFTER__*/ }
div#logo { display: none }
div#logo .rtname { color: #fff }
.sf-menu li li,
.sf-menu li li li { background: #fff !important }
.sf-menu li li a:hover,
.sf-menu li li li a:hover,
.sf-menu li li a:focus,
.sf-menu li li li a:focus,
.sf-menu li li a:active,
.sf-menu li li li a:active {
background-color: #0088cc !important;
color: #FFF !important;
text-decoration: none !important;
}
ul#page-menu {
position: relative;
top: 13px;
}
#not-logged-in { color: #999 !important }
#topactions { top: 4em !important }
#page-menu li a:hover,
#page-menu li a:active,
#page-menu li a:focus {
background-color: #0088cc !important;
color: #FFF !important;
text-decoration: none !important;
}
view raw bootstrap.css hosted with ❤ by GitHub

Note: This has only been tested on 4.0 <= RT version <= 4.0.13.

Custom background#

In the CSS I set a custom background image. I choose a nice background from Subtle Patterns like this to help spice up the background. Put that file in the noauth section of RT on the filesystem and name it custbg.png. If you name it something else just find and replace in the custom CSS.