[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-www
Subject: New kde.org Design
From: Christoph Cullmann <cullmann () babylon2k ! de>
Date: 2005-02-23 22:41:10
Message-ID: 200502232341.13884 () cullmann
[Download RAW message or body]
[Attachment #2 (multipart/signed)]
[Attachment #4 (multipart/mixed)]
hi,
to fill in the gap from kde.org to current style of the kde 3.4 release
(considering documentation, about: screens, backgrounds, logos, colors), I
propose this new design as starting point, no final version, but usable
enough to replace current one, screenshot + code attached.
(btw., yes, subpages still work, tried out, only some loose their handcrafted
and mostly but ugly logos and get text in the title therefor)
cu
Christoph
--
Christoph Cullmann
KDE Developer, kde.org Maintainance Team
http://www.babylon2k.de, cullmann@kde.org
["standard.css" (text/css)]
/**
* based on code by Sebastian Faubel
* modified by Christoph Cullmann
*/
/* common (X)HTML formats */
body {
font-size: 100%;
line-height: 1.2em; /* Note: it is inherited as is, not recalculated! */
background-color: white;
color: black;
font-family: sans-serif;
padding: 0;
margin: 0;
}
table, td, th {
font-family: sans-serif;
padding: 0;
margin: 0;
text-align: left;
}
input, select {
font-size: 0.8em;
line-height: 1em;
}
optgroup {
font-style: normal;
}
/* navigation header, this is the combined area with logo and section links */
#nav_header {
position: absolute;
z-index: 5;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 52px;
text-align: right;
background-color: #418ade;
border-bottom: 1px solid #000000;
}
#nav_header_bg {
height: 80px;
background-color: #dfe7f3;
border-bottom: 1px solid #000000;
}
#nav_header_logo {
position: absolute;
top: 10px;
left: 10px;
border: 0px;
z-index: 10;
}
#nav_header_logo a img {
width: 64px;
height: 64px;
}
#nav_header_title {
line-height: 1em;
position: absolute;
top: 4px;
left: 86px;
border: 0px;
font-size: xx-large;
font-weight: bold;
text-shadow: white 0px 0px 5px;
color: #444;
vertical-align: middle;
}
#nav_header_location {
position: absolute;
top: 12px;
right: 8px;
border: 0px;
color: #444;
vertical-align: middle;
}
#nav_header_sections_left {
position: absolute;
top: 57px;
left: 0px;
margin-left: 84px;
text-align: left;
vertical-align: middle;
font-size: small;
}
#nav_header_sections_right {
position: absolute;
top: 57px;
right: 8px;
margin-left: 84px;
text-align: right;
vertical-align: middle;
font-size: small;
}
/* sidebar with menu of the section */
#nav_header_sections_active {
color: #000000;
font-weight: bold;
}
/* main color definitions */
.invisible {
display: none;
}
.menuheader {
height: 0;
line-height: 0;
margin: 0;
padding: 0;
font-size: 0;
background-color: #3E91EB;
}
#content {
background-color: white;
text-align: justify;
}
#leftmenu, #rightmenu {
width: 20%;
}
#leftmenu h2, #rightmenu h2 {
font-size: 1em;
padding-left: 1em;
vertical-align: middle;
background-color: #418ade;
border-top: 0.3em solid #418ade;
border-bottom: 0.3em solid #418ade;
color: white;
margin-top: 0;
}
#leftmenu ul, #rightmenu ul {
margin: 0;
padding-left: 0.5em;
padding-bottom: 1em;
}
#leftmenu li, #rightmenu li {
font-size: 0.8em;
margin-left: 2em;
}
#leftmenu ul ul, #rightmenu ul ul {
margin: 0;
padding-left: 0;
}
#leftmenu li li, #rightmenu li li{
font-size: 0.8em;
margin-left: 1em;
}
/* page footer with admin stuff */
#footer {
border-top: 1px solid rgb(153,153,153);
border-bottom: 1px solid rgb(153,153,153);
background-color: #dfe7f3;
padding: 1em 2.5mm 2.5ex 2.5mm;
clear: both;
text-align: center;
}
#header {
font-size: 0.8em;
height: 1.2em;
padding-left: 1em;
vertical-align: middle;
background-color: #418ade;
color: white;
margin: 0;
padding: 0;
border-top: 1px solid white;
border-bottom: 1px solid #206dcd;
}
#headerpath {
text-align: left;
font-weight: bold;
padding-left: 0.5em;
}
#headermenu {
text-align: right;
font-weight: bold;
padding-right: 0.5em;
}
#rightmenu h3 {
padding: 0.3em 1.3em;
font-size: 1em;
}
/* classes */
/* static IDs, ordered top to bottom */
#location {
padding-right: 1em;
vertical-align: middle;
text-align: right;
}
#location i {
color: #036;
font-style: normal;
font-size: 0.8em;
}
#location form {
margin: 0;
}
#location input, #location select {
margin: 2px;
}
#content {
background-color: white;
padding: 0.5em 1.5em 2em 1.5em;
}
#content td, #content th {
font-family: sans-serif;
padding: 0.25em;
margin: 0;
text-align: left;
}
#content h4, #content h3, #content h2, #content h1 {
color: #444;
text-align: left;
line-height: 1.2em; /* Has to be recalculated as h1..h3 change the font size */
}
#quicklinks {
background-color: #E6F0F9;
font-size: 1em;
padding: 1em;
text-align: center;
margin-top: 1em;
margin-left: 0.5em;
margin-bottom: 0.5em;
margin-right: 0.5em;
}
#leftmenu, #rightmenu {
background-color: #dfe7f3;
color: #036;
}
#search {
text-align: center;
padding: 0 0 1em 0;
}
#search label {
display: none;
}
#search input, #search select {
width: 95%;
margin-bottom: 2px;
}
#hotspot {
font-size: 0.8em;
line-height: 1em;
text-align: center;
}
#rightmenu h3 {
margin-bottom: 0;
}
#footer {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
.newsbox1 {
background-color: #E6F0F9;
margin-top: 1em;
margin-bottom: 0.5em;
}
.newsbox2 {
background-color: white;
margin-top: 1em;
margin-bottom: 0.5em
}
/* hidden stuff */
.doNotDisplay {
display: none;
}
["kde_gear_64.png" (image/png)]
["favicon.ico" (image/x-ico)]
["footer.inc" (text/html)]
</div></div>
<?php if ($site_menus == 2) { ?>
</td>
<td valign="top" class="menuheader" height="0">
<?php } ?>
<?php if ($site_menus > 0) { ?>
</td>
</tr>
<tr>
<td valign="top" id="leftmenu" width="25%">
<a name="navigation"></a>
<?php $kde_menu->show(); ?>
<?php if ($site_menus == 2) { ?>
</td>
<td valign="top" id="rightmenu" width="25%">
<?php } ?>
<?php
$searchstart = '<h2 id="t_search">'. i18n_var("Search") . "</h2>\n<div \
id=\"search\">\n";
$hotspotstart = '<h2 id="t_hotspot">' . i18n_var("Hotspot") . "</h2>\n<div \
id=\"hotspot\">\n"; $end = "</div>\n";
if (!isset($site_search) || ($site_search == true)) {
print $searchstart;
include_once("search.inc");
print $end;
}
else if ($site_search == "custom") {
print $searchstart;
include_once("$site_root/includes/search.inc");
print $end;
}
if (isset($site_hotspot)) {
if ($site_hotspot === true) {
print $hotspotstart;
include_once("hotspot.inc");
print $end;
}
else
if ($site_hotspot == "custom") {
print $hotspotstart;
include_once("$site_root/includes/hotspot.inc");
print $end;
}
}
?>
<?php if ($site_menus == 2) { ?>
<?php include('menu_right.inc'); ?>
<?php } ?>
<?php } ?>
<?php
if (!$netscape4) { ?>
<div class="invisible">
<a href="http://www.kde.org/" accesskey="8"><?php i18n("KDE Home")?></a> |
<a href="http://accessibility.kde.org/" accesskey="9"><?php i18n("KDE \
Accessibility Home")?></a> |
<a href="/media/accesskeys.php" accesskey="0"><?php i18n("Description of Access \
Keys")?></a> </div>
<?php } ?>
</td>
</tr>
</table>
<?php
if (isset($name) && isset($mail))
$contact = i18n_var("Maintained by") . " <a href=\"mailto:$mail\">$name</a><br \
/>\n"; else
$contact = i18n_var("Maintained by <a href=\"mailto:webmaster@kde.org\">kde.org \
Webmaster</a><br />\n"); ?>
<div id="footer">
<?php print $contact; ?>
<?php i18n("KDE and K Desktop Environment are trademarks of")?> <a \
href="http://www.kde.org/areas/kde-ev/" title="<?php i18n("Homepage of the KDE \
non-profit Organization")?>"><?php i18n("KDE e.V.")?></a> | <a \
href="http://www.kde.org/contact/impressum.php"><?php i18n("Legal")?></a> </div>
<!--
WARNING: DO NOT SEND MAIL TO THE FOLLOWING EMAIL ADDRESS! YOU WILL
BE BLOCKED INSTANTLY AND PERMANENTLY!
<?php
$trapmail = "aaaatrap-";
$t = pack('N', time());
for($i=0;$i<=3;$i++) {
$trapmail.=sprintf("%02x",ord(substr($t,$i,1)));
}
$ip=$_SERVER["REMOTE_ADDR"];
sscanf($ip,"%d.%d.%d.%d",$ip1,$ip2,$ip3,$ip4);
$trapmail.=sprintf("%02x%02x%02x%02x",$ip1,$ip2,$ip3,$ip4);
echo "<a href=\"mailto:$trapmail@kde.org\">Block me</a>\n";
?>
WARNING END
-->
</body>
</html>
["header.inc" (application/x-php)]
[Attachment #12 (application/pgp-signature)]
_______________________________________________
kde-www mailing list
kde-www@kde.org
https://mail.kde.org/mailman/listinfo/kde-www
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic