In my previous article Sharepoint Branding And Customizations - Part 1, we went through how to change the logo and customize our Top Navigation Menu, Viz our step1 and step 2 of our tutorial.
In this article we will proceed with our next two steps
This will add the styling to your left navigation bar with the hover effect, But still we need to add accordion style to it.
Copy the following code-snippet to your <Head> tag of V4.master page
If you look through the above code-snippet you will find that we have made reference to jsapi.js file. You can find this jsapi.js file over here. Download this file and upload it to the Style Library Folder and you are good to go. (You can upload it to different location also but do not forget to update the location in this code-snippet)
Check-In the Master page, And your Left Navigation Quick Launch is ready with the Accordion Effect !
4. Add Social Icons
Now a days Everyone is going social, so its necessary to market your brand on the social networking sites like Facebook, Twitter, Linked-In and so on. This way has been proved very useful to market your business/site.
Save/Check In your master page, and you can see the Social Networking icons located right above the Top Navigation Bar !
You can customize it to add/remove the icons according to your choice.
My next article will be end of this tutorial(Hopefully) !
In this article we will proceed with our next two steps
- Customize your Quick Launch on Left Navigation Bar
- Add Social Icons
3. Customize your Quick Launch on Left Navigation Bar
As we modified the styles for the top Navigation bar we will add the style for the left navigation as well. But in addition to that we will add accordion to the Left Navigation Bar using JQuery. First lets start with our styling.
Copy the following code-snippet under the <Head> tag of your V4.master page. Avoid merging this style tag with the previous style tag of our Top Navigation Bar, to make the code more readable for future reference
<style type="text/css">
/* --------- Quicklaunch ----------- */
.ms-quickLaunch
{
padding-top:
0px;
}
#s4-leftpanel-content
{
background-color:
transparent !important;
}
#s4-leftpanel-content
{
border:
0px !important;
background-color:
transparent !important;
}
.s4-ql
{
background-color:
#fff;
margin-bottom:
0px !important;
}
/*
Inner nav element */
.menu-vertical
{
padding:
0px !important;
}
/* top
rounded */
#QLtopwrapper
{
background:
url('/Style%20Library/Images/QLtop.png') repeat-x;
height:
19px;
width:
220px;
}
/*
bottom rounded */
#QLbottomwrapper
{
background:
url('/Style%20Library/Images/QLbottom.png') repeat-x;
height:
19px;
width:
220px;
}
.menu-vertical
> ul.root
> li.static
> .menu-item
{
border-bottom:
1px #929292 solid !important;
padding-left:
0px;
color:
#fff;
font-family:
Arial;
font-size:
11px;
font-weight:
bold;
background-color:
#00557B !important;
background-color:
#00557B !important;
}
.menu-vertical
> ul.root
> li :hover
{
color:
#000000;
background:
-webkit-gradient(linear, left top, left bottom,
from(#0087C1), to(#ffffff));
background:
-moz-linear-gradient(top, #0087C1, #ffffff);
}
/*
Selected */
.s4-ql
a.selected
{
background-color:
transparent;
background-image:
none;
border:
1px transparent
solid !important;
color:
#fff !important;
}
/* no
border in teamsites */
.s4-ql,
.s4-specialNavLinkList
{
border:
0px !important;
}
.menu-vertical
> ul.root
> li.static
{
padding:
0px !important;
margin:
0px !important;
}
/*
headers */
.menu-vertical
> ul.root
> li.static
> a.menu-item
{
padding:
10px 4px 10px 5px;
border-bottom:
1px #ccc solid;
}
/*
headers selected for publishing sites */
.menu-vertical
> ul.root
> li.static
> a.selected
{
padding:
10px 4px 10px 3px;
padding-left:
4px !important;
background-color:
#777 !important;
}
/*
Subitem container */
.menu-vertical
> ul.root
> li.static
> ul
{
margin-bottom:
0px;
padding-top:
0px;
padding-bottom:
0px;
}
/*
SubItems wrap */
.menu-vertical
> ul.root
> li.static
> ul.static
> li.static
> a
{
font-family:
Arial, Helvetica,
sans-serif;
font-size:
11px;
padding:
10px 4px 10px 8px;
color:
#ccc !important;
}
/*
SubItems */
.menu-vertical
> ul.root
> li.static
> ul.static
> li.static
> a > span > span
{
color:
#333;
text-decoration:
none !important;
}
/*
SubItems hover */
.menu-vertical
> ul.root
> li.static
> ul.static
> li.static
a:hover
{
text-decoration:
none !important;
background-color:
#0087C1; /*
fallback */
color:
#000;
}
/*
Selected SubItems */
.menu-vertical
> ul.root
> li.static
> ul.static
> li.selected
> a.selected
{
background-color:
#fff;
border:
1px transparent
solid !important;
padding-left:
10px !important;
}
/*
Selected SubItems */
.menu-vertical
> ul.root
> li.static
> ul.static
> li.selected
> a.selected
> span
> span
{
color:
#000;
}
.menu-vertical
> ul.root
> li.static
> ul.static
> li
{
border-bottom:
1px #8C8C8C solid !important;
}
</style>
|
<script type="text/javascript" src="../../Style
Library/jsapi.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.menu-vertical>ul.root>li.static>a").toggle(
function
() {
$(">ul",
$(this).parent()).show("fast");
},
function
() {
$(">ul",
$(this).parent()).hide("fast");
}
);
$("div.menu-vertical>ul.root>li.static>ul.static").css("display", "none");
var
s = $("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent();
var
p = s.parent();
p.find('ul').css("display", "");
});
</script>
|
You can get the icons used in this example from here. Upload the icons into the Style Library/Images folder of your site.
Now again we will be playing with the CSS again.
Copy the below code-snippet and paste it in the <Head> tag of your V4.master page
<style>
#social
{
margin-bottom:
0px;
position:
relative;
float:
right;
width:
300px;
margin-right:
10px;
height:
50px;
}
#social
UL
{
padding-bottom:
0px;
list-style-type:
none;
margin:
0px;
padding-left:
0px;
padding-right:
0px;
list-style-image:
none;
padding-top:
0px;
}
#social
LI
{
float:
left;
margin-left:
2px;
display:
inline;
}
#social
A
{
text-indent:
-99999px;
width:
55px;
display:
block;
height:
55px;
}
#social-fl
A
{
background-position:
0px 0px;
}
#social-fb A
{
background-position:
-88px 0px;
}
#social-tw
A
{
background-position:
-95px 0px;
}
#social-rss
A
{
background-position:
-143px 0px;
}
#social
{
margin-top:
0px;
float:
right;
}
#social
UL
{
padding-bottom:
0px;
list-style-type:
none;
margin:
0px;
padding-left:
0px;
padding-right:
0px;
list-style-image:
none;
padding-top:
0px;
}
#social
LI
{
float:
left;
margin-left:
2px;
margin-right:
10px;
}
#social
LI A
{
text-indent:
-99999px;
width:
48px;
display:
block;
background-repeat:
no-repeat;
height:
48px;
}
#social-tw
{
background-image:
url('/Style%20Library/Images/twitter4_512.png');
}
#social-li
{
background-image:
url('/Style%20Library/Images/linked_in.png');
}
#social-fb
{
background-image:
url('/Style%20Library/Images/facebook.png');
}
#social-rss
{
background-image:
url('/Style%20Library/Images/google_plus.png');
}
#social-blog
{
background-image:
url('/Style%20Library/Images/blog.png');
}
</style>
|
At this point we have just prepared the style, now we acctually need to add it in our Body of our V4.master page.
Locate the <td class="s4-socialdata-notif"> tag in your master page and add the below EXACT code-snippet ABOVE this tag.
<td>
<div id="social">
<ul>
<li id="social-tw"><a title="Follow us on Twitter" href="https://twitter.com/BeingDhavalShah">
Twitter</a></li>
<li id="social-li"><a title="Link up with us on Linked In" href="http://in.linkedin.com/pub/dhaval-shah/22/8b0/280">
LinkedIn</a></li>
<li id="social-fb"><a title="Friend us on Facebook" href="https://www.facebook.com/dhaval.shah01">
Facebook</a></li>
<li id="social-rss"><a title="Connect on Google Plus" href="https://plus.google.com/114652325732564196178/posts?hl=en">
Google Plus</a></li>
<li id="social-blog"><a title="Dhaval Shah's Blog" href="http://kalashnikovtechnoblogs.blogspot.com">
Blog</a></li>
</ul>
</div>
</td>
|
Stay tuned ! Happy SharePointing !
Please do Share/Like/Comment if this article helped you, author really appreciates.
