How do I add a border line at the bottom for each group header title in the Summary Link webpart?

Question

Hi I was wondering if someone could help me out a little. I am trying to add in a border at the bottom on the group headers for the summary link webparts. This is how I have it styled down below. Any assistance would be greatly appreciated:

.groupheader { 
    padding-left: 10px !important;
    padding-right: 5px !important; 
    border-bottom: 1px #000000;
}

Answer 1

All you need to do is to add solid to the border-bottom property, so it would look like this:

.groupheader { 
    padding-left: 10px !important;
    padding-right: 5px !important; 
    border-bottom: 1px #000000 solid ;
}

Answer 2

You can create custom XSL with Custom CSS instead of modifying existing one.

Steps to update:

1) First we will create css class:

.SingleLine
{
   Border-bottom:1px solid #000000; text-decoration:none;
   FONT-FAMILY: Arial, Helvetica; font-size:12px;
}

.SingleLine A, .SingleLine A:link, .SingleLine A:active,.SingleLine A:visited
{
    text-decoration:none;

}

Add above mentioned css class to a file and upload it to your site .

2) To find and modify Summary Link styles

• Navigate to the home page of your Web site and click View All Site Content.
• Click Style Library.
• Click XSL Styles Sheets. The list of XSL files available in the Style Library for all three Web Part types appears.
• Download ItemStyle.xsl and open in editor and add following code:

<xsl:template name="SingleLine" match="Row[@Style='SingleLine']" mode="itemstyle">
<xsl:param name="GroupPosition">
<xsl:variable name="SafeLinkUrl">
<xsl:call-template name="OuterTemplate.GetSafeLink">
<xsl:with-param name="UrlColumnName" select="'LinkUrl'">
</xsl:with-param></xsl:call-template>
</xsl:variable>
<xsl:variable name="SafeImageUrl">
<xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
<xsl:with-param name="UrlColumnName" select="'ImageUrl'">
</xsl:with-param></xsl:call-template>
</xsl:variable>
<xsl:variable name="DisplayTitle">
<xsl:call-template name="OuterTemplate.GetTitle">
<xsl:with-param name="Title" select="@Title">
<xsl:with-param name="UrlColumnName" select="'LinkUrl'">
</xsl:with-param></xsl:with-param></xsl:call-template>
</xsl:variable>
<xsl:variable name="LinkTarget">
<xsl:if test="@OpenInNewWindow = 'True'">_blank</xsl:if>
</xsl:variable>
<div id="linkitem" class="dateFont">
<xsl:if test="string-length($SafeImageUrl) != 0">
<div class="lightB">
<a href="http://www.blogger.com/%7B$SafeLinkUrl%7D" target="{$LinkTarget}">
<img class="image" src="http://www.blogger.com/%7B$SafeImageUrl%7D" alt="{@ImageUrlAltText}">
</a>
</div>
</xsl:if>
<div>

Note: as i cannot add Table tags in answer, posting screenshot of code which has to be included at end of above code in screenshot. Refer here to get text code.

3)Now upload updated ItemStyle.xsl in the library.

4)After uploading the ItemStyle.xsl in the library, newly created styles are available in the item style: