[Xfce4-commits] <www:xfce-4.10> Experiment a bit with the frontpage.
Nick Schermer
noreply at xfce.org
Sun Apr 8 22:00:02 CEST 2012
Updating branch refs/heads/xfce-4.10
to 68d5f8c1ac3b269a0cb46dadfe46844cc5d4b9b8 (commit)
from 51385915800a4d72181b7738d602c458b98256d7 (commit)
commit 68d5f8c1ac3b269a0cb46dadfe46844cc5d4b9b8
Author: Nick Schermer <nick at xfce.org>
Date: Sun Apr 8 21:59:02 2012 +0200
Experiment a bit with the frontpage.
pages/frontpage.php | 30 ++++++++++++---------
pages/header.php | 14 ++++++----
style/base.css | 5 +--
style/frontpage.css | 69 ++++++++++++++++++++++++++++++--------------------
4 files changed, 68 insertions(+), 50 deletions(-)
diff --git a/pages/frontpage.php b/pages/frontpage.php
index b00232b..0861159 100644
--- a/pages/frontpage.php
+++ b/pages/frontpage.php
@@ -7,10 +7,11 @@ $head['description'] = 'Xfce Desktop Environment';
$head['keywords'] = 'desktop environment, window manager, desktop, speed, lightweight, gtk+, open source, xforms common environment';
$head['feed'] = 'http://www.xfce.org/feed?lang='.$lang;
$head['javascript'] = '/style/tinyslider.js';
+$head['pagediv'] = false;
?>
-<div id="slides">
- <div id="slider">
+<div id="slidewrap" class="page_contents">
+ <div id="slide">
<ul>
<li>
<img src="/images/frontpage/slider-desktop.jpg" width="800" height="400" alt="Xfce Desktop" />
@@ -38,23 +39,24 @@ $head['javascript'] = '/style/tinyslider.js';
</li>
</ul>
</div>
- <ul id="pagination">
- <li onclick="slideshow.pos(0)"></li>
- <li onclick="slideshow.pos(1)"></li>
- <li onclick="slideshow.pos(2)"></li>
- <li onclick="slideshow.pos(3)"></li>
- <li onclick="slideshow.pos(4)"></li>
- <li onclick="slideshow.pos(5)"></li>
- </ul>
- <div class="clearboth"></div>
+ <div id="slidenavwrap">
+ <ul id="slidenav">
+ <li onclick="slideshow.pos(0)"></li>
+ <li onclick="slideshow.pos(1)"></li>
+ <li onclick="slideshow.pos(2)"></li>
+ <li onclick="slideshow.pos(3)"></li>
+ <li onclick="slideshow.pos(4)"></li>
+ <li onclick="slideshow.pos(5)"></li>
+ </ul>
+ </div>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
- id:'slider',
+ id:'slide',
auto:10,
vertical:false,
- navid:'pagination',
+ navid:'slidenav',
activeclass:'current',
position:0,
rewind:false,
@@ -62,6 +64,8 @@ var slideshow=new TINY.slider.slide('slideshow',{
});
</script>
+<div class="page_contents file_frontpage">
+
<h2><?php E_('Latest News') ?></h2>
<?php
$count = 3;
diff --git a/pages/header.php b/pages/header.php
index a3d061d..ce304f0 100644
--- a/pages/header.php
+++ b/pages/header.php
@@ -47,7 +47,7 @@ else
<div id="xfce-header-clear"></div>
</div>
-<div id="page-wrap">
+<div class="page-wrap">
<div id="menu-main">
<div>
<h5 class="hidden"><?php E_('Categories') ?></h5>
@@ -60,9 +60,6 @@ else
<li><a href="/projects"><?php E_('Projects') ?></a></li>
</ul>
</div>
-<?php
- if (count ($languages) > 1) {
-?>
<form id="languageform" action="" method="get">
<select name="lang" onchange="document.getElementById('languageform').submit(); return true;" title="<?php E_('Change language') ?>">
<?php
@@ -80,7 +77,6 @@ else
</select>
<button type="submit" class="hidden"><?php E_('Change language') ?></button>
</form>
-<?php } ?>
<div class="clearboth"></div>
</div>
@@ -123,5 +119,11 @@ else
echo '</div>';
}
+
+ if (!isset ($head['pagediv']) || $head['pagediv'] == true)
+ {
+?>
+ <div class="page_contents file_<?php echo $page_class ?>">
+<?php
+ }
?>
- <div id="page-contents" class="page_contents file_<?php echo $page_class ?>">
diff --git a/style/base.css b/style/base.css
index 3119f41..23eb989 100644
--- a/style/base.css
+++ b/style/base.css
@@ -7,11 +7,10 @@ body {
background-color: #eee;
}
-#page-wrap {
+.page-wrap {
margin: auto;
text-align: left;
- margin-bottom: 3em;
- padding: 10px;
+ padding: 12px;
min-width: 850px;
max-width: 1000px;
}
diff --git a/style/frontpage.css b/style/frontpage.css
index b59e716..8b4fd17 100644
--- a/style/frontpage.css
+++ b/style/frontpage.css
@@ -2,27 +2,26 @@
margin-right: 0;
}
-#slides {
- width: 800px;
+#slidewrap {
+ text-align: center;
margin: auto;
- height: 400px;
- position: relative;
-
- box-shadow: 0 0 3px rgba(0, 0, 0, .5);
- -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .5);
- -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .5);
+ background: #bcbcbc;
+ margin-bottom: 12px;
+ padding: 0;
}
-#slider {
- float: left;
- position: relative;
- overflow: auto;
+#slide {
+ float: inline-block;
+ position: relative;
+ overflow: hidden;
width: 800px;
height: 400px;
background: #000;
cursor: default;
overflow: hidden;
+ margin: auto;
+ border: 12px #bcbcbc solid;
}
-#slider ul {
+#slide ul {
position: absolute;
list-style: none;
top: 0;
@@ -30,12 +29,13 @@
margin: 0;
padding: 0;
}
-#slider li {
+#slide li {
float: left;
width: 800px;
height: 400px;
}
-#slider li p {
+#slide li p {
+ text-align: left;
padding:6px;
margin:6px;
position:absolute;
@@ -46,25 +46,38 @@
border: 0;
border-radius: 6px;
}
-#slider li p {
+#slide li p {
background:rgba(0, 0, 0, 0.8)
}
-#pagination {
- position:absolute;
- top:8px;
- right:0;
+#slidenavwrap {
+ background: #fff;
+}
+#slidenav {
list-style:none;
margin:0;
padding:0;
+ line-height: 0;
}
-#pagination li {
- float:left;
+#slidenav li {
+ border: 1px solid #bcbcbc;
+ border-radius: 50%;
+ width: 12px;
+ height: 12px;
+ display: inline-block;
cursor:pointer;
- height:8px;
- width:8px;
- margin:0 8px 0 0;
- border:2px solid #fff;
+ margin: 12px 6px;
+ background: #dcdcdc;
+
+ transition: background 0.2s linear;
+ -moz-transition: background 0.2s linear;
+ -webkit-transition: background 0.2s linear;
+ -o-transition: background 0.2s linear;
}
-#pagination li:hover, #pagination li.current {
- background:#fff;
+#slidenav li:hover {
+ background: #bababa;
+}
+
+#slidenav li.current {
+ background: #acacac;
+ border-color: #5f5f5f;
}
More information about the Xfce4-commits
mailing list