Using a gradient in the top link bar

Question

I want to do a gradient in the top link bar ( .s4-tn )

How can I do that by overriding the css?

 

 

Answer 1

Hi, 

you don't even need to override it just add gradient to .s4-tn 

gradient generator: http://www.colorzilla.com/gradient-editor/

set your gradient and add css to .s4-tn class i.e:

.s4-tn{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

evgenia

 

Answer 2

I would like to change the default look of the horizontal navigation when used on a publishing site.

How can I accomplish this with out changing the v4Core.css? Camn I copy the s4-tn tags into a new css, edit them there, file and call that in side the masterpage only for the navgation? If so how? because I am not getting it to work...

---

<Derek>

Answer 3

Hi Derek, 

you can create a new css file for your top nav, register it in your master page and create new set of css just for your top nav. 
Top Navigation in v4.master is using s4-tn class 

<SharePoint:AspMenu
	  ID="TopNavigationMenuV4"
	  Runat="server"
	  EnableViewState="false"
	  DataSourceID="topSiteMap"
	  AccessKey="<%$Resources:wss,navigation_accesskey%>"
	  UseSimpleRendering="true"
	  UseSeparateCss="false"
	  Orientation="Horizontal"
	  StaticDisplayLevels="2"
	  MaximumDynamicDisplayLevels="1"
	  SkipLinkText=""
	  CssClass="s4-tn"/>

Chris Ståhl has a very detailed entry on his blog also check very good CSS chart by Heather Solomon jump to Top Navigation Bar (Global Navigation)