21 janeiro 2008

Modifique o layout do Trac



Você já ouviu falar no Trac? Ferramenta muito interessante! Aparentemente um simples sistema de tickets para helpdesk, com os plugins certos você pode facilmente organizar uma equipe Ágil... até mesmo o Jeff Shuterlandreferenciou a ferramenta em seu blog. Estamos usando o trac desde outubro na Audaces, e estou cade vez mais impressionado. Além do sistema de tickets existe ainda integração com subversion, subsistema de codeReview....

Mas estamos aki para falar de como modificar o tema padrão do trac...

Passos simples(supondo que vc jah tenha um projeto trac funcionando):

Primeiro Passo:No arquivo /templates/site_css.cs:

##################################################################
# Site CSS - Place custom CSS, including overriding styles here.
?>

@import url(/site/cascadeTracMeuTemplate.css);



Segundo Passo: No diretório htdocs crie o arquivo cascadeTracMeuTemplate.css com o seguinte conteúdo(Sim, copie e cole):


body {
background: #FFFFFF url(background.png) 0 0 repeat-x;
color: #000;
margin: 10px;
padding: 0;
}

form.addnew { clear: right; float: right; margin: -2em 0 4em; }

.nav {
position: relative;
}
.wikipage { padding-left: 18px; position: relative; left: 2%; width:94% }

/* BARRA MENU */
#mainnav {
background: #66CCFF url(nav_fundo.png) 0 0 repeat-x;
border: 1px solid #000;
font: normal 10px verdana,'Bitstream Vera Sans',helvetica,arial,sans-serif;
margin: .66em 0 .33em;
padding: .2em 0;
}
#mainnav li { border-right: none; padding: .25em 0 }
#mainnav :link, #mainnav :visited {
background: url(dots.gif) 0 0 no-repeat;
border-right: 1px solid #000;
border-bottom: none;
border-left: 1px solid #555;
color: #000;
padding: .2em 20px;
}
* html #mainnav :link, * html #mainnav :visited { background-position: 1px 0 }
#mainnav :link:hover, #mainnav :visited:hover {
background-color: #66CCFF;
border-right: 1px solid #000000;
}
#mainnav .active :link, #mainnav .active :visited {
background: #333 url(../topbar_gradient2.png) 0 0 repeat-x;
border-top: none;
border-right: 1px solid #000;
color: #eee;
font-weight: bold;
}
#mainnav .active :link:hover, #mainnav .active :visited:hover {
border-right: 1px solid #000;
}

/* LINKS */
:link, :visited {
text-decoration: none;
color: #3333CC;
border-bottom: 1px dotted #3333CC;
}

/* TIMELINE*/
dt :link:hover, dt :visited:hover { background-color: #eed; color: #3333CC }

dt em {
border-bottom: 1px dotted #bbb;
color: #3333CC;
font-style: normal;
text-decoration: none;
}

/* ROADMAP */
.milestone .info h2 em { color: #3333CC; font-style: normal }


/* FOOTER */
#footer {
clear: both;
color: #bbb;
font-size: 10px;
border-top: 1px solid;
height: 31px;
padding: .25em 0;
}

Terceiro Passo: Edite os arquivos site_header.cs e site_footer.cs no diretório templates:

SITE_HEADER.CS
####################################################################
# Site header - Contents are automatically inserted above Trac HTML
?>





--

#########################################################################
# Site footer - Contents are automatically inserted after main Trac HTML
?>




Quarto e último passo: Crie um degrade bacana para o background com o nome referenciado acima.

Resultado(obviamente com o logo ficou tosco...mas experimente trocá-lo por algo mais aceitável):

Nenhum comentário:

Postar um comentário