SVN commit 1225234 by elenamramirez: GUI: It has changed the layout of sections with a new layout of columns. Added a 'back to top' and a 'back to home' links. Replaced 'teaser images' by a new div.
M +1 -1 edu/about_us/users_stories.php AM edu/images/back-home.png AM edu/images/bg-intro.png AM edu/images/icons.png AM edu/images/intro_a.png AM edu/images/list-news.png AM edu/images/tree.png AM edu/images/up.png AM edu/images/wellcome.png M +29 -8 edu/index.php M +5 -0 edu/kde-edu.css M +11 -1 edu/site_includes/show_news.inc M +128 -39 media/includes/derry/css.php M +3 -0 media/includes/derry/template-bottom1.inc M +1 -0 media/includes/derry/template-bottom2.inc M +10 -2 media/includes/derry/toolbox.inc M +2 -2 media/styles/plasmaMenuEdu.css --- trunk/www/sites/www-devel/edu/about_us/users_stories.php #1225233:1225234 @@ -6,7 +6,7 @@ ?> <a href="http://www.voxhumanitatis.org";><img src="../images/icons/vh-pms_100x113.png" style="width:100px;height:113px;float:right;" /></a> -<h2><a href="http://www.voxhumanitatis.org";>Vox Humanitatis</a></h2> +<h3><a href="http://www.voxhumanitatis.org";>Vox Humanitatis</a></h3> <p>Vox Humanitatis (<a href="http://www.voxhumanitatis.org";>www.voxhumanitatis.org</a>) cares about less resourced cultures and with that about the connected languages. Since we are also dedicated to the educational sector we are always searching for ways to create educational material which starts from "simple" alphabets to complex grammar exercises and study material for other subjects such as science, mathematics, history etc.</p> --- trunk/www/sites/www-devel/edu/index.php #1225233:1225234 @@ -1,3 +1,10 @@ +<style> +#main h2 { + position: absolute; + top: 400px; + width: 90%; +} +</style> <?php // error_reporting(E_ALL); @@ -10,10 +17,12 @@ include( "site_includes/show_news.inc" ); ?> + <script type="text/javascript" src="/media/javascripts/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/media/javascripts/plasmaMenu.min.js"></script> <script type="text/javascript" src="/media/javascripts/jquery.cycle.all.min.js"></script> <script type="text/javascript"> + (function($) { var cache = []; // Arguments are image paths relative to the current page. @@ -77,12 +86,14 @@ <?php } ?> }); - </script><?php if (isset($teaser)) $teaserImages->generate(); ?> -<div class="info-area"> - - <h4><strong>Latest News from our Blogs</strong></h4> - <?php show_news( 6 ); ?> - <p><a href="./news/">More News »</a></p> + </script> +<!-- <?php if (isset($teaser)) $teaserImages->generate(); ?>--> +<div class="intro"> +<img src="images/tree.png" alt="Colour markers" title="Six colour markers"/><h3>Wellcome to KDE Edu!</h3> +<p>We make free educational software for children and adults, students and teachers. We make software for you.</p> +<p>Grow your knowledge with our applications.</p> +<p>Or get involved with us in development apps</p> +<div class="buttons"><a href="/applications/" title="Our applications" class="apps">Applications</a> <a href="/get_involved/" title="Get involved" class="involved">Get involved</a></div> </div> <p><strong>Free Educational Software based on the KDE technologies</strong>: students, parents, children, teachers, adults, you can freely use our software, copy it, modify it to your needs and enjoy learning!</p> @@ -95,16 +106,26 @@ that are of interest to university students and anyone else with a desire to learn!</p> -<h3>Keep up to date</h3> +<div id="rss"><h3>Keep up to date</h3> -<p>Contributors of the KDE Education Project provide news in their blogs. An aggregation of all these posts is available as <a href="rss.php" title="RSS formatted news feed">RSS feed <img src="pics/rss.png" class="inline" width="22" height="22" alt="RSS"/></a>.<br /> +<p>Contributors of the KDE Education Project provide news in their blogs. An aggregation of all these posts is available as <a href="rss.php" title="RSS formatted news feed">RSS feed </a>.<br /><!-- <img src="pics/rss.png" class="inline" width="22" height="22" alt="RSS"/> --> Have a look at the KDE feed reader <a href="http://kde.org/applications/internet/akregator/"; title="aKregator RSS/Atom reader">aKregator</a>.</p> +</div> +<div id="required-area"> <h3>KDE-Edu on Microsoft Windows</h3> <p>While until now only available on Unix, BSD and Linux, still in beta but already usable, the KDE 4 series bring our applications on Windows. Read more on the <a href="http://techbase.kde.org/Projects/KDE_on_Windows";>KDE on Windows</a> page in the techbase wiki! </p> +</div> +<div class="info-area"> + <h4>Latest News from our Blogs</h4> + <?php show_news( 2 ); ?> + <p><a href="./news/">More News »</a></p> +</div> + + <?php include "footer.inc"; ?> --- trunk/www/sites/www-devel/edu/kde-edu.css #1225233:1225234 @@ -5,6 +5,10 @@ padding-left: 40px; }*/ +.toolboxtext{ + font-size: .81em; + } + #main img.inline { padding:0; margin:0; @@ -14,6 +18,7 @@ #main ul li { margin-bottom: 0.5ex; + line-height: 1.4em; } #main .info-area ul li { --- trunk/www/sites/www-devel/edu/site_includes/show_news.inc #1225233:1225234 @@ -17,7 +17,8 @@ // here come the list items, only using the title foreach($feedu->get_items(0, $length ) as $key => $item){ - echo " <li><a href=\"".$item->get_permalink()."\"><span class='title'>".$item->get_title()."</span></a><span class='date'>".$item->get_date()."</span></li>\n"; + $date = date('j / M / Y', strtotime($item->get_date())); + echo " <li><a href=\"".$item->get_permalink()."\"><span class='title'>".$item->get_title()."</span><span class='date'>".$date."</span> <span class='desc'>".trim_desc($item->get_description())."</span></a></li>\n"; } // list finished @@ -36,4 +37,13 @@ } } } + +function trim_desc($description) { + $maxChars = 40; + if (strlen($description) < $maxChars) { + $maxChars = strlen($description); + } + return substr($description, 0, $maxChars)."..."; + +} ?> \ No newline at end of file --- trunk/www/sites/www-devel/media/includes/derry/css.php #1225233:1225234 @@ -20,7 +20,7 @@ font-size: 62.5%; } -body { line-height: 1; /*font-size: 1.2em; */text-align: center; font-family:"Liberation Sans","Bitstream Vera Sans",sans-serif} +body { line-height: 1; font-size: 1.3em; text-align: center; font-family:Verdana,Arial, sans-serif}/*"Liberation Sans","Bitstream Vera Sans"*/ ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; } @@ -49,6 +49,7 @@ background-image:url('../../images/bg-grunge.png'); background-repeat:no-repeat; background-position:top center; + color: #666666; /*min-height: 1100px;*/ } @@ -63,8 +64,20 @@ .header h1{ float: left; padding-left: 20px; + position: relative; } +.header h1:hover:after{ + content: ' '; + background: url('../../../images/back-home.png') no-repeat left top; + display: block; + height: 53px; + width: 153px; + position: absolute; + right: -125px; + top: 20px; +} + .header .search{ float: right; margin-top: 30px; @@ -84,7 +97,7 @@ border:none; padding: 8px 8px 7px 30px; color: #2d4e63; - width: 95px; + width: 145px; } /*.header {background-image:url('../../images/page-hr-alt.png'); @@ -142,22 +155,25 @@ background-position:0 0} #cp-menu-support:hover {text-shadow: #e285ff 0px 0px 18px;} -.content { background:url('../../images/bg-content.png') repeat-y top center; +.content { background:url('../../images/bg-content.png') repeat-y 0px 0px; clear: left; - padding: 40px 0px;} + padding: 40px 0px; + float: left;position:relative; + min-width: 920px;} .content .teaser { height: 300px; width: 830px; display: block; margin: auto; } .content .teaser_hide { display: none; } - .content a { color: #235E9A; } + /*.content a { color: #235E9A; }*/ .footer { text-align: left; background-image: url('../../images/page-fr-alt.png'); background-repeat: no-repeat; background-position: 0 0; - width: 850px; height: 60px; padding: 40px 0 0 0} + width: 850px; height: 60px; padding: 40px 0 0 0; + } .footer .module { float: left; width: 25%; margin: 0 10px 30px 10px} .footer .module {font-size:x-small;} -#footer {color: #aaa; font-size:xx-small; width:100%;background:#505050 url('../../images/footer.png') no-repeat center top;padding:5px 0 5px 0} +#footer { clear:both; color: #aaa; font-size:xx-small; width:100%;background:#505050 url('../../images/footer.png') no-repeat center top;padding:5px 0 5px 0} #footer a {color: #eee;} #footer_text{ @@ -182,22 +198,53 @@ #main h1 { color: #446888;font-size:22pt; padding:30px 0px 20px 0px;} #main h2 { color: #446888;margin:30px 0px 20px 0px;/*font-size:18pt;*/ background: url('../../images/under-h2.png') no-repeat center bottom;} #main h3 { color: #446888;font-size:17pt;font-weight:bold} -#main h4 { color: #446888;font-size:16pt;} +#main h4 { color: #446888;} #main h5 { color: #446888;font-size:14pt;} #main h6 { color: #446888;font-size:12pt;font-weight:bold} */ #main {font-size:10pt; line-height:120%;text-shadow: #fff 0px 0px 3px;} -#main a { color: #235E9A; text-decoration:none} -#main a:hover {text-decoration:underline;} +.content a { color: #0099ff; text-decoration:none; border-bottom: 1px dotted;} +.content a:hover {color: #7db63a;} -#main p { color: #444; padding: 10px 15px; font-size: 1.3em; line-height:1.7em;} +#main p { padding: 10px 15px; line-height:1.7em;} +#main .intro{ + padding: 25px 0px 45px; + margin:15px 0px 85px; + background: url("../../../images/bg-intro.png") no-repeat scroll right 0 transparent; +} + +#main .intro p{ + font-size: 1.15em; +} +#main .intro + p{ + clear: right; +} + +#main .intro .buttons{ + margin-left: 16px; + margin-top: 15px; +} +#main .intro a{ + display: inline-block; + background: #5c8abc; + color: #fff; + text-shadow: 1px 1px 0px #054b98; + padding: 7px 12px; + margin-right: 10px; + border-bottom: none; +} +#main .intro a:hover{ + background: #054b98; + text-shadow: 1px 1px 0px #5c8abc; + text-decoration:none; +} #main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {font-weight:normal} #main h1 { line-height:1.3em; padding-left:10px; /*background-image:url('../../images/30.png'); */ color: #2d4e63;font-size:1.8em; margin:20px 10px 10px 0px;} -#main h2 { color: #0d5381;font-size:1.9em; padding:10px 0px 15px 0px;} -#main h3 { color: #557899;font-size:15pt; padding:25px 0px 15px 0px;} -#main h4 { color: #557899;font-size:13pt; padding:20px 0px 10px 0px;font-weight:bold;} +#main h2 { color: #0d5381;font-size:1.5em; padding:10px 0px 15px 0px;} +#main h3 { color: #557899;font-size:1.2em; padding:25px 0px 15px 0px;} +/*#main h4 { color: #557899;font-size:13pt; padding:20px 0px 10px 0px;font-weight:bold;}*/ #main h5 { color: #557899;font-size:12pt; padding:15px 0px 10px 0px;font-weight:bold;} #main h6 { color: #557899;font-size:11pt; padding:15px 0px 10px 0px;font-weight:bold;} @@ -207,6 +254,13 @@ #main .teaser img{ border: none; margin: 0px; padding: 0px; background: none; } +#main .intro h3{ + text-indent: -9999999999999999px; + background: url('../../../images/wellcome.png') no-repeat left top; +} +#main .intro img{ + border: none; margin: -25px 0px 0 0; padding: 0px; background: none;float: right; +} #main dl,#main ol,#main ul {padding:10px 30px;} #main ol {list-style:decimal} @@ -245,8 +299,12 @@ #main .toolbox ul a{ color: #878787; + border-bottom: none; } +#main .toolbox ul a:hover{ + text-decoration: underline; +} #main .toolbox ul li:hover { list-style-image: none; } @@ -284,9 +342,6 @@ padding-top: 15px; } -/*.info-area ul{ - padding: 5px; background-image:url('../../images/30.png'); border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;-khtml-border-radius: 3px; -}*/ #infobox-return img, .header-image { padding: 0px !important; @@ -324,50 +379,67 @@ OCS Stuff */ -.info-area { - float: right; - max-width: 300px; - padding-left: 10px; - text-align: left; - background: url('../../images/vertical-sep.png') repeat-y left top; +#rss, #required-area, .info-area{ + float: left; + width: 32%; + margin-right: 1%; + margin-top: 45px; } +#rss h3, #required-area h3, #main .info-area h4{ + background: url('../../../images/icons.png') no-repeat left top; + padding: 9px 0 5px 36px; + font-size: 1.25em; +} +#required-area h3{ + background-position: left -45px; +} #main .info-area h4{ - font-size: 1.7em; - /*text-transform: uppercase;*/ - padding-left: 55px; - font-weight: bold; - background: url('../../images/news.png') no-repeat 15px bottom; - font-family: Times New Roman, Georgia, serif; - font-style: italic; - color: #555; - text-shadow: 1px 1px 0px #ccc; + background-position: left -90px; } + + #main .info-area ul, #main .info-area ul li:hover{ list-style: none; + padding: 0px; } #main .info-area ul li{ - margin: 15px 0px 15px 10px; + margin: 0px 15px; } #main .info-area ul a{ - font-size: 1.2em; color: #777; display: block; - margin: 9px 0px; + margin: 9px 0px 0px 0px; line-height: 1.4em; + border-bottom: 0px; } +.title{ + display: block; + color:#0099FF; + font-family: Georgia, serif; + font-style: italic; + font-size: .9em; + font-weight: bold; +} +.title:hover{ + color: #7DB63A; + } .date{ text-shadow: none; - background: #E3726F; - color: #fff; - padding: 2px 5px; - font-size: 1.1em; + color: #039aff; + padding: 2px 0px; + font-size: .85em; } +.desc{ + background: url(../../../images/list-news.png) no-repeat -4px 3px; + padding-left: 13px; +} + #main .info-area p{ text-align: right; } @@ -419,4 +491,21 @@ #hotspot {float: right;} +.up{ + position: absolute; + bottom: -31px; + right: -37px; +} +.up a{ + text-indent: -999999999999999999999px; + background: url('../../../images/up.png') no-repeat left top; + display: block; + width: 121px; + height: 128px; + border-bottom: none; +} +.up a:hover{ + background-position: left -135px; +} + --- trunk/www/sites/www-devel/media/includes/derry/template-bottom1.inc #1225233:1225234 @@ -1,6 +1,9 @@ <?php // This file contains content between the page text and the menu ?> +<div class="up"> + <a href="#">Back to top</a> </div> </div> + </div> </div> --- trunk/www/sites/www-devel/media/includes/derry/template-bottom2.inc #1225233:1225234 @@ -6,6 +6,7 @@ else $contact = i18n_var("Maintained by <a href=\"mailto:webmaster@kde.org\">The KDE Webmaster</a><br />\n"); ?> + <div id="footer"><div id="footer_text"> <?php print $contact; ?> KDE<sup>®</sup> and <a href="/media/images/trademark_kde_gear_black_logo.png">the K Desktop Environment<sup>®</sup> logo</a> are registered trademarks of <a href="http://ev.kde.org/"; title="Homepage of the KDE non-profit Organization">KDE e.V.</a> | --- trunk/www/sites/www-devel/media/includes/derry/toolbox.inc #1225233:1225234 @@ -1,7 +1,15 @@ -<?php if (! isset ($hidelocation) || $hidelocation == false) { ?> +<?php if (! isset ($hidelocation) || $hidelocation == false) { + + $url = $_SERVER["REQUEST_URI"]; + // TEMPORARY + $url = preg_replace("/mainsite\//", "", $url); + + // If the user is NOT on the root + if ($url != "/") { + ?> <div id="location" class="toolboxtext"> <ul> <li><?php $plasmaMenu->breadCrumb() ?></li> </ul> </div> -<?php }?> +<?php } }?> --- trunk/www/sites/www-devel/media/styles/plasmaMenuEdu.css #1225233:1225234 @@ -40,7 +40,7 @@ background:url('../images/plasmaMenuEdu/menu-arrow.png') no-repeat left top; color: #2d4e63; text-transform: inherit; - font-size: 1.6em; + font-size: 1.2em; margin-left: 25px; padding-left: 30px; } @@ -118,7 +118,7 @@ .header .plasmamenu_box div div div div ul li div div ul li a { color: #444; text-shadow: #ffffff 1px 1px 1px; - font-size: 1.2em; + font-size: .9em; vertical-align: top; display: block; border-top: 1px solid #ced1db;
