Navigation Drop Down Styles in SharePoint 2010

If you would like to stylize your navigation drop downs in SharePoint 2010 here are the 4 main key classes to update your CSS:



The OOTB Navigation Drop Down CSS: “COREV4.CSS” .s4-tn ul.dynamic{
/* [ReplaceColor(themeColor:"Light2")] */ background-color:white;
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */ border:1px solid #D9D9D9;
}
.s4-tn li.dynamic > .menu-item{
display:block;
padding:3px 10px;
white-space:nowrap;
font-weight:normal;
}
a:link{
/* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC;
text-decoration:none;
}
.s4-tn li.dynamic > a:hover{
font-weight:normal;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ background-color:#D9D9D9;
}
image
Example 
/* Drop Down: Container Style */ .s4-tn ul.dynamic{
background-color:white;
border:3px dashed #000;
}
/* Drop Down: Item Padding Style */ .s4-tn li.dynamic > .menu-item{
padding:10px 20px 10px 20px;
}
/* Drop Down: Hyperlink Styles */ .s4-tn li.dynamic > a{
font-size: 9pt;
font-weight:normal;
color:#000;
}
/* Drop Down: Hyperlink Hover Style */ .s4-tn li.dynamic > a:hover{
font-weight:bold;
background-color:#0C0;
color:#FFF;
}
What it will look like:
image
Simply take the above 4 main CSS classes and add/edit/delete the properties to make your drop down style truly unique.

Comments

Post a Comment

Popular posts from this blog

SharePoint: Group By on more than 2 columns in a view (SP 2010)

Image
An expanded version of this article, along with many other customization examples and how-tos can be found in my book,  SharePoint 2007 and 2010 Customization for the Site Owner . This is an update of an  article written for SharePoint 2007 . Many of the steps are the same in both 2007 and 2010, but both the SharePoint Designer steps and the default web part used for views have changed. Group By on more than 2 columns in a view In my SharePoint classes I have often been of asked how to group on more than two levels in a view. I have always given the quick answer of "use SharePoint Designer"!  But, some of you have asked "How?". You may be sorry you asked… but here goes…  Goals:  Create a view with nested groups deeper than just 2 levels Put the counts and totals at the bottom of each section. Do the above with no custom web parts, custom XSLT or anything that has to be deployed to the server. Sample:       Secrets and Tricks needed:  It can't be done &
Read more

Configure Form Based Authentication (FBA) in SharePoint 2010

Image
Steps to Configure FBA in SharePoint 2010  Below are the steps required to configure FBA in SharePoint 2010. I will be using MS SQL database as membership store for users.   A) Setting up ASP.NET Forms Authentication User and Role Data Source  1. Create Database  2. Configure Membership and Role Provider  3. Create User B) Create Web Application and Site Collections C) Configure Web.Config file  1. Configuring FBA web application web.config file 2. Configuring Central Administration web application web.config file 3. Configuring Security Token Service web.config file D) Adding User Policy to the FBA Web Application E) Verification Steps  A) Setting up ASP.NET Forms Authentication User and Role Data Source  This section explains creation of database which is used to store user's information such as credentials and roles which is used for Form Authentication. This section also explains the configuration of Membership and Role providers in the web.
Read more

SharePoint 2010 Windows PowerShell Interview Questions

Q. What is Windows Powershell ? Ans.  Windows PowerShell is a new Windows command-line shell designed especially for system administrators. In the SharePoint administration context, Windows PowerShell is another administration tool that supersedes the existing Stsadm.exe. Q. How is Windows Powershell different from Stsadm ? Ans.  Unlike stsadm, which accept and return text, Windows PowerShell is built on the Microsoft .NET Framework and accepts and returns .NET Framework objects. In addition to that it also gives you access to the file system on the computer so that you can access registry,digital signature certificate etc.. Q. What are cmdlet's? Ans.  Windows PowerShell introduces the concept of a cmdlet which are simple build in commands, written in a .net language like C# or VB. Q. Can you Create PowerShell scripts for deploying components in SharePoint ? Ans . If you are creating a webpart with VS 2010 then you can deploy it using ctrl + f5. However, to activate the
Read more