Sharepoint Branding With CSS and Javascript Part 2

So, this is part two of my post on creating a CSS based site in WSS 3. In part 1 I went through the basic information and gave you the code for the Master Page. As you saw, this Master Page is very different ans has most of the standard ContentPlaceHolders hidden. I also removed the standard table layout and created a set of divs to create the structure I wanted to use. This structure consists mainly of a top banner with the logo, a top navigation menu, a right side accordion style menu, a content section on the left and the ever so popular footer.

The next thing I want to go over is the stylesheet code that I used to make this work. I will tie all of it together later, but I wanted to go over this part next. I actaully created 5 to 6 stylesheets that have mostly the same code except for elements that affect size and position as some of these will be different. In the end, I will show how I used javascript to select the stylesheet to use.

Here is the code:

1. body
2. {
3.     margin: 0;
4.     padding: 0;
5.     background: #F7F7F7 url(images/img01.jpg) repeat-x left top;
6.     font-family: Arial, Helvetica, sans-serif;
7.     font-size: 12px;
8.     color: #787878;
9. }
10. h1, h2, h3
11. {
12.     margin: 0;
13.     padding: 0;
14.     font-weight: normal;
15.     color: #000000;
16. }
17. h1
18. {
19.     font-size: 2em;
20. }
21. h2
22. {
23.     font-size: 2.4em;
24. }
25. h3
26. {
27.     font-size: 1.6em;
28. }
29. p, ul, ol
30. {
31.     margin-top: 0;
32.     line-height: 180%;
33. }
34. ul, ol
35. {
36. }
37. a
38. {
39.     text-decoration: none;
40.     color: #BC1B32;
41. }
42. a:hover
43. {
44. }
45. #wrapper
46. {
47.     width: 1550px;
48.     margin: 0 auto;
49.     padding: 0;
50. }
51. /* Header */
52. #header
53. {
54.     width: 1530px;
55.     height: 102px;
56.     margin: 0 auto;
57. }
58. /* Logo */
59. #logo {
60.     float: left;
61.     margin: 0;
62.     padding-top: 30px;
63.     color: #000000;
64. }
65.  
66. #logo h1, #logo p {
67.     margin: 0;
68.     padding: 0;
69. }
70.  
71. #logo h1 {
72.     float: left;
73.     letter-spacing: -1px;
74.     text-transform: uppercase;
75.     font-size: 3.8em;
76. }
77.  
78. #logo p {
79.     float: left;
80.     margin: 0;
81.     padding: 26px 0 0 10px;
82.     font: normal 14px Georgia, "Times New Roman", Times, serif;
83.     font-style: italic;
84. }
85.  
86. #logo a {
87.     border: none;
88.     background: none;
89.     text-decoration: none;
90.     color: #000000;
91. }
92. /* Search */
93. #search
94. {
95.     position: absolute;
96.     top: 0px;
97.     right: 0px;
98.     width: 280px;
99.     height: 28px;
100.     background: #E2E2E2;
101.     z-index: 10000;
102. }
103. #search form
104. {
105.     height: 25px;
106.     margin: 0;
107. }
108. #search fieldset
109. {
110.     margin: 0;
111.     padding: 0;
112.     border: none;
113. }
114. #search-text
115. {
116.     width: 250px;
117.     border: 1px solid #DEDEDE;
118.     background: #FFFFFF;
119.     text-transform: lowercase;
120.     font: normal 11px Arial, Helvetica, sans-serif;
121.     color: #5D781D;
122. }
123. #search-submit
124. {
125.     width: 50px;
126.     height: 22px;
127.     border: none;
128.     background: #B9B9B9;
129.     color: #000000;
130. }
131. /* Page */
132. #page
133. {
134.     width: 1530px;
135.     margin: 0 auto;
136.     padding: 0;
137. }
138. #page-bgtop
139. {
140.     padding: 20px px;
141. }
142. #page-bgbtm
143. {
144. }
145. /* Content */
146. #content
147. {
148.     position: relative;
149.     float: left;
150.     width: 1248px;
151.     padding: 0;
152.     z-index: 0;
153. }
154. /* Sidebar */
155. #sidebar
156. {
157.     position:relative;
158.     float: right;
159.     width: 280px;
160.     padding: 0px;
161.     color: #787878;
162.     background: #FFFFFF;
163.     z-index: 0;
164. }
165. #sidebar ul
166. {
167.     margin: 0;
168.     padding: 0;
169.     list-style: none;
170. }
171. #sidebar li
172. {
173.     margin: 0;
174.     padding: 0;
175.     border-left: 1px solid #E2E2E2;
176. }
177. #sidebar li ul
178. {
179.     margin: 0px 0px;
180.     padding-bottom: 30px;
181. }
182. #sidebar li li
183. {
184.     line-height: 35px;
185.     border-bottom: 1px dashed #D1D1D1;
186.     margin: 0px 30px;
187.     border-left: none;
188. }
189. #sidebar li li span
190. {
191.     display: block;
192.     margin-top: -20px;
193.     padding: 0;
194.     font-size: 11px;
195.     font-style: italic;
196. }
197. #sidebar h2
198. {
199.     height: 38px;
200.     padding-left: 30px;
201.     letter-spacing: -.5px;
202.     font-size: 1.8em;
203.     color: #000000;
204. }
205. #sidebar p
206. {
207.     margin: 0 0px;
208.     padding: 0px 30px 20px 30px;
209.     text-align: justify;
210. }
211. #sidebar a
212. {
213.     border: none;
214.     color: #BC1B32;
215. }
216. #sidebar a:hover
217. {
218.     text-decoration: underline;
219.     color: #8A8A8A;
220. }
221. /* Calendar */
222. #calendar
223. {
224. }
225. #calendar_wrap
226. {
227.     padding: 20px;
228. }
229. #calendar table
230. {
231.     width: 100%;
232. }
233. #calendar tbody td
234. {
235.     text-align: center;
236. }
237. #calendar #next
238. {
239.     text-align: right;
240. }
241. /* Footer */
242. #footer
243. {
244.     position: absolute;
245.     width: 100%;
246.     height: 15px;
247.     margin: 0 auto;
248.     background: #ECECEC;
249.     border-top: 1px solid #DEDEDE;
250.     font-family: Arial, Helvetica, sans-serif;
251.     bottom: 0px;
252. }
253. #footer p
254. {
255.     margin: 0;
256.     line-height: normal;
257.     font-size: 10px;
258.     text-transform: uppercase;
259.     text-align: center;
260.     color: #A0A0A0;
261. }
262. #footer a
263. {
264.     color: #8A8A8A;
265. }
266. .fixedheader
267. {
268.     position: relative;
269.     top: expression(this.offsetParent.scrollTop);
270. }
271. #welcome
272. {
273.     display: none;  
274. }
275. /* Menu */
276. .menu
277. {
278.     position: relative;
279.     width: 1530px;
280.     height: 36px;
281.     margin: 0 auto;
282.     padding: 0;
283.     background: #000000;
284.     z-index: 10000 !important;
285. }
286. .menu ul li a, .menu ul li a:visited
287. {
288.     display: block;
289.     width: 156px;
290.     height: 28px;
291.     background: #000000;
292.     padding-top: 8px;
293.     border-right: 1px solid #FFFFFF;
294.     text-transform: uppercase;
295.     text-decoration: none;
296.     text-align: center;
297.     font-family: Arial, Helvetica, sans-serif;
298.     font-size: 13px;
299.     font-weight: bold;
300.     color: #FFFFFF;
301.     border: none;
302. }
303. .menu ul
304. {
305.     padding: 0;
306.     margin: 0;
307.     list-style: none;
308. }
309. .menu ul li
310. {
311.     float: left;
312.     position: relative;
313. }
314. .menu ul li ul
315. {
316.     display: none;
317. }
318. .menu ul li:hover a {color:#fff; background:#BC1B32;}
319. .menu ul li:hover ul {display:block; position:absolute; top:36px; left:0; width:156px;}
320. .menu ul li:hover ul li a.hide {background:#BC1B32; color:#fff;}
321. .menu ul li:hover ul li:hover a.hide {background:#BC1B32; color:#fff;}
322. .menu ul li:hover ul li ul {display:none;}
323. .menu ul li:hover ul li a {display:block; background:#000; color:#fff;}
324. .menu ul li:hover ul li a:hover {background:#BC1B32; color:#fff;}
325. .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:156px; top:0;}
326. .menu ul li:hover ul li:hover ul.left {left:-156px;}
327.  
328. #sidemenu
329. {
330.     position:relative;
331.     float: right;
332.     width: 280px;
333.     padding: 0px;
334.     color: #787878;
335.     background: #FFFFFF;
336.     z-index: 0;
337. }
338.  
339. .sidebarbutton
340. {
341.     float: right;
342.     height: 28px;
343.     width: 278px;
344.     border: 1px solid black;
345.     cursor: pointer;
346.     text-align: center;
347.     vertical-align: middle;
348.     font-family: Arial, Helvetica, sans-serif;
349.     font-size: 13px;
350.     font-weight: bold;
351.     text-transform: uppercase;
352.     color: #000;
353.     background: #EEEEEE;
354. }
355.  
356. .sidebarcontent
357. {
358.     float: right;
359.     width: 278px;
360.     border-left: 1px solid black;
361.     border-right: 1px solid black;
362.     border-bottom: 1px solid black;
363.     background: #E2E2E2;
364.     color: #000;
365. }
366.  
367. #sidebarcontent ul li a, #sidebarcontent ul li a:visited
368. {
369.     text-decoration: underline;
370.     color: #000;
371. }
372.  
373. #sidebarcontent ul li a:hover
374. {
375.     font-weight:bold !important;
376. }
377.  
378. #sidebarcontent td
379. {
380.     font-family: Arial, Helvetica, sans-serif;
381.     font-size: 9px;
382.     text-transform: uppercase;
383.     color: #000;
384. }
385.  
386. #sidebarcontent td a, #sidebarcontent td a:visited
387. {
388.     text-decoration: underline;
389.     color: #000;
390. }
391.  
392. #sidebarcontent td a:hover
393. {
394.     font-weight:bold !important;
395. }
396. /*--------------------------- THEME OVERRIDES ------------------------------------------------------*/
397. .ms-MenuUIPopupBody TABLE
398. {
399. color:#ffffff;
400. }
401. .ms-MenuUI,.ms-MenuUILarge,.ms-MenuUIRtL,.ms-MenuUILargeRtL
402. {
403.     background-color:#000000 !important;
404. }
405. .ms-MenuUI
406. {
407. background-image:url("images/MGrad_plastic.gif");
408. }
409. .ms-MenuUILarge
410. {
411. background-image:url("images/MGradLarge_plastic.gif");
412. }
413. .ms-MenuUIRtL
414. {
415. background-image:url("images/MGradRtl_plastic.gif");
416. }
417. .ms-MenuUILargeRtL
418. {
419. background-image:url("images/MGradLargeRtl_plastic.gif");
420. }
421. .ms-MenuUIItemTableCell,.ms-MenuUIItemTableCellCompact
422. {
423.     color:#ffffff;
424. }
425. .ms-MenuUIItemTableCell A,.ms-MenuUIItemTableCellHover A,.ms-MenuUIItemTableCellCompact A,.ms-MenuUIItemTableCellCompactHover A
426. {
427.     color:#ffffff;
428. }
429. .ms-menuitemdescription
430. {
431. color:#ffffff;
432. }
433. .ms-MenuUIItemTableCellHover,.ms-MenuUIItemTableCellCompactHover
434. {
435. color:#ffffff;
436. }
437. .ms-MenuUIItemTableHover
438. {
439. background-color:#BC1B32;
440. border:1px solid #ff0000;
441. }
442. .ms-MenuUIItemTableHover .ms-menuitemdescription
443. {
444. color:#ffffff;
445. }
446. .ms-MenuUIItemTableCellDisabled
447. {
448. color:#ffa06d;
449. }
450. .ms-toolbar,.ms-viewtoolbar,.ms-formtoolbar,.ms-toolbarContainer{
451. color:#ffffff;
452. }
453. .ms-toolbar-togglebutton-on{
454. border:1px solid #000000;
455. }
456. table.ms-toolbar,table.ms-viewtoolbar,.ms-toolbarContainer{
457. background-image:url("toolgrad_plastic.gif");
458. background-color:#E2E2E2;
459. }
460. table.ms-toolbar,.ms-toolbarContainer{
461. border:1px solid #000000;
462. }
463. .ms-listheader{
464. color:#ffffff;
465. background-image:url("listheadergrad_plastic.gif");
466. }
467. .ms-menutoolbar{
468. border-bottom:1px solid #000000;
469. height:22px;
470. background-color:#E2E2E2;
471. background-image:url("listheadergrad_plastic.gif");
472. background-repeat:repeat-x;
473. }
474. .ms-menutoolbar td{
475. border-top:solid 1px #000000;
476. border-bottom:solid 1px #000000;
477. }
478. .ms-menutoolbar td a{
479. color:#000000;
480. }
481. .ms-menutoolbar td a:hover{
482. color:#000000;
483. font-weight:bold;
484. }
485. .ms-menubuttonactivehover,.ms-buttonactivehover
486. {
487.     background: #BC1B32;
488.     border:none !important;
489. }
490. td.ms-menutoolbarheader{
491. color:#000000;
492. }
493. .ms-listheaderlabel{
494. color:#000000;
495. }
496. .ms-menutoolbar td td.ms-viewselector,.ms-menutoolbar td td.ms-viewselectorhover,.ms-toolbar td td.ms-viewselector,.ms-toolbar td td.ms-viewselectorhover,.ms-authoringcontrols td td.ms-viewselector,.ms-authoringcontrols td td.ms-viewselectorhover,td.ms-viewselector{
497. border:solid 1px #000000;
498. background:#a2a2a2 !important;
499. }
500. div.ms-viewselector,div.ms-viewselectorhover{
501. border:solid 1px #000000;
502. }
503. div.ms-viewselector a{
504. color:#000000;
505. }
506. .ms-menutoolbar td td.ms-viewselectorhover,.ms-toolbar td td.ms-viewselectorhover,.ms-authoringcontrols td td.ms-viewselectorhover{
507. background:#000000;
508. }
509. .ms-rtetablecells{
510. border:solid 1px #000000;
511. }
512. TD.ms-rtetoolbarsel{
513. border:solid 1px #000000;
514. }
515. TD.ms-rtetoolbarhov
516. {
517. border:solid 1px #000000;
518. background:#a2a2a2;
519. color:#000000;
520. }
521. .ms-splitbuttonhover{
522.     border: none !important;
523.     background: #BC1B32;
524.     height: 22px;
525. }
526. .ms-splitbuttonhover .ms-splitbuttondropdown,.ms-splitbuttonhover .ms-splitbuttontext{
527.     border: none !important;
528.     background: #BC1B32;
529.     height: 22px;
530. }

So, there it is. The first 395 lines are for the customized divs and items. After this I decided to include a few items from the standard themes to override. I am trying to maintain as much as possible a consistent look/feel. There are some things that I have not yet changed, but may get to eventually.

As this is a lot to digest, in my next post on this, I will go over the javascript code that gets most of the work done to make this work. Please let me know if you have questions, comments, or concerns!