Branding SharePoint 2010: Personalizar o Estado Hover e Selecionado em Listas

Os pequenos detalhes fazem um design funcionar. Personalizar o estilo do estado hover e selecionado das linhas em listas SharePoint tornará o seu portal mais visualmente apelativo.

Seguem-se as regras de CSS, tiradas directamente do ficheiro COREV4.css, que terá que usar. Poderá reutilizar estas regras nos seus ficheiros de CSS em cada projecto, apenas precisa mudar as cores para combinar com o design.

Estilo Hover

tr.s4-itm-hover,
tr.ms-itmhover:hover,
tr.ms-ppanerow:hover > td
,tr.ms-ppanerowalt:hover > td{
  background-color:#f2faff;
}

tr.s4-itm-hover > td,
tr.ms-itmhover:hover > td{
 border-top-color:#c6e5f8 !important;
 border-bottom-color:#91cdf2 !important;
}

table.ms-listviewtable tbody tr.s4-itm-hover td.ms-vb-firstCell,
table.ms-listviewtable tbody tr.ms-itmhover:hover td.ms-vb-firstCell{
 border-left-color:#c6e5f8;
}
table.ms-listviewtable tbody tr.s4-itm-hover td.ms-vb-lastCell,
table.ms-listviewtable tbody tr.ms-itmhover:hover td.ms-vb-lastCell{
 border-right-color:#c6e5f8;
}

Estilo Selecionado

tr.s4-itm-selected,
tr.s4-itm-selected:hover {
 background-color:#98d6fd;
}

tr.s4-itm-selected > td, 
tr.s4-itm-selected:hover > td {
 border-top-color:#a5cce4 !important;
 border-bottom-color:#529dcc !important;
}

table.ms-listviewtable tbody tr.s4-itm-selected td.ms-vb-lastCell,
table.ms-listviewtable tbody tr.s4-itm-selected:hover td.ms-vb-lastCell{
 border-right-color:#91cdf2;
}

table.ms-listviewtable tbody tr.s4-itm-selected td.ms-vb-firstCell,
table.ms-listviewtable tbody tr.s4-itm-selected:hover td.ms-vb-firstCell {
 border-left-color:#9dcdeb;
}

Estilo do botão de dropdown

.s4-ctx-show:hover {
 background-color:#72c4fa;
 border-right-color:#4b8fbd;
 border-left-color:#7ab1d6;
}

.s4-ctx-show{
 background-color:#ccebff;
 border-color:transparent #91cdf2;
}