WEB: First draft of the language selector

css/lang-menu.css

@@ -0,0 +1,98 @@
+#lang-wrapper {
+	width: 0px;
+	margin: 0 auto;
+	float: right;
+	position: relative;
+	right: 583px;
+	top: 79px;
+}
+
+#text-badge {
+	background-color: #00007f;
+	color: white;
+	margin: 0 0;
+}
+
+#langmenu {
+	font-family: Tahoma;
+	font-size: 8pt;
+	list-style: none;
+	padding: 0 0px;
+}
+
+#langmenu a {
+	position: relative;
+	top: 8px;
+	color: #000000;
+	text-decoration: none;
+	font-size: 9pt;
+}
+
+#langmenu > li {
+	float: left;
+	height: 29px;
+	margin-top: 0pt;
+	margin-bottom: 0pt;
+	position: relative;
+	background: url(../images/header-background.gif) repeat-x;
+
+	border-radius: 4px 4px 0 0;
+	-moz-border-radius: 4px 4px 0 0;
+	-webkit-border-radius: 4px 4px 0 0;
+}
+
+#langmenu > li > a {
+	text-shadow: 0 1px 2px #fff;
+	font-weight: 700;
+	/* padding: 0px 7px 0px 7px; */
+	/* display: block; */
+	color: #000000;
+
+	padding: 0px 20px 0px 10px;
+	background: url(../images/dropdown.png) no-repeat right center;
+}
+
+#langmenu > li > ul {
+	position: absolute;
+	top: 29px;
+	left: -20px;
+	width: 100px;
+	border-radius: 0 0 4px 4px;
+	-moz-border-radius: 0 0 4px 4px;
+	-webkit-border-radius: 0 0 4px 4px;
+	border-left: 1px solid #cecece;
+	border-right: 1px solid #cecece;
+	border-bottom: 1px solid #cecece;
+	padding: 10px 10px 10px 17px;
+	display: none;
+	background: #f6f6f6;
+	z-index: 1000;
+}
+
+#langmenu > li:hover > a {
+	background: url(../images/dropdown-over.png) no-repeat right center;
+	color: rgb(168, 39, 9);
+}
+
+#langmenu > li:hover > ul {
+	display: block;
+}
+
+#langmenu li ul li {
+	float: left;
+	width: 110px;
+	list-style: none;
+	margin: 0 5px 7px 0;
+	padding: 0 0 3px 0;
+}
+
+#langmenu li ul li a {
+	font-size: 9pt;
+	font-weight: bold;
+	display: block;
+}
+
+#langmenu li ul li a:hover {
+	color: #ffffff;
+	background: url(../images/par-head.png) repeat-x;
+}

templates/index.tpl

@@ -9,6 +9,7 @@
 		{* General CSS rules. *}
 		@import url("css/layout.css");
 		@import url("css/menu.css");
+		@import url("css/lang-menu.css");
 		{* Page specific, or other extra CSS rules. *}
 		{foreach from=$css_files item=filename}
 		@import url("css/{$filename}");
@@ -31,6 +32,7 @@
 			<img src="images/scummvm_logo.jpg" width="287" height="118" alt="ScummVM logo" class="float_left">
 		</a>
 
+		{include file='lang_menu.tpl'}
 		<span>
 			<img src="images/heroes{$heroes_num|rand:0}.png" alt="Game characters" width="483" height="89">
 			<img src="images/scummvm-caption.png" alt="Script creation utility for Maniac Mansion Virtual Machine" width="483" height="29">

templates/lang_menu.tpl

@@ -0,0 +1,12 @@
+<div id="lang-wrapper">
+    <div id="drop-down">
+        <ul id="langmenu">
+            <li><a href="">Language</a>
+                <ul>
+                    <li><!--<div id="text-badge">EN</div>--><a href="">English</a></li>
+                    <li><a href="">German</a></li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+</div>

templates_de/index.tpl

@@ -9,6 +9,7 @@
 		{* General CSS rules. *}
 		@import url("css/layout.css");
 		@import url("css/menu.css");
+		@import url("css/lang-menu.css");
 		{* Page specific, or other extra CSS rules. *}
 		{foreach from=$css_files item=filename}
 		@import url("css/{$filename}");
@@ -30,7 +31,7 @@
 		<a href="{$baseurl}">
 			<img src="images/scummvm_logo.jpg" width="287" height="118" alt="ScummVM-Logo" class="float_left">
 		</a>
-
+		{include file='lang_menu.tpl'}
 		<span>
 			<img src="images/heroes{$heroes_num|rand:0}.png" alt="Charaktere" width="483" height="89">
 			<img src="images/scummvm-caption.png" alt="Script creation utility for Maniac Mansion Virtual Machine" width="483" height="29">