Customizing SharePoint 2010 global navigation with Css and jQuery

By Eranda -
The global navigation in SharePoint is an important factor for the SharePoint site, this navigation are there to help orient users so they easily can move around the site. So when it comes to branding and customizing a SharePoint site it´s one of the key factors. When you branding the global navigation don´t forget to think simple but attractive, users may use the site navigation more than they use the search to find information.
In SharePoint 2010 the global navigation renders with unordered lists and list items (UL and LI), which gives us a simpler and more standard way for customization, especially compared to previous versions of SharePoint when the navigation rendered in a nestled table markup. There are a couple of ways and tools when it comes to build a custom navigation in SharePoint. The central point for the navigation is the functionality and the look and feel that means that we have to deal with CSS 2.1 or 3.0 and the SharePoint ASP menu control and its data source.






An example of a customized SharePoint OTB menu with use of CSS and jQuery. Check the nextcomming post (Part II) of how to extend the navigation with jQuery.


Part 1 : http://chrisstahl.wordpress.com/2010/11/04/customizing-sharepoint-2010-global-navigation-with-css-and-jquery-2/


Part 2 : http://chrisstahl.wordpress.com/2010/11/16/customizing-sharepoint-2010-global-navigation-with-css-and-jquery-%E2%80%93-part-ii/

Comments

Post a Comment

Popular posts from this blog

Apply CSS styles to SharePoint Web parts

By Eranda -
Image
In SharePoint we are using various types of web parts. List View web part are one of major type which uses to populate data on the web page from a SharePoint list. By default all the web parts of the page use the styles inherits from the site theme. Here I explain a simple workout to apply a CSS style to a web part only using out of the box features of SharePoint 2010. There are only 3 steps for you to follow. 1. Get the ID of web part you wants to apply CSS style 2. Add Content Editor web part 3. Apply CSS style as you required Step 1 ♣ Go to “view source” of the browser you are using and search for the web parts name. In my scenario, it’s “Emergency”.   ♣ Now grab the ID number mentioned there at the end of WebPartTitleWPQ 2 . “2” is the ID of “Emergency” web part in my web page. Step 2 ♣ Now add a Content Editor Web Part by go to edit mode of the page. ♣ Set the Chrome Type as None of the added Content Editor Web Part. S...
Read more

SharePoint Number Column Without Commas

By -
Image
Avoiding thousand separator(Comma) in SharePoint Number field SharePoint number fields having thousand separators(Comma) which may not want us to need every time. But there are no possibility to avoid the thousand separator(Comma) in the number fields.  To avoid this comma we can do a small workout as following.. Suppose our Number field named as "Student No." Create another Calculated column and name it as "Student Number" Then you have to type the formula according to the following format     = TEXT( Number_Column_Name, "0") And click Save In our scenario it will show as =TEXT([Student No],"0") Note : If the Student No field will empty, the value will be shown as "0".... Or if you want to keep it blank you have to adjust the formula as   =IF( [Student No] <>"",TEXT( [Student No] ,"0"),"") 
Read more

Suppress field in Crystal Reports

By Eranda -
Image
When implementing a system we are normally inserting default value for the fields in Database rather than inserting NULL values. But when we retrieving data from the database and visualize them from a report, all the default values come to the report. To overcome the situation we can use two methods. One method is mention that default value on a report and says consider it as default value to that relevant field. The other method is use the Suppress option given by the Crystal report engine. To use that option, first you have to create the report in the normal way.  Then select the field you have to suppress and right click on it.  Then you have to select Format Object menu item from the popup menu. Then it will open Format Editor window which will enable to do formatting. Now navigate to Common tab of the window. Now check the Suppress check-box and click the button in front of the suppress check box. ...
Read more