using classes for page level divs

git-svn-id: http://code.elgg.org/elgg/trunk@7529 36083f99-b078-4883-b0ff-0f9b5a30f544

9 files changed, 81 insertions, 33 deletions

diff --git a/views/default/css/screen.php b/views/default/css/screen.php
index 00d4d8f5d..61d7fe2de 100644
--- a/views/default/css/screen.php
+++ b/views/default/css/screen.php
@@ -240,7 +240,7 @@ h2 {
 /* ***************************************
 	PAGE LAYOUT - MAIN BLOCKS POSITIONING
 *************************************** */
-#elgg-page-topbar {
+.elgg-page-topbar {
 	background: #333333 url(<?php echo elgg_get_site_url(); ?>_graphics/toptoolbar_background.gif) repeat-x top left;
 	color: #eeeeee;
 	border-bottom: 1px solid #000000;
@@ -249,7 +249,7 @@ h2 {
 	height: 24px;
 	z-index: 9000;
 }
-#elgg-page-header {
+.elgg-page-header {
 	x-overflow: hidden;
 	position: relative;
 	background-color: #4690D6;
@@ -257,7 +257,7 @@ h2 {
 	background-repeat: repeat-x;
 	background-position: bottom left;
 }
-#elgg-page-footer {
+.elgg-page-footer {
 	position: relative;
 	z-index: 999;
 }
@@ -379,7 +379,7 @@ h2 {
 /* ***************************************
 	ELGG TOPBAR
 *************************************** */
-#elgg-page-topbar a {
+.elgg-page-topbar a {
 	margin-right:30px;
 	padding-top:2px;
 	display:inline;
@@ -387,54 +387,54 @@ h2 {
 	text-align: left;
 	color:#eeeeee;
 }
-#elgg-page-topbar a:hover {
+.elgg-page-topbar a:hover {
 	color:#71cbff;
 	text-decoration: none;
 }
-#elgg-page-topbar a img.user-mini-avatar {
+.elgg-page-topbar a img.user-mini-avatar {
 	border:1px solid #eeeeee;
 	margin:1px 0 0 10px;
 	display: block;
 }
-#elgg-page-topbar a img.site-logo {
+.elgg-page-topbar a img.site-logo {
 	display: block;
 	margin-left:5px;
 	margin-top: -1px;
 }
-#elgg-page-topbar .log-out {
+.elgg-page-topbar .log-out {
 	float:right;
 }
-#elgg-page-topbar .log-out a {
+.elgg-page-topbar .log-out a {
 	display: inline;
 	text-align: right;
 	margin-right:10px;
 	color:#999999;
 }
-#elgg-page-topbar .log-out a:hover {
+.elgg-page-topbar .log-out a:hover {
 	color:#71cbff;
 }
-#elgg-page-topbar a.myfriends {
+.elgg-page-topbar a.myfriends {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat left -297px;
 	margin-right:30px;
 	text-indent: -900em;
 	width:36px;
 }
-#elgg-page-topbar a.myfriends:hover {
+.elgg-page-topbar a.myfriends:hover {
 	background-position: left -337px;
 }
-#elgg-page-topbar a.settings {
+.elgg-page-topbar a.settings {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -41px;
 	padding-left:20px !important;
 	float:right;
 	margin-right:30px;
 }
-#elgg-page-topbar a.admin {
+.elgg-page-topbar a.admin {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -41px;
 	padding-left:20px !important;
 	float:right;
 	margin-right:30px;
 }
-#elgg-page-topbar a.help {
+.elgg-page-topbar a.help {
 	background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -133px;
 	padding-left:18px !important;
 	float:right;
@@ -445,12 +445,12 @@ h2 {
 /* ***************************************
 	HEADER CONTENTS
 *************************************** */
-#elgg-page-header-inner {
+.elgg-page-header-inner {
 	position: relative;
 	height: 90px;
 }
 
-#elgg-page-header h1 a span.network-title {
+.elgg-page-header h1 a span.network-title {
 	font-size: 2em;
 	line-height:1.4em;
 	color: white;
@@ -460,7 +460,7 @@ h2 {
 	text-decoration: none;
 	text-shadow:1px 2px 4px #333333;
 }
-#elgg-page-header #elgg-search input.search-input {
+.elgg-page-header #elgg-search input.search-input {
 	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
 	background-color:transparent;
@@ -475,19 +475,19 @@ h2 {
 	background-position: 2px -220px;
 	background-repeat: no-repeat;
 }
-#elgg-page-header #elgg-search input.search-input:focus {
+.elgg-page-header #elgg-search input.search-input:focus {
 	background-color:white;
 	color:#0054A7;
 	border:1px solid white;
 	background-position: 2px -257px;
 }
-#elgg-page-header #elgg-search input.search-input:active {
+.elgg-page-header #elgg-search input.search-input:active {
 	background-color:white;
 	color:#0054A7;
 	border:1px solid white;
 	background-position: 2px -257px;
 }
-#elgg-page-header #elgg-search input.search-submit-button {
+.elgg-page-header #elgg-search input.search-submit-button {
 	display:none;
 }
 
@@ -625,7 +625,7 @@ li.navigation-more ul li {
 	FOOTER CONTENTS
 *************************************** */
 
-#elgg-page-footer-inner {
+.elgg-page-footer-inner {
 	padding: 5px 0;
 	border-top:1px solid #DEDEDE;
 }
diff --git a/views/default/layouts/main_content.php b/views/default/layouts/main_content.php
index 7c42065b0..908197a39 100644
--- a/views/default/layouts/main_content.php
+++ b/views/default/layouts/main_content.php
@@ -47,7 +47,7 @@ $footer = elgg_view('content/footer', $params);
 $body = $nav . $header . $filter . $content . $footer;
 
 $params = array(
-	'content' => $body,
+	'body' => $body,
 	'sidebar' => $sidebar,
 );
-echo elgg_view_layout('one_column_with_sidebar', $params);
+echo elgg_view_layout('one_sidebar', $params);
diff --git a/views/default/layouts/one_sidebar.php b/views/default/layouts/one_sidebar.php
new file mode 100644
index 000000000..d0bb3879f
--- /dev/null
+++ b/views/default/layouts/one_sidebar.php
@@ -0,0 +1,31 @@
+<?php
+/**
+ * Elgg main column with one sidebar layout
+ *
+ * @package Elgg
+ * @subpackage Core
+ *
+ * @uses $vars['body']    Content HTML for the main column
+ * @uses $vars['sidebar'] Optional content that is displayed in the sidebar
+ */
+?>
+
+<div class="elgg-layout-sidebar elgg-center elgg-width-classic clearfix">
+	<div class="elgg-sidebar elgg-aside">
+		<?php
+			echo elgg_view('page_elements/sidebar', $vars);
+		?>
+	</div>
+
+	<div class="elgg-main elgg-body">
+		<?php
+			// @todo deprecated so remove in Elgg 2.0
+			if (isset($vars['area1'])) {
+				echo $vars['area1'];
+			}
+			if (isset($vars['body'])) {
+				echo $vars['body'];
+			}
+		?>
+	</div>
+</div>
diff --git a/views/default/page_elements/body.php b/views/default/page_elements/body.php
new file mode 100644
index 000000000..6f7691693
--- /dev/null
+++ b/views/default/page_elements/body.php
@@ -0,0 +1,14 @@
+<?php
+/**
+ * Elgg page body wrapper
+ *
+ * @uses $vars['body'] The HTML of the page body
+ */
+
+$body = elgg_get_array_value('body', $vars, '');
+
+echo <<<HTML
+<div class="elgg-page-body">
+	$body
+</div>
+HTML;
diff --git a/views/default/page_elements/content.php b/views/default/page_elements/content.php
index 14292ce59..f82720c2f 100644
--- a/views/default/page_elements/content.php
+++ b/views/default/page_elements/content.php
@@ -1,13 +1,14 @@
 <?php
 /**
  * Elgg content wrapper
- * This file holds the main content
+ *
+ * @uses $vars['body'] The main content HTML
  */
 
 $body = elgg_get_array_value('body', $vars, '');
 
 echo <<<HTML
-<div id="elgg-page-body">
+<div class="elgg-page-body">
 	$body
 </div>
 HTML;
diff --git a/views/default/page_elements/footer.php b/views/default/page_elements/footer.php
index 42cb6a2fc..6c9cdc55e 100644
--- a/views/default/page_elements/footer.php
+++ b/views/default/page_elements/footer.php
@@ -9,8 +9,8 @@
  */
 
 ?>
-<div id="elgg-page-footer">
-	<div id="elgg-page-footer-inner" class="elgg-center elgg-width-classic clearfix">
+<div class="elgg-page-footer">
+	<div class="elgg-page-footer-inner elgg-center elgg-width-classic clearfix">
 		<?php echo elgg_view('footer/links'); ?>
 		<a href="http://www.elgg.org" class="right">
 			<img src="<?php echo elgg_get_site_url(); ?>_graphics/powered_by_elgg_badge_drk_bckgnd.gif" alt="Powered by Elgg" />
diff --git a/views/default/page_elements/header.php b/views/default/page_elements/header.php
index 476919591..df23fcbff 100644
--- a/views/default/page_elements/header.php
+++ b/views/default/page_elements/header.php
@@ -5,8 +5,8 @@
  **/
 
 ?>
-<div id="elgg-page-header">
-	<div id="elgg-page-header-inner" class="elgg-center elgg-width-classic">
+<div class="elgg-page-header">
+	<div class="elgg-page-header-inner elgg-center elgg-width-classic">
 		<?php
 			// link back to main site.
 			echo elgg_view('page_elements/header_logo', $vars);
diff --git a/views/default/page_elements/topbar.php b/views/default/page_elements/topbar.php
index 0f7b8f467..83ffdf54b 100644
--- a/views/default/page_elements/topbar.php
+++ b/views/default/page_elements/topbar.php
@@ -6,8 +6,8 @@
 
 $user = get_loggedin_user();
 if (($user instanceof ElggUser) && ($user->guid > 0)) {
-	echo '<div id="elgg-page-topbar">';
-	echo '<div id="elgg-page-topbar-inner">';
+	echo '<div class="elgg-page-topbar">';
+	echo '<div class="elgg-page-topbar-inner">';
 	
 	// Elgg logo
 	echo '<a href="http://www.elgg.org">';
diff --git a/views/default/page_shells/default.php b/views/default/page_shells/default.php
index 0de41bff1..3c643933a 100644
--- a/views/default/page_shells/default.php
+++ b/views/default/page_shells/default.php
@@ -26,10 +26,12 @@ if (empty($vars['title'])) {
 
 echo elgg_view('page_elements/html_begin', $vars);
 
+echo '<div class="elgg-page">';
 echo elgg_view('messages/list', array('object' => $vars['sysmessages']));
 echo elgg_view('page_elements/topbar', $vars);
 echo elgg_view('page_elements/header', $vars);
-echo elgg_view('page_elements/content', $vars);
+echo elgg_view('page_elements/body', $vars);
 echo elgg_view('page_elements/footer', $vars);
+echo '</div>';
 
 echo elgg_view('page_elements/html_end', $vars);