Customize Change quick launch style and design SharePoint


In this post, we will discuss how to change quick launch style and design in SharePoint. To modify quick launch style and make it as menu look and feel like this:


New to Office 365 SharePoint Online? Get Office 365 Enterprise E3 Subscription & Try out all the features

Step 1: Open master page v4master.master page in SharePoint designer

Step 2: Download images from following links and upload in SharePoint site assets libaray.

http://photouploads.com/images/bckhover.jpg
http://photouploads.com/images/menubg.png

Step 3: Refer the links in css

Copy the below style and place in .css file and upload to style library



DIV #s4-topheader2 {
PADDING-BOTTOM: 2px; BACKGROUND: url(https://md-jayabharathi:28586/SiteAssets/BCKHover.jpg) repeat-x; BORDER-TOP: 0px
}
.s4-toplinks {
TEXT-TRANSFORM: uppercase; BACKGROUND: url(https://md-jayabharathi:28586/SiteAssets/BCKHover.jpg); FONT-SIZE: 14px; FONT-WEIGHT: bold
}
.s4-tn .menu LI A.static {
BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FONT-FAMILY: “Helvetica Neue” , Arial, Helvetica, sans-serif; COLOR: #fff; BORDER-TOP: medium none; BORDER-RIGHT: medium none; PADDING-TOP: 10px
}
.s4-tn .menu LI A.selected {
BACKGROUND-IMAGE: none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR:#5500FF; MARGIN: 0px; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
.s4-tn .menu LI A.static:hover {
BACKGROUND: #fff; COLOR: #5500FF; TEXT-DECORATION: none
}
DIV #s4-searcharea {
POSITION: relative; TOP: 10px
}
.s4-ql UL.root UL {
MARGIN-BOTTOM: 0px
}
.s4-ql UL.root > LI > .menu-item {
PADDING-BOTTOM: 1px; MIN-HEIGHT: 30px; BACKGROUND: url(https://md-jayabharathi:28586/SiteAssets/BCKHover.jpg) no-repeat 0px -10px; FONT-SIZE: 1em; PADDING-TOP: 1px
}
.s4-ql UL.root UL > LI > A {
PADDING-BOTTOM: 1px; MIN-HEIGHT: 30px; BACKGROUND: url(https://md-jayabharathi:28586/SiteAssets/BCKHover.jpg) no-repeat 0px -10px; PADDING-TOP: 1px
}
.s4-ql UL.root > LI > .menu-item:hover {
BACKGROUND: url(https://md-jayabharathi:28586/SiteAssets/menu_bg.png) no-repeat 0px -10px; TEXT-DECORATION: none
}
.s4-ql UL.root UL > LI > A:hover {
BACKGROUND: url(https://md-jayabharathi:28586/SiteAssets/menu_bg.png) no-repeat 0px -10px; TEXT-DECORATION: none
}
.menu-vertical .menu-item-text {
TEXT-TRANSFORM: uppercase; COLOR: white; FONT-SIZE: 1em; FONT-WEIGHT: bold; PADDING-TOP: 5px
}

/*.s4-ba{
width:821px;
height:665px

}*/
.mytable
{
border-collapse:separate;
border-spacing: 1px;
width:100%;
}
.ribbonbackground, .s4-title {

background:url(‘/SiteAssets/bannernew.png’) no-repeat 0 0 !important;
}
—————————


Step 4:
Refer the above .CSS in master page as given below

<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/CUSTOMCSS.css %>” runat=”server” After=”corev4.css”/>

You can also check out how to use css in visual web part in SharePoint 2010.
Hope this code help you to change quick launch menu style.

Check out Best Alternative to InfoPath -> Try Now

FREE SHAREPOINT 2019 PDF

(Installation & Features)



About jayabharathi

The turning point in the process of growing up is when you discover the core of strength within you that survives all hurt.

View all posts by jayabharathi →