customized newbacklog.css for Agilo 1.3.0

[Rick]

Hi all,

There's an older thread regarding formatting of the backlogs, but I
wanted to start a fresh one for the Googlers out there, especially
since Agilo 1.3.0 is out now.

Here is my customized newbacklog.css file. I just looked through the
trac.ini file, and although I have customized the columns in my
backlogs I don't think the CSS should be any different.

FYI I have my backlogs set to show Requirements, User Stories, Bugs,
and Tasks (all ticket types).


THINGS TO NOTE:

I changed the default font-size (line 2) because I found the original
too hard to read.

The awesome new backlog customization css classes that the good folks
at Agilo have added start around line 166.

I've commented out a few of the default styles so that I could apply
"level" based backgrounds and foreground colors.

I also added a strikethrough to closed tickets (via the .ticketstatus-
closed css class)

From what I can tell from playing with the new css classes, a wide
range of styles can be applied to the backlog now, so don't feel like
you need to keep my colors!

Layers of parent/child relationships are also now automatically
indented, which is awesome!


newbacklog.css


#backlog {
font-size: 14px;
background: transparent;

position: absolute;
top: 36px;
right: 0px;
bottom: 0px;
left: 6px;
overflow:hidden;
}

#backlog h1 {
font-size: 20px;
line-height: 46px;
height: 46px;
padding: 0 10px;
font-weight: normal;
width: auto;

border-bottom: 1px solid #333;
border-top: 1px solid #777;
background: #333 url("../images/backlog.h1.jpg") top repeat-x;
/* background: #eee -webkit-gradient(linear, left top, left bottom,
from(#555), to(#333));*/
/* background: #eee -webkit-gradient(linear, left top, left bottom,
from(#535C65), to(#32373E));*/
color: #ddd;
text-shadow: 0 1px 3px #222;
margin: 0;
}

#backlog a {
/* overwrite css from agilo_theme.css */
float: none !important;
}

#bottom { display: none;}

/* Placeholder for now, so the error messages are visible at all */
#notice {
margin-top: 6px;
text-align: center;
width: 280px;
padding: 0 10px;
position: absolute;
top: 0;
left: 50%;
margin-left: -150px;
background: #E85E5E;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
z-index:1005;
}

#backlog.disabled * {
color: #666;
}

.backlog.disabled * {
color: #666 !important;
}

.backlog-header,
#contingent thead td {
background: url("../images/backlog.header.gif") repeat-x;
line-height: 22px;
height: 22px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #999;
font-weight: bold;

position: absolute;
left: 0;
right: 0;
overflow-y: scroll;
}

/* Fix scrollbars in the Backlog headers in Firefox by creating
overflow */
.backlog-header {
padding-top: 24px;
/* the padding trick pushes the border out of view, simulating the
border my filling the 1pxg gap with a background color */
background-color: #999;
}
.backlog-header span { margin-top: -24px; }

.backlog-header span,
.backlog span,
#backlog span.status { /* Overruling span.status in agilo.css that
would otherwise break the backlog rendering */
display: block;
position: absolute;
border-left: 1px solid #ddd;
/* ellipsis */
word-wrap: break-word;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
padding: 0 1%;
height: 23px;
}

.backlog span a {
display: block;
width: 100%;

word-wrap: break-word;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}

.backlog-header span { text-align: center; height: 22px; }
.backlog span { text-align: left; }
.backlog span.numeric { text-align: right; }

.backlog span.id {
padding:0;
padding-right: 5px;
clear: left;
}

.backlog span.id a {
clear: left;
}

.backlog span.summary {
padding:0 2px;
text-align: left;
}

.backlog span input {
width: 100%;
}

.backlog span select {
white-space: nowrap;
width: 100%;
}

.backlog {
position: absolute;
top: 72px;
right: 0;
/* bottom: 120px; /* make room for the contingent */
bottom: 0;
left: 0;
overflow-y: scroll;
overflow-x: hidden;
}

.backlog dl {
border-collapse: collapse;
cursor: move;
}

.backlog dt,
.backlog dd {
line-height: 23px;
height: 23px;
border-bottom: 1px solid #E8E8E8;
}

.backlog dd {
border-color: #f8f8f8;
}

.backlog .ticketstatus-new {
/*color: ;*/
}

.backlog .ticketstatus-accepted {
/*color: ;*/
}

.backlog .ticketstatus-closed {
/*color: ;*/
text-decoration: line-through;
}

.backlog .level-1 {
background: #e0e0e0;
}

/* If we support more than 5 levels, we should probably start to
generate these styles dynamically */
.backlog .level-1 .summary {
text-indent: 12px;
font-weight: bold;
}

.backlog .level-2 {
background: #f0f0f0;
}

.backlog .level-2 .summary {
text-indent: 24px;

}

.backlog .level-3 .summary {
text-indent: 36px;
}

.backlog .level-4 .summary {
text-indent: 48px;
}

.backlog .level-5 .summary {
text-indent: 60px;
}

#backlog .childcontainer {
height: auto !important; /* need to override the height of dd
element which is actually a container itself */
}

.backlog dt {
/* background: #f0f0f0;*/
}

.backlog dd {
background: #fff;
/*color: #333;*/
}

/* Making parents bold */
.backlog dt.container {
/*background: #f0f0f0;*/
/*text-shadow: 0 1px 1px #CCC;*/
}

.backlog .childcontainer dt.container {
/*background: #fff;*/
}
.backlog .childcontainer .container {
text-shadow: none;
}

/* Items that appear multiple times in the backlog */
.backlog dl .multi-linked-item {
color: #666;
}

.backlog dl .multi-linked-item .summary {
background: url("../images/item.multi-linked.png") top left no-
repeat;
}

.backlog dl .multi-linked-item a {
color: #CA6D0C;
}

/* Sortable visualisition classes */
/* TODO: Add a border around div.backlog and dl so lighting up these
borders does not change the layout */
#backlog .dragging,
.backlog dd.dragging {
border-collapse: collapse;
border: 2px solid yellow;
-webkit-box-shadow: 0 8px 8px #666;
-moz-box-shadow: 0 8px 8px #666;
}

#backlog .sortover,
.backlog dd.sortover {
/* border: 1px solid green !important; styles for drop
targets goes here */
}

#backlog .sortable-highlight-ticket-drop-target {
height: 10px !important;
background-color: yellow !important;
}

/* Select visualistaion classes */
#backlog dt.ui-selected {
background: #8395A6;
color: #fff;
}

#backlog dd.ui-selected {
background: #9BAFBF;
color: #fff;
}

/* show inlineEditable */
#contingent .inlineEditable,
#backlog .inlineEditable {
background: #D5DBE3;
cursor: pointer;
}

/* Contingent progress bar */
.backlog .bar {
margin-top: 5px;
border-collapse: collapse;
display: block;
width: 65%;
height: 9px;
border: 1px solid #ccc;
padding: 1px;
overflow: hidden;
position: relative;
}

.backlog .legenda {
display: block;
width: 30%;
float: right;
height: 18px;
text-align: right;
}

.backlog .progress {
position: absolute;
display: block;
height: 9px;
width: 50%;
background: #ccc;
}


#containerBox {
position: absolute;
border: 2px solid green;
}

/***** CONTINGENT *******/
#contingent {
overflow: hidden;
position: absolute;
height: 144px;
left: 0;
right: 0;
bottom: -144px; /* hidden by default */
}

#contingent h1 {
font-size: 11px;
padding: 0 10px;
width: auto;
margin: 0;
line-height: 34px;
height: 34px;
font-weight: bold;

background: #ccc url("../images/toolbar.bg.jpg") top repeat-x;
/* background: #c5c5c5 -webkit-gradient(linear, left top, left bottom,
from(#E3E3E3), to(#C4C4C4));*/
border: 1px solid #909090;
border-width: 1px 0;
text-shadow: 0 1px 0px #ddd;
font-weight: normal;
position: absolute;
top: 0;
right: 0;
left: 0;
}

#contingent #contingents-close,
#contingent #contingents-close.down {
display: block;
width: 14px;
height: 14px;
background: url("../images/button-contingent-close.png") top left no-
repeat;
float: left;
margin: 10px 5px;
}

#contingent #contingents-close:hover {
background-position: left -14px;
}

#contingent h1 span {
background: url("../images/icon-contingent.png") top left no-repeat;
vertical-align: middle;
display: block;
height: 24px;
width: 24px;
float: left;
margin: 5px;
}

#contingent .contingent-container {
position: absolute;
top: 36px; right: 0; bottom: 24px; left: 0; /* clearing the bottom
toolbar */
overflow-y: scroll;
overflow-x: hidden;
}

#contingent table {
width: 100%;

border-collapse: collapse;
/* position: relative;*/
margin: 0;
}

#contingent td {
font-size: 11px;
width: 14%;
height: 22px;
}

#contingent td.name {
width: 30%;
}

#contingent thead td {
position: relative;
border-left: 1px solid #ddd;
/* ellipsis */
word-wrap: break-word;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
padding: 0 1%;
height: 22px;
}

#contingent tbody td {
padding: 0 1%;
height: 23px;
border-bottom: 1px solid #eee;
border-left: 1px solid #ddd;
/* ellipsis */
word-wrap: break-word;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}

#contingent td .progressContainer {
float: left;
display: block;
width: 50%;
height: 8px;
margin-top: 3px;
}

#contingent td .progress {
width: auto;
margin: 0;
height: 100%;
border: 1px solid #ddd;
padding: 1px;
overflow: hidden;
}

#contingent td .bar {
display: block;
background: #ccc;
height: 100%;
float: left;
}

#contingent td span {
display: block;
float: right;
width: 35%;
/* ellipsis */
word-wrap: break-word;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}

#contingent td input {
/* TODO: This value should be relative, but using
* 50% makes the coulmn width jump. */
width: 75px;
}

/**** Contingent Exposed ****/
#exposed .add-contingent {
margin-bottom: 19px;
padding-bottom: 10px;
overflow: auto;
border-bottom: 1px solid #aaa;
}

#exposed .add-contingent h1 {
font: normal normal bold 14px/18px Helvetica, Arial;
border-bottom: 1px solid #aaa;
}

#exposed .add-contingent label {
width: 30%;
float: left;
line-height: 20px;
height: 20px;
margin-bottom: 10px;
}

#exposed .add-contingent input {
width: 65%;
float: right;
line-height: 20px;
height: 20px;
margin-bottom: 10px;
}

#backlog #loader {
top: 48px; /* clear the header */
}

/* Used for inline editing and the contingents */

#exposed {
position: absolute;
*width: 500px; /* IE6 and 7 patch */
top: 5%;
left: 50%;
margin-left: -250px;
background: #eee;
-webkit-box-shadow: 0 2px 8px #000;
-moz-box-shadow: 0 2px 8px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

#exposed form {
margin: 0;
padding: 10px;
}

#exposed td input, #exposed td select {
width: 150px;
overflow: hidden;
}

#exposed fieldset div {
font-size: 10px;
}

#exposed span.hint {
padding-left: 20px;
display: block;
color: #666;
}

#exposed table th,
#exposed label {
vertical-align: top;
text-align: left;
font-size: 10px;
}

#exposed input#field-summary,
#exposed input#field-reporter { width: 350px; }
#exposed textarea#field-description { width: 352px; height: 70px;}


#exposed .buttons {
display: block;
width: 100%;
margin: 10px 0;
height: 20px;
padding-right: 10px;
}

[Robert Buchholz]

Hey Rick,

On Tuesday 01 June 2010, Rick wrote:
> Here is my customized newbacklog.css file. I just looked through the
> trac.ini file, and although I have customized the columns in my
> backlogs I don't think the CSS should be any different.

I'm really glad you like the CSS classes that Martin added ;-) and
thanks for sharing the stylesheet. Have you tried out putting the
modifications into a new CSS file that is "local" for you? Markus posted
a site.html file that works with Agilo in this thread:
http://groups.google.com/group/agilo/browse_thread/thread/982233f94523d395/

Basically, you should be able to take that HTML file to incldue a CSS
file which carries your modifications. All the things that you simply
*add* can be in there. If you *override* a default CSS property of Agilo
(font size), you need to mark it like so:
#backlog { font-size:14px !important; }

In the long term, this should lower the maintenance overhead of your
modifications -- and it would make for a great article in our Wiki at
dev.agile42.com.

Robert

[Rick]

That sounds great - I'll try it out next time I want to make a change.



On Jun 2, 9:12 am, Robert Buchholz <robert.buchh...@agile42.com>
wrote:

> Hey Rick,
>
> On Tuesday 01 June 2010, Rick wrote:
>
> > Here is my customized newbacklog.css file.  I just looked through the
> > trac.ini file, and although I have customized the columns in my
> > backlogs I don't think the CSS should be any different.
>
> I'm really glad you like the CSS classes that Martin added ;-) and
> thanks for sharing the stylesheet. Have you tried out putting the
> modifications into a new CSS file that is "local" for you? Markus posted

> a site.html file that works with Agilo in this thread:http://groups.google.com/group/agilo/browse_thread/thread/982233f9452...

[Lior K]

Just wanted to comment that we make use of the modified css and new
classes (with color coding of our own)- and it does wonders to how the
new backlog looks!

IMO this is one of the top features in this release (together with the
ability to move stories+tasks accross sprints)

Team spirit has gone up with this release :)

> ...
>
> קרא עוד »

[Lior K]

Here's the CSS that we use:
- different color for requirements, stories, bugs and tasks,
- grayed and cross over line for completed tickets
- indentation according to hierarchy level
- white background for most items (easier to handle)
- slight font changes

--- beginning of newbacklog.css ------

#backlog {
font-size: 12px;

.backlog .tickettype-bug {
color: #990000;
}

.backlog .tickettype-task {
/*color: #333366; */
}

.backlog .tickettype-story {
color: #000066;

}

.backlog .ticketstatus-new {
/*color: ;*/
}
.backlog .ticketstatus-accepted {
/*color: ;*/
}
.backlog .ticketstatus-closed {

color: #999999;
text-decoration: line-through;
}
.backlog .level-1 {
/* background: #e0e0e0; */
background: #f0f0f0;

}



/* If we support more than 5 levels, we should
probably start to
generate these styles dynamically */
.backlog .level-1 .summary {
text-indent: 12px;
font-weight: bold;
}
.backlog .level-2 {

/* background: #f0f0f0; */
background: #ffffff;

background: #ccc;
height: 100%;
float: left;
}

#contingent td span {
display: block;
float: right;
width: 35%;

/* ellipsis */
word-wrap: break-word;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}

[Formwandler]

Both sample CSS files are fine with the backlogs. But they break the
team statistics page:
- team members are not visible any more on the statistics page
- velocity graphs do overlap the sprint list
- the sprint time-line table is broken