Customizing the Global Navigation in SharePoint with CSS, JQuery, and Superfish
We decided to setup a base that we can use at clients when they want to brand the global navigation and have a proper dropdown style menu.
We went with JQuery, and I eventually came across this library for JQuery called superfish which is built for dropdown menus. So below is the steps I followed to get this working.
Thanks
I first have to thank Christian Stahl, his post on how to customise the global Navigation with CSS (can be found here) was really helpful in sorting out which CSS classes needed to be overridden in my custom CSS. I actually use his CSS file below as a starting point.
Some Caveats
I found that you have to have the following for my option to work:
- Publishing Sites Feature must be enabled.
- In Site settings, sub sites must be checked in navigation for global navigation
When I start below I am making the assumption that the above are in place in your SharePoint environment.
Files
All the files you need are here
Steps
you will need to upload upload the files in the folder somewhere. For easy of use, I uploaded them to a folder in the Styles Library in the root site collection.
Once you have uploaded these files, you need to do a bit of wizardry in your master page to get these to work.
So open up your master page in your preferred editor, I used SharePoint designer, and add the above files into the head section:
One thing you must remember is to put the CSS file in after the line
<SharePoint:CssLink runat=”server” Version=”4”/>
This line loads the default CSS file, and you want your CSS to override the global navigation CSS classes in that file, so it must go after that line.
If you check in and approve your master page, and do a refresh of the site, you should see your global navigation looking like I have blow, if you haven’t changed the CSS file provided at all:
The drop down functionality now needs to be setup. You have already included the JQuery and Superfish files, so we just need to make one minor change to the global navigation control in the master page and also include the JQuery that will show the dropdown.
So back to your favourite editor, and add the following into your head section again:
$(document).ready(function() {
$('.menu-horizontal ul ul ul').superfish({
delay: 1000,
animation: {opacity:'show',height:'show'},
speed: 'normal',
autoArrows: false,
dropShadows: false
});
});
just a note, I found a script section already there so I added the above code in there:
<script type="text/javascript">
var _fV4UI = true;
</script>
As you can see, we are telling JQuery to apply Superfish to the global navigation CSS classes. the variables we set are pretty straight forward, but you can get comprehensive documentation on the Superfish site.
The last change we need to make is to tell the global navigation control to increase the display Levels, I have set mine to 2. You need to search for a SharePoint:AspMenu control with the ID of “TopNavigation” (depending on the master page you are editing the id may include other text, for example, if you edit the V4.master the ID will be “TopNavigationV4” while default is “TopNavigationMenu”) and set the attribute “MaximumDynamicDisplayLevels”:
Once again, check in and approve the master page and then refresh your site, if all goes according to plan you should get the following:
If you don’t get a drop down menu like I have above then check the following:
-
You have the Publishing feature activated for your site collection:
-
Ensure that each site is a publishing site, or has the publishing features enabled on them.
-
Ensure that “Show subsites” is checked in site settings:
-
Ensure that each sub site is set to use the same navigation items as it’s parent and that it is set to show sub-sites:
Disclaimer:
Please read the disclaimer if you plan on using anything from this article.
Bulk upload of Profile Pictures using PowerShell
I have a client who has a lot of users but we set up their SharePoint environment for them, so they had a requirement that when they go live with SharePoint that the User Profiles are already setup with pictures etc. Since they had a large number of users, and didn’t want to do this manually, I wrote a PowerShell script that will upload the profile pictures to the MySite host, and then link them to the user’s profile.
Some caveats that I have come across while developing the solution:
- The user account used to run the script must have full control administrator permissions on the User Profile Service Application
- The user account used to run the script must have ShellAdmin rights in Powershell
- You can’t use the account used to install SharePoint, even if it is a farm account
- The account used to run the script must also be a Farm account
- The pictures used should be in either jpg or png format. You can use bmp files but the organogram doesn’t work well with bmp files
so lets get cracking.
Ensuring ShellAdmin rights
There are three different PowerShell commands you can use to manage the ShellAdmin permissions:
- get-SPShellAdmin
- add-SPShellAdmin
- remove-SPShellAdmin
to grant ShellAdmin permssions you use the following command:
add-SPShellAdmin –username <username> eg: add-SPShellAdmin –username sps2010-farm
you don’t need to include the domain. You can also just type add-SPShellAdmin and hit enter, and powershell will prompt you for the username:
to check if the user you want to add already has permissions, just type get-SPShellAdmin and you will get a list of the users with the permissions. To remove you use remove-SPShellAdmin, just like the add command, it will prompt you for the username.\
User Profile Service Application administrators
The account that will be used to run the script must be an administrator with “Full Control” permissions on the Profile Service Application.
Browse to “Manage Service applications” in Central Administration. Select the Profile Service application so that the ribbon is activated:
Click on “Administrators”:
Ensure that your account is added and has “Full Control” permissions:
Also remember to make sure that the account is a Farm Administrator.
Upload User Profile Pictures
A couple of things must be done before we can run the script:
- Create a SharePoint list with the usernames and filenames
- Store all the photos in a central folder on the servers harddrive
- update the configuration variables in the script
I will just show snippets of the script for now, but will attach the list template, and full script at the end.
PhotoUpload List
This list is straight forward custom list, with two columns:
- Filename – single line of text
- username – single line of text
For now, you must create this list in the root site of a site collection. for example:
if my SharePoint URL is www.mysite.co.za, which points to my root site collection, my list url is www.mysite.co.za/Lists/PhotoUpload/.
below is a sample of the list with data:
I have made the assumption that all the files listed in the list will be stored on the server where you are running the script from.
The Script
So lets update the script with your environment details:
#Please ensure the variables below are correct for your environment $domain = "<yourdomain>" $PhotosFolderPath = "<local folder with the files>" $siteCollectionURL = "<the location of the root site collection with the photo list>" $MySiteUrl = "<URL of your MySiteHost>" $listName = "<name of the list that contains the photos and users>" $Overwrite = $true # end of environment variables
This is pretty self-explanatory, but the one thing i must talk about here is the $Overwrite = $true. This will cause the script to overwrite any photos that exist for the users in the SharePoint list. This is useful for when you want to update a user profile picture. If you want the script to only add photos to profiles that don’t have them, then replace $true with $false.
So once you have added all the details to the SharePoint list, put all the photos in the local folder on your server, and updated your environment variables in the script, all you need to do is run it.
So run “SharePoint 2010 Management shell” and browse to the folder where you have stored this script, and type in the following command:
./UploadProfilePictures.ps1
The script will give you continuous feedback while it runs, it also uses coloured text to indicate important messages:
- Green: This is just a notification that something has completed successfully.
- Yellow: this is used to indicate a warning: such as the profile already has a picture
- Red: indicates an issue, either the user specified doesn’t exist in Active Directory, or there was an error that cause the script to stop.
The script will pause for a bit at the end as it will call a function that runs through the User Profile pictures and create the correctly sized pictures of any new pictures added. This will ensure that no matter where the profile picture is displayed in SharePoint, it will look right. If this doesn’t run, you will get funny things happening with the profile pictures.
Files
Disclaimer:
Please read the disclaimer if you plan on using anything from this article.
about me
I am a C#, Silverlight, K2 workflow and Sharepoint Consultant, living and working in Johannesburg, South Africa. I have a passion for teaching people anything I can in order to spread the knowledge and skills I have. You can follow me on twitter at @MrThirsty. You can view my full profile at about.me
Certifications
