New header, mantaining as much as the original style as possible.

SVN revision: 50557
2010-07-27 23:13:31 +00:00 · 2010-07-27 23:13:31 +00:00 · bac93045fb
parent 28f2996992
commit bac93045fb
16 changed files with 296 additions and 48 deletions
--- a/p.php
+++ b/p.php
@ -4,6 +4,8 @@
 <title><?php echo $title; ?></title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="style.css">
+<link rel="stylesheet" type="text/css" href="/theme/css/screen.css">
+<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="/theme/ie/ie6.css"> <![endif]-->
 <link rel="icon" href="favicon.png" type="image/x-icon">
 <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
 <link rel="icon" href="favicon.png" type="image/ico">
@ -20,54 +22,60 @@ if (is_file("p/$page/$lang-rss"))

 <body>

-  <div id="wrapper">
-    <div id="layout">
+<div id="wrapper">
+
+    <div id="header">
+    <div class="layout">
+
+        <?php $class = "logo"; if ($page == "index") $class = "logo current" ?>
+        <h1 class="<?php echo $class ?>">
+            <a href="/" title="Homepage" name="Homepage"><span>Enlightenment.org</span></a>
+        </h1>
+
+        <ul class="menu">
+            <?php echo(nav_button("main2", ""));?>
+            <?php echo(nav_button("main3", ""));?>
+            <?php echo(nav_button("main4", ""));?>
+            <?php echo(nav_button("main5", ""));?>
+            <?php echo(nav_button("main6", ""));?>
+            <?php echo(nav_button("main7", ""));?>
+            <?php echo(nav_button("main8", ""));?>
+            <?php echo(nav_button("docs", ""));?>
+        </ul>
+
+        <?php nav_subs(); ?>
+
+    </div>
+    </div>
+
+    <div id="middle">
+    <div class="layout">
+
+        <div id="content">
+            <?php include "p/$page/$lang-body" ?>
+        </div>


+    </div>
+    </div>

-      <!-- Custom Header -->
-      <table cellspacing="0" cellpadding="0" width="100%"><tr>
-        <td id="header_logo">
-          <a href="http://www.enlightenment.org"></a>
-        </td>
-        <td id="header_menu">
-	  <table cellspacing="0" cellpadding="0" align="right"><tr>
-	    <?php echo(nav_button("main1", ""));?>
-	    <?php echo(nav_button("main2", ""));?>
-	    <?php echo(nav_button("main3", ""));?>
-	    <?php echo(nav_button("main4", ""));?>
-	    <?php echo(nav_button("main5", ""));?>
-	    <?php echo(nav_button("main6", ""));?>
-	    <?php echo(nav_button("main7", ""));?>
-	    <?php echo(nav_button("main8", ""));?>
-	    <?php echo(nav_button("docs", ""));?>
-	  </tr></table>
-        </td>
-        <td id="header_last"></td>
-      </tr></table>
+    <div id="push"></div>

-     <div id="submenu">
-       <?php nav_subs(); ?>
-     </div>
-
-      <!-- CM contents -->
-      <div id="content">
-        <?php include "p/$page/$lang-body" ?>
-      </div>
-      
-      <div id="push"></div>
-    </div><!-- /layout -->
-  </div><!-- /wrapper -->
+</div>


-  <!-- Custom Footer -->
-  <div id="sitefooter">
-    <table width="100%"><tr>
-      <td width="100%" align="center">Copyright &copy; Enlightenment.org</td>
-    </tr></table>
-  </div><!-- /sitefooter -->
+    <div id="sitefooter">
+    <div class="layout">

+        <table width="100%">
+        <tr>
+        <td width="100%" align="center">Copyright &copy; Enlightenment.org</td>
+        </tr>
+        </table>
+
+    </div>
+    </div>

 </body>
 </html>
-	
+
--- a/site/site.php
+++ b/site/site.php
@ -151,12 +151,12 @@
      else if (file_exists("p/$b/link")) {
 	  $h = read_var("p/$b/link");
      }
-      if ((strncasecmp($page,$l,strlen($l)) == 0) OR 
+      if ((strncasecmp($page,$l,strlen($l)) == 0) OR
          (($page == "index") AND ($l == "Home") )) {
      	  $c = "active";
-          return "<td class='nav_$c'>$l</td>\n";
+          return "<li class='current'><a href='#'>$l</a></li>\n";
      }
-      return "<td class='nav_$c'><a class='nav_$c' href='$h'>$l</a></td>\n";
+      return "<li><a href='$h'>$l</a></li>\n";
  }

  function nav_subs() {
@ -172,7 +172,7 @@
      if (file_exists("p/$p/subs")) {
 	  $handle = fopen("p/$p/subs", "r");
 	  if ($handle) {
-	      echo("<ul class='navul'>\n");
+	      echo("<ul class='submenu'>\n");
 	      $item = 0;
 	      while (!feof($handle)) {
 		  $fl = fgets($handle, 4096);
@ -192,7 +192,7 @@
 			  if ($h == "") {
 			    $h = "p.php?p=$p/$fl&amp;l=$lang";
                          }
-			  echo("<li class='navul$class'><a class='navul' href='$h'>$l</a></li>\n");
+			  echo("<li class='$class'><a href='$h'>$l</a></li>\n");
 			  $item++;
 		      }
 		      else if (file_exists("p/$p/$fl/en-label")) {
@ -200,7 +200,7 @@
 			  if ($h == "") {
 			    $h = "p.php?p=$p/$fl&amp;l=$lang";
                          }
-			  echo("<li class='navul$class'><a class='navul' href='$h'>$l</a></li>\n");
+			  echo("<li class='$class'><a href='$h'>$l</a></li>\n");
 			  $item++;
 		      }
 		  }
@ -210,4 +210,4 @@
      }
      }
  }
-?>	
+?>
--- a/theme/css/screen.css
+++ b/theme/css/screen.css
@ -0,0 +1,33 @@
+#header { background: url("/theme/img/header-bg.png") repeat-x; border-bottom: 1px solid #fff; }
+#header .layout { display: inline-block; }
+#header h1.logo { float: left; background: url("/theme/img/menu-default-right.png") no-repeat right top; margin: 0; }
+#header h1.logo a { display: inline-block; background: url("/theme/img/menu-default-left.png") no-repeat left top; }
+#header h1.logo a span { display: inline-block; height: 72px; width: 112px; overflow: hidden; /* Replace text with image */ text-indent: -999px; background: url("/theme/img/logo-default.png") no-repeat; }
+#header h1.logo:hover, #header h1.logo.current { background-image: url("/theme/img/menu-selected-right.png"); }
+#header h1.logo:hover a, #header h1.logo.current a { background-image: url("/theme/img/menu-selected-left.png"); }
+#header h1.logo:hover a span, #header h1.logo.current a span { background-image: url("/theme/img/logo-selected.png"); }
+#header ul.menu { text-align: right; list-style: none inside none; margin: 0; padding: 0; }
+#header ul.menu li { display: inline-block !important; display: inline; height: 72px; line-height: 72px; text-align: center; }
+#header ul.menu li a { display: inline-block; height: 72px; text-decoration: none; }
+#header ul.menu li { margin-left: 16px; line-height: 54px; background: url("/theme/img/menu-default-right.png") no-repeat right top; }
+#header ul.menu li a { text-transform: capitalize; padding: 0 16px; font-size: 11px; color: #555555; vertical-align: middle; background: url("/theme/img/menu-default-left.png") no-repeat left top; }
+#header ul.menu li.current, #header ul.menu li:hover { background: url("/theme/img/menu-selected-right.png") no-repeat right top; }
+#header ul.menu li.current a, #header ul.menu li:hover a { background: url("/theme/img/menu-selected-left.png") no-repeat left top; color: #f3f3f3; }
+#header ul.menu li.current a { /* "- $gutter * 2"" removes the padding set above */ min-width: 80px; max-width: 192px; }
+#header ul.submenu { text-align: right; list-style: none inside none; margin: 0; padding: 0; float: right; clear: right; }
+#header ul.submenu li { display: inline-block !important; display: inline; height: 36px; line-height: 36px; text-align: center; }
+#header ul.submenu li a { display: inline-block; height: 36px; text-decoration: none; }
+#header ul.submenu li { margin-left: 16px; line-height: 36px; }
+#header ul.submenu li a { color: #1f445c; font-size: 11px; vertical-align: middle; }
+#header ul.submenu li a:hover { color: #5f7b8d; }
+#header ul.submenu li.selected a { font-weight: bold; }
+
+#content { margin-top: 18px; }
+
+.layout { margin: 0 auto 0 auto; min-width: 900px; width: 90%; }
+
+table.main h1, td.main { margin-top: 0; padding-top: 0; }
+
+p { color: #333333; }
+
+body { background: #f3f3f3 none; }
--- a/theme/ie/blank.gif
+++ b/theme/ie/blank.gif
--- a/theme/ie/ie6.css
+++ b/theme/ie/ie6.css
@ -0,0 +1,9 @@
+/* Transparent PNGs. Use specific selectors (id, classes) to avoid slowdowns */
+img,
+#header .logo span
+{
+    behavior: url('/theme/ie/iepngfix.htc')
+}
+
+/* Hide text in the logo */
+#header h1.logo a span { text-indent: 0; padding: 999px }
--- a/theme/ie/iepngfix.htc
+++ b/theme/ie/iepngfix.htc
@ -0,0 +1,198 @@
+<public:component>
+<script type="text/javascript">
+
+// IE5.5+ PNG Alpha Fix v2.0 Alpha
+// (c) 2004-2009 Angus Turnbull http://www.twinhelix.com
+
+// This is licensed under the GNU LGPL, version 2.1 or later.
+// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
+
+var IEPNGFix = window.IEPNGFix || {};
+IEPNGFix.data = IEPNGFix.data || {};
+
+
+// CONFIG: blankImg is the path to blank.gif, *relative to the HTML document*.
+// Try either:
+// * An absolute path like:  '/images/blank.gif'
+// * A path relative to this HTC file like:  thisFolder + 'blank.gif'
+var thisFolder = document.URL.replace(/(\\|\/)[^\\\/]*$/, '/');
+IEPNGFix.blankImg = thisFolder + 'blank.gif';
+
+
+IEPNGFix.fix = function(elm, src, t) {
+	// Applies an image 'src' to an element 'elm' using the DirectX filter.
+	// If 'src' is null, filter is disabled.
+	// Disables the 'hook' to prevent infinite recursion on setting BG/src.
+	// 't' = type, where background tile = 0, background = 1, IMG SRC = 2.
+
+	var h = this.hook.enabled;
+	this.hook.enabled = 0;
+
+	var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
+		src = (src || '').replace(/\(/g, '%28').replace(/\)/g, '%29');
+
+	if (
+		src && !(/IMG|INPUT/.test(elm.nodeName) && (t != 2)) &&
+		elm.currentStyle.width == 'auto' && elm.currentStyle.height == 'auto'
+	) {
+		if (elm.offsetWidth) {
+			elm.style.width = elm.offsetWidth + 'px';
+		}
+		if (elm.clientHeight) {
+			elm.style.height = elm.clientHeight + 'px';
+		}
+		if (elm.currentStyle.display == 'inline') {
+			elm.style.display = 'inline-block';
+		}
+	}
+
+	if (t == 1) {
+		elm.style.backgroundImage = 'url("' + this.blankImg + '")';
+	}
+	if (t == 2) {
+		elm.src = this.blankImg;
+	}
+
+	if (elm.filters[f]) {
+		elm.filters[f].enabled = src ? true : false;
+		if (src) {
+			elm.filters[f].src = src;
+		}
+	} else if (src) {
+		elm.style.filter = 'progid:' + f + '(src="' + src +
+			'",sizingMethod="' + (t == 2 ? 'scale' : 'crop') + '")';
+	}
+
+	this.hook.enabled = h;
+};
+
+
+IEPNGFix.process = function(elm, init) {
+	// Checks the onpropertychange event (on first 'init' run, a fake event)
+	// and calls the filter-applying-functions.
+
+	if (
+		!/MSIE (5\.5|6)/.test(navigator.userAgent) ||
+		typeof elm.filters == 'unknown'
+	) {
+		return;
+	}
+	if (!this.data[elm.uniqueID]) {
+		this.data[elm.uniqueID] = {
+			className: ''
+		};
+	}
+	var data = this.data[elm.uniqueID],
+		evt = init ? { propertyName: 'src,backgroundImage' } : event,
+		isSrc = /src/.test(evt.propertyName),
+		isBg = /backgroundImage/.test(evt.propertyName),
+		isPos = /width|height|background(Pos|Rep)/.test(evt.propertyName),
+		isClass = !init && ((elm.className != data.className) &&
+			(elm.className || data.className));
+	if (!(isSrc || isBg || isPos || isClass)) {
+		return;
+	}
+	data.className = elm.className;
+	var blank = this.blankImg.match(/([^\/]+)$/)[1],
+		eS = elm.style,
+		eCS = elm.currentStyle;
+
+	// Required for Whatever:hover - erase set BG if className changes.
+	if (
+		isClass && (eS.backgroundImage.indexOf('url(') == -1 ||
+		eS.backgroundImage.indexOf(blank) > -1)
+	) {
+		return setTimeout(function() {
+			eS.backgroundImage = '';
+		}, 0);
+	}
+
+	// Foregrounds.
+	if (isSrc && elm.src && { IMG: 1, INPUT: 1 }[elm.nodeName]) {
+		if ((/\.png/i).test(elm.src)) {
+			if (!elm.oSrc) {
+				// MM rollover compat
+				elm.oSrc = elm.src;
+			}
+			this.fix(elm, elm.src, 2);
+		} else if (elm.src.indexOf(blank) == -1) {
+			this.fix(elm, '');
+		}
+	}
+
+	// Backgrounds.
+	var bgSrc = eCS.backgroundImage || eS.backgroundImage;
+	if ((bgSrc + elm.src).indexOf(blank) == -1) {
+		var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);
+		if (bgPNG) {
+			if (this.tileBG && !{ IMG: 1, INPUT: 1 }[elm.nodeName]) {
+				this.tileBG(elm, bgPNG[1]);
+				this.fix(elm, '', 1);
+			} else {
+				if (data.tiles && data.tiles.src) {
+					this.tileBG(elm, '');
+				}
+				this.fix(elm, bgPNG[1], 1);
+				this.childFix(elm);
+			}
+		} else {
+			if (data.tiles && data.tiles.src) {
+				this.tileBG(elm, '');
+			}
+			this.fix(elm, '');
+		}
+	} else if ((isPos || isClass) && data.tiles && data.tiles.src) {
+		this.tileBG(elm, data.tiles.src);
+	}
+
+	if (init) {
+		this.hook.enabled = 1;
+		elm.attachEvent('onpropertychange', this.hook);
+	}
+};
+
+
+IEPNGFix.childFix = function(elm) {
+	// "hasLayout" fix for unclickable children inside PNG backgrounds.
+	var tags = [
+			'a',
+			'input',
+			'select',
+			'textarea',
+			'button',
+			'iframe',
+			'object'
+		],
+		t = tags.length,
+		tFix = [];
+	while (t--) {
+		var pFix = elm.all.tags(tags[t]),
+			e = pFix.length;
+		while (e--) {
+			tFix.push(pFix[e]);
+		}
+	}
+	t = tFix.length;
+	if (t && (/relative|absolute/i).test(elm.currentStyle.position)) {
+		alert('IEPNGFix: Unclickable children of element:' +
+			'\n\n<' + elm.nodeName + (elm.id && ' id=' + elm.id) + '>');
+	}
+	while (t--) {
+		if (!(/relative|absolute/i).test(tFix[t].currentStyle.position)) {
+			tFix[t].style.position = 'relative';
+		}
+	}
+};
+
+
+IEPNGFix.hook = function() {
+	if (IEPNGFix.hook.enabled) {
+		IEPNGFix.process(element, 0);
+	}
+};
+
+
+IEPNGFix.process(element, 1);
+
+</script>
+</public:component>
--- a/theme/img/button-left.png
+++ b/theme/img/button-left.png
--- a/theme/img/button-middle.png
+++ b/theme/img/button-middle.png
--- a/theme/img/button-right.png
+++ b/theme/img/button-right.png
--- a/theme/img/header-bg.png
+++ b/theme/img/header-bg.png
--- a/theme/img/logo-default.png
+++ b/theme/img/logo-default.png
--- a/theme/img/logo-selected.png
+++ b/theme/img/logo-selected.png
--- a/theme/img/menu-default-left.png
+++ b/theme/img/menu-default-left.png
--- a/theme/img/menu-default-right.png
+++ b/theme/img/menu-default-right.png
--- a/theme/img/menu-selected-left.png
+++ b/theme/img/menu-selected-left.png
--- a/theme/img/menu-selected-right.png
+++ b/theme/img/menu-selected-right.png