Customize Change quick launch style and design SharePoint

Check out Best Alternative to InfoPath


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:


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.


You May Also like the Following SharePoint Online Tutorials:

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 →