Minor topbar corrections

main/css/base.css

@@ -371,7 +371,7 @@ pre {
   color: #bfbfbf;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
-.topbar a:hover, .topbar ul .active a {
+.topbar h3 a:hover, .topbar .brand a:hover, .topbar ul .active > a {
   background-color: #333;
   background-color: rgba(255, 255, 255, 0.05);
   color: #ffffff;
@@ -380,7 +380,7 @@ pre {
 .topbar h3 {
   position: relative;
 }
-.topbar h3 a {
+.topbar h3 a, .topbar .brand {
   float: left;
   display: block;
   padding: 8px 20px 12px;
@@ -390,6 +390,14 @@ pre {
   font-weight: 200;
   line-height: 1;
 }
+.topbar p {
+  margin: 0;
+  line-height: 40px;
+}
+.topbar p a:hover {
+  background-color: transparent;
+  color: #ffffff;
+}
 .topbar form {
   float: left;
   margin: 5px 0 0 0;
@@ -399,6 +407,9 @@ pre {
   -moz-opacity: 1;
   opacity: 1;
 }
+.topbar form.pull-right {
+  float: right;
+}
 .topbar input {
   background-color: #444;
   background-color: rgba(255, 255, 255, 0.3);
@@ -407,7 +418,7 @@ pre {
   font-weight: 13px;
   line-height: 1;
   padding: 4px 9px;
-  color: #fff;
+  color: #ffffff;
   color: rgba(255, 255, 255, 0.75);
   border: 1px solid #111;
   -webkit-border-radius: 4px;
@@ -418,6 +429,8 @@ pre {
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
   -webkit-transition: none;
   -moz-transition: none;
+  -ms-transition: none;
+  -o-transition: none;
   transition: none;
 }
 .topbar input:-moz-placeholder {
@@ -429,13 +442,13 @@ pre {
 .topbar input:hover {
   background-color: #bfbfbf;
   background-color: rgba(255, 255, 255, 0.5);
-  color: #fff;
+  color: #ffffff;
 }
 .topbar input:focus, .topbar input.focused {
-  outline: none;
+  outline: 0;
-  background-color: #fff;
+  background-color: #ffffff;
   color: #404040;
-  text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #ffffff;
   border: 0;
   padding: 5px 10px;
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
@@ -477,10 +490,10 @@ pre {
   text-decoration: none;
 }
 .topbar div > ul a:hover, .nav a:hover {
-  color: #fff;
+  color: #ffffff;
   text-decoration: none;
 }
-.topbar div > ul .active a, .nav .active a {
+.topbar div > ul .active > a, .nav .active > a {
   background-color: #222;
   background-color: rgba(0, 0, 0, 0.5);
 }
@@ -494,6 +507,7 @@ pre {
 .topbar div > ul.secondary-nav .dropdown-menu,
 .nav.secondary-nav .dropdown-menu {
   right: 0;
+  border: 0;
 }
 .topbar div > ul a.menu:hover,
 .nav a.menu:hover,
@@ -520,7 +534,7 @@ pre {
 .nav .menu-dropdown .dropdown-toggle,
 .topbar div > ul .dropdown-menu .dropdown-toggle,
 .nav .dropdown-menu .dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
 }
 .topbar div > ul .menu-dropdown a.menu.open,
 .nav .menu-dropdown a.menu.open,
@@ -554,7 +568,13 @@ pre {
   background-image: -o-linear-gradient(top, #292929, #191919);
   background-image: linear-gradient(top, #292929, #191919);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
-  color: #fff;
+  color: #ffffff;
+}
+.topbar div > ul .menu-dropdown .active a,
+.nav .menu-dropdown .active a,
+.topbar div > ul .dropdown-menu .active a,
+.nav .dropdown-menu .active a {
+  color: #ffffff;
 }
 .topbar div > ul .menu-dropdown .divider,
 .nav .menu-dropdown .divider,
@@ -580,18 +600,19 @@ a.menu:after, .dropdown-toggle:after {
   margin-left: 4px;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid #fff;
+  border-top: 4px solid #ffffff;
   filter: alpha(opacity=50);
   -khtml-opacity: 0.5;
   -moz-opacity: 0.5;
   opacity: 0.5;
 }
 .menu-dropdown, .dropdown-menu {
-  background-color: #fff;
+  background-color: #ffffff;
   float: left;
   display: none;
   position: absolute;
   top: 40px;
+  z-index: 900;
   min-width: 160px;
   max-width: 220px;
   _width: 160px;
@@ -623,7 +644,7 @@ a.menu:after, .dropdown-toggle:after {
   margin: 5px 0;
   overflow: hidden;
   background-color: #eee;
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid #ffffff;
 }
 .topbar .dropdown-menu a, .dropdown-menu a {
   display: block;
@@ -632,7 +653,7 @@ a.menu:after, .dropdown-toggle:after {
   font-weight: normal;
   line-height: 18px;
   color: #808080;
-  text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #ffffff;
 }
 .topbar .dropdown-menu a:hover, .dropdown-menu a:hover {
   background-color: #dddddd;
@@ -655,7 +676,7 @@ a.menu:after, .dropdown-toggle:after {
 .dropdown.open .menu,
 .open .dropdown-toggle,
 .dropdown.open .dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background: #ccc;
   background: rgba(0, 0, 0, 0.3);
 }
@@ -677,6 +698,8 @@ a.menu:after, .dropdown-toggle:after {
 .pills:after {
   display: table;
   content: "";
+  zoom: 1;
+  *display: inline;
 }
 .tabs:after, .pills:after {
   clear: both;
@@ -688,6 +711,7 @@ a.menu:after, .dropdown-toggle:after {
   display: block;
 }
 .tabs {
+  float: left;
   width: 100%;
   border-bottom: 1px solid #ddd;
 }
@@ -696,24 +720,24 @@ a.menu:after, .dropdown-toggle:after {
   top: 1px;
 }
 .tabs > li > a {
-  margin-right: 2px;
   padding: 0 15px;
-  line-height: 35px;
+  margin-right: 2px;
+  line-height: 36px;
+  border: 1px solid transparent;
   -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
   border-radius: 4px 4px 0 0;
 }
 .tabs > li > a:hover {
-  background-color: #eee;
-  border-bottom: 1px solid #ddd;
   text-decoration: none;
+  background-color: #eee;
+  border-color: #eee #eee #ddd;
 }
 .tabs > li.active > a {
-  background-color: #fff;
-  padding: 0 14px;
-  border: 1px solid #ddd;
-  border-bottom: 0;
   color: #808080;
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
 }
 .tabs .menu-dropdown, .tabs .dropdown-menu {
   top: 35px;
@@ -727,32 +751,44 @@ a.menu:after, .dropdown-toggle:after {
   margin-top: 15px;
   margin-left: 5px;
 }
+.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
+  border-color: #999;
+}
 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
   border-top-color: #555;
 }
+.tab-content {
+  clear: both;
+}
 .pills a {
   margin: 5px 3px 5px 0;
   padding: 0 15px;
-  text-shadow: 0 1px 1px #fff;
+  text-shadow: 0 1px 1px #ffffff;
   line-height: 30px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
 }
 .pills a:hover {
-  background: #0050a3;
+  background: #00438a;
-  color: #fff;
+  color: #ffffff;
   text-decoration: none;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
 .pills .active a {
   background: #0069d6;
-  color: #fff;
+  color: #ffffff;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
+.tab-content > *, .pill-content > * {
+  display: none;
+}
+.tab-content > .active, .pill-content > .active {
+  display: block;
+}
+
 .hero-unit {
   background-color: #f5f5f5;
-  margin-top: 60px;
   margin-bottom: 30px;
   padding: 60px;
   -webkit-border-radius: 6px;
@@ -770,6 +806,21 @@ a.menu:after, .dropdown-toggle:after {
   font-weight: 200;
   line-height: 27px;
 }
+footer {
+  margin-top: 17px;
+  padding-top: 17px;
+  border-top: 1px solid #eee;
+}
+.page-header {
+  margin-bottom: 17px;
+  border-bottom: 1px solid #ddd;
+  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+.page-header h1 {
+  margin-bottom: 8px;
+}
 
 
 
@@ -3632,6 +3683,51 @@ form div.error input, form div.error textarea {
     width: 940px;
 }
 
+.container {
+  width: 940px;
+  margin-left: auto;
+  margin-right: auto;
+  zoom: 1;
+}
+.container:before, .container:after {
+  display: table;
+  content: "";
+  zoom: 1;
+  *display: inline;
+}
+.container:after {
+  clear: both;
+}
+.container-fluid {
+  position: relative;
+  padding-left: 20px;
+  padding-right: 20px;
+  zoom: 1;
+}
+.container-fluid:before, .container-fluid:after {
+  display: table;
+  content: "";
+  zoom: 1;
+  *display: inline;
+}
+.container-fluid:after {
+  clear: both;
+}
+.container-fluid > .sidebar {
+  float: left;
+  width: 220px;
+}
+.container-fluid > .content {
+  float: left;
+  min-width: 700px;
+  max-width: 1180px;
+  margin-left: 20px;
+}
+.hide {
+  display: none;
+}
+
+
 /* Top bar experimenting changes */
 #topbar_push {
     height:40px;

main/inc/lib/template.lib.php

@@ -13,6 +13,18 @@ class Template extends Smarty {
 	function __construct($title = '') {
 		$this->title = $title;
 				
+		/*
+		 * 
+		 * For smarty 3.1 use 
+		 * 
+		$this->setPluginsDir(INCLUDES.'smarty/plugins/');
+		$this->setCacheDir(CACHE_PATH);
+		$this->setCompileDir(CACHE_PATH);
+		$this->setTemplateDir(INCLUDES.'tpl/');
+		$this->setConfigDir(CACHE_PATH);
+		
+		*/
+		
 		$this->template_dir 	= api_get_path(SYS_CODE_PATH).'template/';	
 		$this->compile_dir  	= api_get_path(SYS_ARCHIVE_PATH); 	
 		//@todo check this config fir
@@ -40,6 +52,7 @@ class Template extends Smarty {
 
 		//$this->caching = Smarty::CACHING_LIFETIME_CURRENT;				
 		$this->assign('style', $this->style);	
+		//$this->testInstall();	
 	}
 	
 	/**	  

main/template/default/layout/header.tpl

@@ -3,13 +3,12 @@
 {if $_u.status == 1}
 	<div class="topbar">
 	    <div class="topbar-inner">
-	        <div class="container">
+	        <div class="container-fluid">
 		        <h3><a href="#">Chamilo</a></h3>
 		        <ul class="nav">
 		            <li class="active"><a href="#">Home</a></li>
 		            <li><a href="#">Profile</a></li>
 		            <li><a href="#">Messages</a></li>		            
-		            
 		            <li><a href="#">Administration</a></li>
 		            <li class="dropdown">
 		                <a class="dropdown-toggle" href="#">Dropdown</a>
@@ -28,12 +27,12 @@
 		                <li class="dropdown">
 		                <a class="dropdown-toggle" href="#"><img src="{$_u.avatar_small}"/>  {$_u.complete_name}</a>
 		                <ul class="dropdown-menu">
-		                    <li><a href="#">Secondary link</a></li>
+		                    <li><a href="#">Settings</a></li>
 		                    <li><a href="#">Help</a></li>
 		                    <li class="divider"></li>		                    
-		                    <li><a href="#">Logout</a></li>
 		                </ul>
 		            </li>
+		            <li><a href="#">Logout</a></li>
 		            </ul>
 			</div>
 		</div><!-- /topbar-inner -->