Customize Sharepoint Summary Link Webpart

Step 1.

  • Open SharePoint Using System Account >
  • Navigate to Site Actions > Edit Page > Add a Summary Link Web Part

Step 2.

  • Open SharePoint Using System Account >
  • Navigate to Site Actions > Edit Page > Add a Content Editor Web Part
  • In the Web Part Click on The option Click here to Add New Content, And on the ribbon HTML > Edit HTML Source Then Paste the below CSS Code.
<style>
.groupheader
{
    PADDING-BOTTOM:0.5em;
	BACKGROUND-COLOR:#0072c6;
    PADDING-LEFT:0.75em;
    PADDING-RIGHT:0.5em;
    FONT-FAMILY:“Segoe UI”,Tahoma,Geneva,Verdana,sans-serif;
    MARGIN-BOTTOM:1px;
    COLOR:white;
    FONT-SIZE:140%;
    MARGIN-RIGHT:0.5em;
    PADDING-TOP: 0.5em;
}
.groupmarker:hover.groupheader
 {
	BACKGROUND-COLOR: #0597ff;
	CURSOR: pointer;
}
.dfwp-list
 {
	BACKGROUND-COLOR:#0072c6;
	MARGIN-BOTTOM:0.5em;
	MARGIN-RIGHT:0.75em
}
.dfwp-list.item:hover
 {
	BACKGROUND-COLOR:#0597ff
}
.dfwp-list.link-itemA
{
    COLOR:white;
    MARGIN-LEFT:2em;
}
<style>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s