Sharepoint Branding With CSS and Javascript Part 3

So here we are in part 3 of my series of posts on creating a CSS based site in WSS. In my first two posts, I went over the master page and the stylesheets used in this solution. In this post, I am going to go over the xml menus and the javascript coding that makes the rest of it all stick together. I will break this into a few sections.

Keep in mind that my solution is just that! It is a Visual Studio 2008 solution for a site definition. As I said earlier though, you do not have to do it this way. With that in mind, to duplicate what I have, you need to at least have the following things done:

• An images folder in the Master Page Gallery. (It is just a doc library!)
• The stylesheets you want to use loaded into the Master Page Gallery. (I used 5)
• A doc library called Scripts in the root of the site.

For the two navigation areas, I used xml files that I placed in the script library mentioned above. This makes changing the menus rather easy. Here is my code for these menus starting with the mainmenu:

1. <ul>
2.     <li><a class="hide" href="javascript:loadpage('/default.aspx');">Home</a></li>
3.     <li><a class="hide" href="javascript:loadpage('/Lists/Tracking/AllItems.aspx');">Tracking</a>
4.     <ul>
5.       <li><a href="javascript:loadpage('/Lists/Tracking/Project.aspx');">By Project</a></li>
6.       <li><a href="javascript:loadpage('/Lists/Tracking/Code.aspx');">By Code</a></li>
7.       <li><a href="javascript:loadpage('/Lists/Tracking/Engineer.aspx');">By Engineer</a></li>
8.       <li><a href="javascript:loadpage('/Lists/Tracking/Supervisor.aspx');">By Supervisor</a></li>
9.       <li><a href="javascript:loadpage('/Lists/Tracking/Reference.aspx');">By Reference</a></li>
10.       <li><a href="javascript:loadpage('/Lists/Tracking/MyItems.aspx');">My Items</a></li>
11.     </ul>
12.   </li>
13.     <li><a class="hide" href="javascript:loadpage('/Lists/Twds/AllItems.aspx');">Twds</a>
14.     <ul>
15.       <li><a href="javascript:loadpage('/Lists/Twds/Project.aspx');">By Project</a></li>
16.       <li><a href="javascript:loadpage('/Lists/Twds/Code.aspx');">By Code</a></li>
17.       <li><a href="javascript:loadpage('/Lists/Twds/Engineer.aspx');">By Engineer</a></li>
18.       <li><a href="javascript:loadpage('/Lists/Twds/Supervisor.aspx');">By Supervisor</a></li>
19.       <li><a href="javascript:loadpage('/Lists/Twds/Reference.aspx');">By Reference</a></li>
20.       <li><a href="javascript:loadpage('/Lists/Twds/MyItems.aspx');">My Items</a></li>
21.     </ul>
22.   </li>
23.     <li><a class="hide" href="javascript:loadpage('/Lists/References/AllItems.aspx');">References</a></li>
24.     <li><a class="hide" href="mailto:evilgenius@fake.net">Contact</a></li>

Yes, it is not complete and there is a cool reason for this. If you look back at the code for the master page, I left the site actions control there but in a hidden div element. Part of the script will use some code to get the href elements of the hidden site settings and add it to the main navigation at the end. I think that is slick don't you!

Here is the code for the side menu:

1. <div class="sidebarbutton">Tracking</div>
2.     <div class="sidebarcontent" id="sidebarcontent">
3.         <ul>
4.           <li><a href="javascript:loadpage('/Lists/Tracking/Project.aspx');">By Project</a></li>
5.           <li><a href="javascript:loadpage('/Lists/Tracking/Code.aspx');">By Code</a></li>
6.           <li><a href="javascript:loadpage('/Lists/Tracking/Engineer.aspx');">By Engineer</a></li>
7.           <li><a href="javascript:loadpage('/Lists/Tracking/Supervisor.aspx');">By Supervisor</a></li>
8.           <li><a href="javascript:loadpage('/Lists/Tracking/Reference.aspx');">By Reference</a></li>
9.           <li><a href="javascript:loadpage('/Lists/Tracking/MyItems.aspx');">My Items</a></li>
10.         </ul>
11.     </div>
12. <div class="sidebarbutton">Twds</div>
13.     <div class="sidebarcontent" id="sidebarcontent">
14.         <ul>
15.           <li><a href="javascript:loadpage('/Lists/Twds/Project.aspx');">By Project</a></li>
16.           <li><a href="javascript:loadpage('/Lists/Twds/Code.aspx');">By Code</a></li>
17.           <li><a href="javascript:loadpage('/Lists/Twds/Engineer.aspx');">By Engineer</a></li>
18.           <li><a href="javascript:loadpage('/Lists/Twds/Supervisor.aspx');">By Supervisor</a></li>
19.           <li><a href="javascript:loadpage('/Lists/Twds/Reference.aspx');">By Reference</a></li>
20.           <li><a href="javascript:loadpage('/Lists/Twds/MyItems.aspx');">My Items</a></li>
21.         </ul>
22.     </div>
23. <div class="sidebarbutton">Information</div>
24. <div class="sidebarcontent" id="sidebarcontent">
25.   <table width="100%">
26.     <tr>
27.       <td>Title:</td>
28.       <td>Totally Fake Title!</td>
29.     </tr>
30.     <tr>
31.       <td>Designed By:</td>
32.       <td>A wickedly cool guy!</td>
33.     </tr>
34.     <tr>
35.       <td>Functional POC:</td>
36.       <td>
37.         <a href="mailto:evilgenius@fake.net">Evil Genius (At cox.net)</a>
38.       </td>
39.     </tr>
40.     <tr>
41.       <td>Technical POC:</td>
42.       <td>
43.         That same cool guy.
44.       </td>
45.     </tr>
46.   </table>
47. </div>

This is the code for the accordion style menu on the right. It is neat and again can be changed as needed. The stylesheets handle the formatting for this.

Now let's go over the javascript code!

1. var source;
2. var test = null;
3. var loc = null;
4. var viewpage = null;
5. var viewname;
6. var reqXML;
7. var menuhtml;
9. $(document).ready(function() {
10.     source = window.location;
11.     test = new String(window.location);
12.     /* ---------------------------------------- Begin Menu Section ------------------------------------------------------------*/
13.     // Get and load the menu data
14.     lnk = L_Menu_BaseUrl + "/Scripts/mainmenu.xml";
15.     req = new ActiveXObject("Microsoft.XMLHTTP");
16.     if (req) {
17.         req.open("GET", lnk, false);
18.         req.send();
19.         menuhtml = req.responseText;
20.     }
21.     // Can we add site settings links to the menu?
22.     menuhtml += "<li><a class='hide' href='#'>Site Settings</a>";
23.     menuhtml += "<ul>";
24.     $("menu[id*='FeatureMenuTemplate1'] ie\\:menuitem").each(function() {
25.         menuhtml += "<li><a href=\"javascript:" + $(this).attr('onMenuClick') + "\"; >" + $(this).attr('text') + "</a></li>";
26.     });
27.     menuhtml += "</ul></ul>";
28.     $("#menu").html(menuhtml);
30.     lnk2 = L_Menu_BaseUrl + "/Scripts/sidemenu.xml";
31.     req2 = new ActiveXObject("Microsoft.XMLHTTP");
32.     if (req2) {
33.         req2.open("GET", lnk2, false);
34.         req2.send();
35.         $("#sidemenu").html(req2.responseText);
36.     }
37.     $('.sidebarbutton').click(function() {
38.         $('.sidebarcontent').slideUp('normal');
39.         if($(this).next().is(':hidden') == true) {
40.             $(this).next().slideDown('normal');
41.         }
42.     });
43.     $('.sidebarbutton').mouseover(function() {
44.         $('.sidebarcontent').slideUp('normal');
45.         if ($(this).next().is(':hidden') == true) {
46.             $(this).next().slideDown('normal');
47.         }
48.     });
49.     $(".sidebarcontent").hide();
50.     /*------------------------------------------ End Menu Section -------------------------------------------------------------*/
52.     /*----------------------------------------- Begin Style Section -----------------------------------------------------------*/
53.     // Can we determine our useable resolution?
54.     var h = screen.availHeight;
55.     var w = screen.availWidth;
56.     h = h - 350;
57.    
58.     // load a stylesheet based on the resolution
59.     if (w < 1024) {
60.         switchstyle("default");
61.     }
62.     if (w >= 1024 && w < 1280) {
63.         switchstyle("mcurves1024");
64.     }
65.     if (w >= 1200 && w < 1440) {
66.         switchstyle("mcurves1200");
67.     }
68.     if (w >= 1440 && w < 1600) {
69.         switchstyle("mcurves1440");
70.     }
71.     if (w >= 1600) {
72.         switchstyle("mcurves1600");
73.     }
74.     /*------------------------------------------ End Style Section ------------------------------------------------------------*/
76.     viewname = "";
77.     viewname = $("td[id*='onetViewSelector']").text();
78.     if (viewname == "") { viewname = "All"; }
80.     try {
81.         var $table = $("TABLE[Summary*='MCurveData']");
82.         $table.wrap("<div id='wptable1' style='height:" + h + "px;overflow:scroll;'></div>");
83.         $("TR.ms-viewheadertr:first", $table).addClass("fixedheader");
84.     }
85.     catch (e) { }
87.     $("#printalert").dialog({
88.         bgiframe: true,
89.         autoOpen: false,
90.         resizable: false,
91.         modal: true,
92.         position: ['center', 'center'],
93.         overlay: { backgroundColor: '#ffdddd', opacity: 0.8 },
94.         height: 150,
95.         width: 475,
96.         closeOnEscape: true,
97.         title: 'ALERT',
98.         buttons: { "OK": function() { $(this).dialog("close"); } }
99.     });
100.     window.onbeforeprint = function() { beforeprint(); }
101. });
103. function switchstyle(style) {
104.     var z, tag;
105.     for (z=0, tag = document.getElementsByTagName("link"); z < tag.length; z++)
106.     {
107.         if ((tag[z].rel.indexOf("stylesheet") != -1) && tag[z].title)
108.         {
109.             tag[z].disabled = true;
110.             if (tag[z].title == style)
111.             {
112.                 tag[z].disabled = false;
113.             }
114.         }
115.     }
116. }
118. function sitesettings() {
119.     var smenua = $("menu[id*='FeatureMenuTemplate1']").attr("id");
120.     var smenub = $("a[id*='SiteActionsMenu']").attr("id");
121.     MMU_Open(byid(smenua), MMU_GetMenuFromClientId(smenub), event, false, null, 0);
122. }
124. function SearchIt() {
125.     var k = $("#search-text").val();
126.     var lnk = L_Menu_BaseUrl + "/_layouts/searchresults.aspx?k=" + k;
127.     window.location = lnk;
128. }
130. function loadpage(lnk) {
131.     lnk = L_Menu_BaseUrl + lnk;
132.     window.location = lnk;
133. }
135. function beforeprint() {
136.     $("#printalert").dialog("open");
137. }

So there you have the code! As you can see I show how I add the site settings links to the main menu and then I load the accordion menu and setup the "buttons" to allow the accordion functionality to work. This could be modified to just a click event if desired. The next thing that I do here is check the width of the screen to determine which of the loaded stylesheets should be set as active. Remember that I load all of them in the master page. This just determines which one to set.

There are some other things here that I use to make things look better. In list view pages, I try to keep the list views from scrolling off the page to ensure that the footer is always at the bottom and that items do not scroll under it. You will find a try/catch block here that wraps the list view in a scrollable div and also sets the header row to fixed so that it functions similar to locked rows in Excel. This function was for a specific listview and should be changed or removed. I did not take the time to set a fixed height for the content div so I just used some math to sort of guess how tall it should be.

The other function of note that I left in here is the sitesettings function. If you wanted to create a button or some other method to run it, the function opens the real site actions where it is so in my case I chose not to add this.

The styles that I used are carried maybe a bit too far as the toolbar dropdowns are black with red hover like the main menu, but I wanted to show that you could do it and I kind of like it!

Well, that is it for this series of posts! I would really like your comments and feedback!

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!