Customize Change quick launch style and design SharePoint

InfoPath alternatives for form designing SharePoint

In this post we will discuss how to change quick launch style and design in SharePoint.

Also you can check out:

– SharePoint 2013 JavaScript Client Object Model Example

– Display or Hide Quick Launch SharePoint 2010

– Introduction to SharePoint 2013 REST service

To modify quick launch style and make it as menu look and feel like this:

Customize Change quick launch style and design SharePoint
Customize Change quick launch style and design SharePoint

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.

Similar SharePoint 2013 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 →

Leave a Reply