Add styling to the navigation bar
authorRobert Sesek <rsesek@bluestatic.org>
Wed, 31 Dec 2008 22:01:22 +0000 (14:01 -0800)
committerRobert Sesek <rsesek@bluestatic.org>
Wed, 31 Dec 2008 22:01:22 +0000 (14:01 -0800)
* Decorator.css.php
* docs/decoratortest.html

Decorator.css.php
docs/decoratortest.html

index b5f6c69f1706413cfa03aba16c7f41d4866e041e..b9d4ba4979f943cb1b7aec3f15a84b91db5537fd 100644 (file)
@@ -305,3 +305,113 @@ table .alt2
 {
        top: 40px;
 }
+
+/* Used to title the system */
+#nav h1
+{
+       font-size: 24px;
+       font-weight: bold;
+       color: rgb(255, 255, 255);
+       text-align: center;
+}
+
+/* Used for top links in the navbar */
+#nav h2, #nav h2 a:link, #hav h2 a:active, #nav h2 a:visited
+{
+       font-size: 12px;
+       font-weight: normal;
+       color: rgb(203, 234, 148);
+       text-align: center;
+       text-decoration: none;
+}
+
+       #nav h2 a:hover
+       {
+               text-decoration: underline;
+       }
+
+/* Navigation list */
+#nav ul
+{
+       margin-top: 10px;
+}
+
+/* Navigation sections */
+#nav ul li
+{
+       list-style-type: none;
+       
+       border-width: 0px 0px 1px 0px;
+       border-style: solid;
+       border-color: rgb(0, 0, 0);
+       
+       font-size: 18px;
+       font-weight: bold;
+       color: rgb(203, 234, 148);
+       text-indent: 10px;
+       
+       height: 50px;
+       line-height: 50px;
+       
+       background-image: url(<?php echo $path ?>/DecoratorResources/nav-section.jpg);
+       background-repeat: repeat-x;
+}
+
+       #nav ul li:first-child
+       {
+               border-top-width: 1px;
+       }
+
+/* Expanded navigation section */
+#nav ul li.expand
+{
+       text-align: center;
+       color: rgb(40, 42, 34);
+       
+       background-image: url(<?php echo $path ?>/DecoratorResources/nav-section-open.jpg);
+}
+
+/* Navigation items list */
+#nav ul ul
+{
+       margin: 0px;
+       
+       border-width: 0px 0px 1px 0px;
+       border-color: rgb(0, 0, 0);
+       border-style: solid;
+}
+
+/* Navigation items */
+#nav ul ul li
+{
+       border: none;
+       
+       padding: 2px 4px 2px 10px;
+       
+       height: auto;
+       
+       font-size: 12px;
+       font-weight: normal;
+       color: rgb(0, 0, 0);
+       line-height: 15px;
+       
+       background-color: rgb(203, 234, 148);
+       background-image: none;
+}
+
+       #nav ul ul li:first-child
+       {
+               padding-top: 10px;
+       }
+       
+       #nav ul ul li:last-child
+       {
+               padding-bottom: 10px;
+       }
+
+/* Selected navigation items */
+#nav ul ul li.selected
+{
+       font-weight: bold;
+       font-style: italic;
+}
index 0a4c3db5c3f1246f265cf32153c69d533034d878..5f5e921a37043fbca685fa23a054c94b956aef0c 100644 (file)
@@ -8,7 +8,26 @@
 
 <body>
        
-<div id="nav">&nbsp;</div>
+<div id="nav">
+       <h1>Bugdar Admin CP</h1>
+       <h2>
+               <a href="#">Home</a> &bull;
+               <a href="#">Log Out</a>
+       </h2>
+       
+       <ul>
+               <li class="expand">Options</li>
+               <ul>
+                       <li class="selected">Bugdar Settings</li>
+                       <li>Languages</li>
+                       <li>User Help Items</li>
+               </ul>
+               
+               <li>Products</li>
+               <li>Fields</li>
+               <li>Users &amp; Permissions</li>
+       </ul>
+</div>
 
 <div id="title">Settings</div>