Modify the master page
- Add a link to Custom Css in master page.
- On the head tag of master page html add below highlight lines
<!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->
<!--SPM:<SharePoint:CssRegistration Name="https://portal.sharepoint.com/Style Library/Master.css" runat="server" After="corev15.css" />-->
- In your Custom master.css file, add the below CSS classes
.ms-core-listMenu-verticalBox UL.root > LI > .menu-item{
font-weight:bold;
background-color:#5482AB;
color:#ffffff;
border-bottom-color:#ffffff;
border-bottom-style:solid;
border-bottom-width:1px;
min-height:25px;
padding-top:5px;
padding-left:10px;
font-size:12px;
font-family:Arial, Helvetica, Sans-Serif !important;
}
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {
color: #ffffff !important;
background-color:#D95E00 !important;
text-decoration:none;
}
.ms-core-listMenu-verticalBox > ul.root > li.selected > a {
background-image:none;
background-color:#D95E00;
color:#ffffff !important;
}
.ms-core-listMenu-verticalBox > ul.root > li > a:hover {
background-image:none;
background-color:#D95E00;
color:#ffffff !important;
text-decoration:underline;
}
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a {
font-size:12px;
padding-left:10px;
font-family:Arial, Helvetica, Sans-Serif !important;
}
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected {
background:none;
color: #D95E00 !important;
background-color:#ffffff !important;
text-decoration: none;
border: 1px #fff solid;
font-weight:bold;
}
.ms-core-listMenu-verticalBox a.selected
{
border: 1px #fff solid !important;
}
.ms-core-listMenu-verticalBox UL.root UL
{
margin:0px 0px 10px 0px !important;
}
Thanks, great post!.
ReplyDeleteGreat post, truly helpful and works like a charm in Office365 as well. You've saved me a lot of time!
ReplyDeleteThis is a great post and saved me having to spend hours looking, one quick question how do you do the same for the blog quick launch as it is different to the standard quick launch?
ReplyDeleteThanks worked like charm.
ReplyDeleteLooks great, but how do I get this to accordion?
ReplyDeleteThanks.
Hi Ralph, please refer my next post for accordion http://akashkarda.blogspot.com/2014/06/quick-launch-accordion-with-arrow-in.html
ReplyDeleteThanks ! This is awesome :)
ReplyDeleteThanks for great post.
ReplyDeleteThanks
ReplyDeleteHow can I style only one link from left navigation ?
ReplyDeleteYou can use jQuery to find the element based on text or id and then use .css method on element to apply your styles
ReplyDeleteGreat work, thank you! Saved me a bunch of time
ReplyDeleteHi Akash, how can i insert a twitter widget in place of left navigation panel ?
ReplyDeleteAwesome Post. Thanks!
ReplyDeleteExcellent Sir :)
ReplyDeleteIs this possible to use the script editor to either make a call to a CSS file or put the code CSS rather than editing the MasterPage?
ReplyDeleteThanks for the great post
DeleteThanks for the great post
DeleteYou dont need to modify master page, you can add Alternate CSS url as well. Go to Site Settings -> Master Page -> Alternate CSS URL , choose the third option and provide the css file url.
DeleteHi, I went to Site Settings -> Master Page but I do not see Alternate CSS URL. I only see minimal.master, oslo.master, oslo.preview, seatle.master, seattle.preview, v4.master
DeleteThank You Vary Helpfull
ReplyDeleteVery good article. thanks . Great post.
ReplyDeleteMy requiredment is collapse expand left nave box
Could you please post if have any code for same.
DeleteRefer my article http://akashkarda.blogspot.com/2014/05/quick-launch-accordion-in-sharepoint.html
DeleteGreat. So how do you change the menus on the existing subsites and pages. The master file does not look the same
ReplyDeleteDoes with work with SharePoint Online Teams sites? I noticed there was no master.css file when I opened the site up.
ReplyDeleteYes, it will work in classic team site. Master.css is a custom css file which you can add to any document library and reference in master page.
DeleteHi Akash
DeleteThis works great and i now have a nice looking menu at the side but how do i make sure it sticks with subsites and pages? as it defaults back to normal