How to change the style of a summary link web part in sharepoint 2007

Question

I created a summary link web part on my sharepoint 2007 page. Now I see that If I select the style "Banded" for the group headers, they come up highlighted in grey.

Is there any way to change that background color into some other one? Maybe by changing some .css file or by adding some script in a content editor web part?

Answer 1

You add a custom style sheet to you page using a content editor web part or customize the master page. You will find some CSS snippet on my blog post on how to turn summary link web part into an accordion.

What you need to customize is basically the groupheader:

.groupheader{
    background-color: #0072C6;
    color: white;
    font-size: 140%;
    padding: 0.5em;
    padding-left: 0.75em;
    margin-right: 0.5em;
    margin-bottom: 1px;
}

.groupmarker:hover .groupheader{
    cursor: pointer;
    background-color: #0597FF;
}

.dfwp-list{
    background-color: #0072C6;
    margin-bottom: 0.5em;
    margin-right: 0.75em;
}
.dfwp-list .item:hover{
    background-color: #0597FF;
}
.dfwp-list .link-item a{
    margin-left: 2em;
    color: white;
}