By default SharePoint 2010 Top Navigation menu looks like the below screen without branding.
SharePoint 2010 Top Navigation & Flyout Menu CSS Style:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| /*** Top Navigaion Global Menu Container ***/ .s4-tn{ padding: 0px; margin: 0px; font-family: 'Calibri' !important; font-size: 11pt !important; padding-left: 10px;}/*** Top Navigaion Static Menu Style ***/.s4-tn li.static > .menu-item{ color: #5A9A18; border: 1px solid transparent; padding: 4px 10px; line-height: 25px; height: 25px;}/*** Top Navigaion Static Menu Hover ***/.s4-tn li.static > a:hover{ background: url("/_layouts/Images/selbg.png") repeat-x left top; background-color: #529610; color: #fff; text-decoration: none;}/*** Top Navigaion Static Menu Selected ***/.s4-toplinks .s4-tn a.selected{ background: url("/_layouts/Images/selbg.png") repeat-x left top; background-color: #529610; color: #fff; text-decoration: none; border: 1px transparent solid; padding-right: 10px; padding-left: 10px; margin: 0px; border-color: #529610;}/*** Top Navigation Flyover/Dynamic Menu Container ***/.s4-tn ul.dynamic { background-color: white; border: 1px solid #000;}/*** Top Navigation Sub-Menu Items Padding ***/.s4-tn li.dynamic > .menu-item { padding: 10px 20px 10px 20px;}/*** Top Navigation Sub-Menu Items (HyperLinks) CSS Style ***/.s4-tn li.dynamic > a { font-weight: normal; color: #529610;}/*** Top Navigation Sub-Menu Items (HyperLinks) Hover Style ***/.s4-tn li.dynamic > a:hover { font-weight: bold; background-color: #AECE8F; color: #FFF;} |
Output of the above CSS:
Not just colors, even images can be set in SharePoint 2010 horizontal menu branding customizations.
CSS Style for Branded SharePoint 2010 Top Navigation Menu (a bit variant from above):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| /*** Top Navigaion Global Menu Container ***/ .s4-tn{ padding: 0px; margin: 0px; font-family: 'Calibri' !important; font-size: 11pt !important; padding-left: 10px;}/*** Top Navigaion Static Menu Style ***/.s4-tn li.static > .menu-item{ color: #21374C; border: 1px solid #93C2EC; padding: 4px 10px; line-height: 25px; height: 25px; background: url("/_layouts/Images/selbg.png") repeat-x left top; background-color:#47A4D3;}/*** Top Navigaion Static Menu Hover ***/.s4-tn li.static > a:hover{ background: url("/_layouts/Images/selbg.png") repeat-x left top; background-color: #0A85C4; color: #fff; text-decoration: none;}/*** Top Navigaion Static Menu Selected ***/.s4-toplinks .s4-tn a.selected{ background: url("/_layouts/Images/selbg.png") repeat-x left top; /* Glass Effect Shade Image */ background-color: #0A85C4; color: #fff; text-decoration: none; border: 1px transparent solid; padding-right: 10px; padding-left: 10px; margin: 0px; border-color: #134072;}/*** Top Navigation Flyover/Dynamic Menu Container ***/.s4-tn ul.dynamic { background-color: #D5E4F2; border: 1px solid #000;}/*** Top Navigation Sub-Menu Items Padding ***/.s4-tn li.dynamic > .menu-item { padding: 10px 20px 10px 20px;}/*** Top Navigation Sub-Menu Items (HyperLinks) CSS Style ***/.s4-tn li.dynamic > a { font-weight: normal; color: #0189FA;}/*** Top Navigation Sub-Menu Items (HyperLinks) Hover Style ***/.s4-tn li.dynamic > a:hover { font-weight: bold; background-color: #61CBFD; color: #FFF;} |
The custom CSS can be placed in a Style Sheet and Linked in Master page, or it can be uploaded to SharePoint library/file system and set as Alternate CSS Style sheet under site settings.
MSDN Reference: http://msdn.microsoft.com/en-us/library/gg430141%28v=office.14%29.aspx
Reference:
http://www.sharepointdiary.com/2013/04/branding-sharepoint-2010-top-navigation-menubar.html
No comments:
Post a Comment