/* This controls the width of the fixed width layouts */
-div.fixed {
+.fixed {
width: 910px !important;
}
padding: 0;
}
+html {
+ height: 100%;
+}
+
body {
- background: #ffffff;
- background-image: -webkit-linear-gradient(#880400 0%, black 100%);
- background-image: -moz-linear-gradient(#880400 0%, black 100%);
- background-image: -o-linear-gradient(#880400 0%, black 100%);
- background-image: linear-gradient(#880400 0%, black 100%);
+ /* SVG as background image (IE9/Chrome/Safari/Opera) */
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2ODQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAwJSIgeTE9IjEwMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjODgwNDAwIiBvZmZzZXQ9IjU3JSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c2ODQpIiAvPgo8L3N2Zz4=);
+
+ background-image: linear-gradient(
+ bottom,
+ #000000 0%,
+ #880400 57%
+ );
+ background-image: -o-linear-gradient(
+ bottom,
+ #000000 0%,
+ #880400 57%
+ );
+ background-image: -moz-linear-gradient(
+ bottom,
+ #000000 0%,
+ #880400 57%
+ );
+ background-image: -webkit-linear-gradient(
+ bottom,
+ #000000 0%,
+ #880400 57
+ );
+ background-image: -ms-linear-gradient(
+ bottom,
+ #000000 0%,
+ #880400 57%
+ );
+ background-image: -webkit-gradient(
+ linear,
+ left bottom,
+ left top,
+ color-stop(0, #000000),
+ color-stop(0.57, #880400)
+ );
background-attachment: fixed;
+
font-size: 9pt;
font-family: "trebuchet ms", helvetica, sans-serif;
}
-h1, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6 {
font-size: 20px;
font-weight: normal;
letter-spacing: -1px;
text-align: left;
}
-h3, h4, h5, h6 {
+h2, h3, h4, h5, h6 {
color: #66000F;
}
-h1 span {
- position: absolute;
- font-weight: bold;
- padding-left: 1.7em;
-}
-
-h3 span {
- font-weight: bold;
-}
-
-h4 span {
- font-weight: bold;
-}
-
br.clear {
clear: both;
}
padding: 3px;
}
-img.floatTL {
- float: left;
- margin-right: 1.5em;
- margin-bottom: 1.5em;
- margin-top: 0.5em;
-}
-
a {
text-decoration: underline;
- color: #D90000;
+ color: #d90000;
}
a:hover {
text-decoration: none;
}
-ul.links {
- list-style: none;
-}
-
-ul.links li {
- line-height: 2em;
-}
-
p {
line-height: 1.8em;
}
+hr {
+ margin: 0.3em 0 0.3em 0;
+}
+
iframe {
border: 0;
}
/* Header */
#header {
- width: 100%;
- height: 80px;
-}
-
-#header_inner {
- position: relative;
- width: 910px;
- height:80px;
+ height: 70px;
margin: 0 auto;
}
/* Logo */
#logo {
- position: absolute;
- width: 200px;
- height:65px;
- bottom: 0em;
+ height: 65px;
+ margin-top: 1em;
background: url('/themes/ipfire-new/images/tux2.png') no-repeat;
- background-position: left;
}
#logo h1 {
- display: inline;
color: #fff;
font-size: 3.6em;
+ font-weight: bold;
+ padding-left: 1.7em;
}
/* Main */
-#main {
- position: relative;
- width: 910px;
+.bigbox {
margin: 0 auto;
margin-top: 1em;
- padding-left: 20px;
- padding-right: 20px;
+ padding: 1.5em 2em 0 2em;
border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
border: 1px solid black;
}
+#main_inner {
+ padding-bottom: 1.5em;
+}
+
#main_inner p {
text-align: justify;
- margin-bottom: 2.0em;
+ margin-bottom: 2em;
}
#main_inner ul {
- margin-bottom: 2.0em;
-}
-
-#main_inner {
- position: relative;
- width: 910px;
- margin: 0 auto;
- padding-top: 1.5em;
+ margin-bottom: 2em;
}
#main_inner h1 {
+ font-size: 1.8em;
margin-bottom: 1em;
}
-#main_inner h3, #main_inner h4 {
- border-bottom: dotted 1px #E1E1E1;
- position: relative;
-}
-
-#main_inner h3 {
- font-size: 2.1em;
- padding-bottom: 0.1em;
- margin-bottom: 0.8em;
-}
-
-#main_inner h4 {
- font-size: 1.2em;
- padding-bottom: 0.175em;
- margin-bottom: 1.4em;
- margin-top: 0.95em;
-}
-
#main_inner .post {
- position: relative;
border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
border: 1px solid silver;
- padding-left: 2em;
- padding-right: 2em;
- padding-bottom: 1em;
- padding-top: 1em;
+ padding: 1em 2em 1em 2em;
+ margin-bottom: 1em;
+ clear: both;
}
-#main_inner .post h3 {
+#main_inner .post h2 {
+ border-bottom: dotted 1px #e1e1e1;
font-size: 1.7em;
- padding-bottom: 1.2em;
-}
-
-#main_inner .post ul.post_info {
- list-style: none;
- position: absolute;
- top: 3em;
- font-size: 0.8em;
-}
-
-#main_inner .post ul.post_info li {
- background-position: 0em 0.2em;
- background-repeat: no-repeat;
- display: inline;
- padding-left: 18px;
-}
-
-#main_inner .post ul.post_info li.date {
- background-image: url('/themes/ipfire-new/images/n5.gif');
-}
-
-#main_inner .post ul.post_info li.comments {
- background-image: url('/themes/ipfire-new/images/n6.gif');
- margin-left: 1.1em;
+ margin-bottom: 1em;
}
-/* Footer */
-
#footer {
- width: 930px;
- margin: 0 auto;
- text-align: center;
- clear: both;
- border-top: dotted 1px #E1E1E1;
- margin-top: 1.0em;
- margin-bottom: 1.0em;
- padding-top: 1.0em;
- text-transform: lowercase;
+ height: 2.5em;
+ margin-bottom: 1em;
}
-/* Search */
-
input {
margin: 0.2em;
}
input.button {
- background: #CA2F2F url('/themes/ipfire-new/images/n3.gif') repeat-x;
+ background: #ca2f2f url('/themes/ipfire-new/images/n3.gif') repeat-x;
color: #fff;
- border: solid 1px #A94B4B;
+ border: solid 1px #a94b4b;
font-weight: bold;
text-transform: lowercase;
font-size: 0.8em;
}
input.text {
- border: solid 1px #F1F1F1;
- font-size: 1.0em;
- padding: 0.25em 0.25em 0.25em 0.25em;
-}
-
-#search {
- width: 100%;
- margin-bottom: 2.0em;
-}
-
-#search input.text {
- position: absolute;
- top: 0em;
- left: 0em;
- width: 9.5em;
-}
-
-#search input.button {
- position: absolute;
- top: 0em;
- right: 0em;
- min-width: 2.0em;
- max-width: 2.5em;
+ border: solid 1px #f1f1f1;
+ padding: 0.25em;
}
#traffic {
- margin-top: -2.2em;
- margin-left: 60em;
-}
-
-/* LAYOUT - 3 COLUMNS */
-
-#primaryContent_3columns {
- margin-right: 34em;
-}
-
-#columnA_3columns {
- float: left;
- width: 100%;
- margin-right: -34em;
- padding-right: 2em;
-}
-
-#secondaryContent_3columns {
float: right;
-}
-
-#columnB_3columns {
- width: 13.0em;
- float: left;
- padding: 0em 2em 0.5em 2em;
- border-left: dotted 1px #E1E1E1;
-}
-
-#columnC_3columns {
- width: 13.0em;
- float: left;
- padding: 0em 0em 0.5em 2em;
- border-left: dotted 1px #E1E1E1;
-}
-
-#columnC_2columns {
- float: left;
- width: 100%;
-}
-
-#primaryContent_columnless {
- position: relative;
-}
-
-#columnA_columnless {
- position: relative;
- margin-left: -5em;
-}
-
-/* status */
-.statusdisplay {
- border-radius: 8px 8px 8px 8px;
- -webkit-border-radius: 8px 8px 8px 8px;
- padding-left: 20px;
- padding-right: 20px;
- margin: 0 auto;
- width: 950px;
- height:100px;
- margin-left: -1.6em;
- margin-top: 1em;
- margin-bottom: 1em;
- background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
+ min-width: 20em;
+ line-height: 32px;
}
/* Menu */
-#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
- border: 0;
- margin: 0;
- padding: 0;
- position: relative;
-}
-
#cssmenu {
- position: relative;
- width: 950px;
margin: 0 auto;
- background: #dddddd; /* Old browsers */
+ margin-top: 0;
+ padding-top: 0;
border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
font-weight: 600;
border: 1px solid black;
}
-#cssmenu:after, #cssmenu ul:after {
- content: '';
- display: block;
- clear: both;
-}
-
#cssmenu a {
border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
color: #111111;
display: inline-block;
- font-family: Arial, Verdana, sans-serif;
- font-size: 12px;
line-height: 32px;
- padding: 0 15px;
+ padding: 0 1em;
text-decoration: none;
- top: 100%;
}
#cssmenu ul {
#cssmenu > ul > li {
display: inline-block;
- line-height: 20px;
}
#cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a {
background: #aaaaaa;
}
-#cssmenu .has-sub {
- z-index: 1;
-}
-
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
- width: 160px;
- top: 100%;
- left: 0;
}
#cssmenu .has-sub ul li a {
+ min-width: 12em;
border-radius: 7px 7px 7px 7px;
background: #ffffff;
color: grey;
- font-size: 12px;
display: block;
line-height: 40%;
padding: 12px 5px;
-webkit-box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.15);
}
-#cssmenu .has-sub .has-sub:hover > ul {
- display: block;
-}
-
-#cssmenu .has-sub .has-sub ul {
- display: none;
- position: absolute;
-}
-
-#cssmenu .has-sub .has-sub ul li a {
- background: #606a76;
- box-shadow: none;
- -webkit-box-shadow: none;
-}
-
-#cssmenu .has-sub .has-sub ul li a:hover {
- background: #4a5662;
- box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
- -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
-}
-
-
/* Table */
/* when using class='bordered' after tabletag */
.bordered td:last-child {
border-right: 1px solid grey;
}
-
} else {
print '<li>';
}
- print '<a href="'.$link.'"><span>'.$submenus->{$item}->{'caption'}.'</span></a>';
+ print '<a href="'.$link.'">'.$submenus->{$item}->{'caption'}.'</a>';
&showsubmenu($subsubmenus) if ($subsubmenus);
print '</li>';
#
# print menu html elements
sub showmenu() {
- print '<div id="cssmenu"><ul>';
- foreach my $k1 ( sort keys %$menu ) {
- $link = getlink($menu->{$k1});
- next if (!is_menu_visible($link) or $link eq '');
- print '<li class="has-sub "><a><span>'.$menu->{$k1}->{'caption'}.'</span></a>';
- my $submenus = $menu->{$k1}->{'subMenu'};
- &showsubmenu($submenus) if ($submenus);
- print "</li>";
- }
- print "</ul>";
+ print '<div id="cssmenu" class="bigbox fixed">';
if ($settings{'SPEED'} ne 'off') {
print <<EOF;
EOF
}
- print "</div>";
+ print "<ul>";
+ foreach my $k1 ( sort keys %$menu ) {
+ $link = getlink($menu->{$k1});
+ next if (!is_menu_visible($link) or $link eq '');
+ print '<li class="has-sub "><a><span>'.$menu->{$k1}->{'caption'}.'</span></a>';
+ my $submenus = $menu->{$k1}->{'subMenu'};
+ &showsubmenu($submenus) if ($submenus);
+ print "</li>";
+ }
+
+ print "</ul></div>";
}
###############################################################################
my $suppressMenu = shift;
my @tmp = split(/\./, basename($0));
my $scriptName = @tmp[0];
- my $h2 = $title;
@URI=split ('\?', $ENV{'REQUEST_URI'} );
&General::readhash("${swroot}/main/settings", \%settings);
&genmenu();
- $title = "IPFire - $title";
+ my $headline = "IPFire";
if ($settings{'WINDOWWITHHOSTNAME'} eq 'on') {
- $title = "$settings{'HOSTNAME'}.$settings{'DOMAINNAME'} - $title";
+ $headline = "$settings{'HOSTNAME'}.$settings{'DOMAINNAME'}";
}
print <<END
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
- <title>$title</title>
+ <title>$headline - $title</title>
$extrahead
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="/favicon.ico" />
}
print <<END
- </head>
- <body>
-END
-;
-
-print <<END
-<!-- IPFIRE HEADER -->
- <div id="header_inner" class="fixed">
+ </head>
+ <body>
+ <div id="header" class="fixed">
<div id="logo">
END
;
if ($settings{'WINDOWWITHHOSTNAME'} eq 'on') {
- print "<h1><span>$settings{'HOSTNAME'}.$settings{'DOMAINNAME'}</span></h1><br />";
+ print "<h1>$settings{'HOSTNAME'}.$settings{'DOMAINNAME'}</h1>";
} else {
- print "<h1><span>IPFire</span></h1><br />";
+ print "<h1>IPFire</h1>";
}
print <<END
&showmenu() if ($suppressMenu != 1);
print <<END
-<div id="main">
- <div id="main_inner" class="fixed">
- <h1>$h2</h1>
-
- <div id="columnA_2columns">
+ <div class="bigbox fixed">
+ <div id="main_inner" class="fixed">
+ <h1>$title</h1>
END
;
}
return;
}
-
###############################################################################
#
# print page closing html layout
$uptime =~ s/day /$Lang::tr{'day'}/;
$uptime =~ s/user(s|)/$Lang::tr{'user'}/;
$uptime =~ s/load average/$Lang::tr{'uptime load average'}/;
-print <<END
- <!-- closepage begin -->
- </div>
- </div>
-END
-;
-
-print "<div id='columnC_2columns'>";
-print <<END
- <table cellspacing="5" class="statusdisplay" border="0">
- <tr><td align='center'>$status Uptime: $uptime</td></tr>
-END
-;
-print <<END
- </table>
+print <<END;
</div>
</div>
+
+ <div id="footer" class='bigbox fixed'>
+ $status Uptime: $uptime
+ </div>
</body>
</html>
-<!-- closepage end -->
END
;
}
###############################################################################
#
# print big box opening html layout
-sub openbigbox
-{
+sub openbigbox {
}
###############################################################################
#
# print big box closing html layout
-sub closebigbox
-{
+sub closebigbox {
}
###############################################################################
# @param page width
# @param page align
# @param page caption
-sub openbox
-{
+sub openbox {
$width = $_[0];
$align = $_[1];
$caption = $_[2];
-print <<END
-<!-- openbox -->
- <div class="post" align="$align">
-END
-;
-if ($caption) { print "<h3>$caption</h3>\n"; } else { print " "; }
+ print "<div class='post' align='$align'>\n";
+
+ if ($caption) {
+ print "<h2>$caption</h2>\n";
+ }
}
###############################################################################
#
# print box closing html layout
-sub closebox
-{
- print <<END
- </div>
- <br class="clear" />
- <!-- closebox -->
-END
-;
+sub closebox {
+ print "</div>";
}
1;