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 :) On 1 יוני, 18:43, Rick <[email protected]> wrote: > 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; > ... > > קרא עוד » -- Follow Agilo on Twitter: http://twitter.com/agiloforscrum Please support us by reviewing and voting on: http://userstories.com/products/8-agilo-for-scrum http://ohloh.net/p/agilo-scrum http://freshmeat.net/projects/agiloforscrum You have received this message because you are subscribed to the "Agilo for Scrum" Google Group. This group is focused on supporting Agilo for Scrum users and is moderated by agile42 GmbH <http://www.agile42.com>. To post to this group, send email to [email protected] To unsubscribe from this group, send an email to [email protected] For more options, visit this group at http://groups.google.com/group/agilo
