Refs #2903 moving theme preview into developers plugin - navigation and titles are broken

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

8 files changed, 650 insertions, 0 deletions

diff --git a/mod/developers/views/default/theme_preview/forms.php b/mod/developers/views/default/theme_preview/forms.php
new file mode 100644
index 000000000..90cc5dcc8
--- /dev/null
+++ b/mod/developers/views/default/theme_preview/forms.php
@@ -0,0 +1,209 @@
+<?php
+/**
+ * Form CSS
+ */
+
+$url = current_page_url();
+
+?>
+<div class="elgg-page mal">
+	<h1 class="mbs">
+		<a href="index.php">Index</a> > <a href="<?php echo $url; ?>"><?php echo $title; ?></a>
+	</h1>
+	<div class="mbl">
+		<a href="nav.php">< previous</a>&nbsp;&nbsp;<a href="objects.php">next ></a>
+	</div>
+	<h2>Form</h2>
+	<form action="#">
+		<fieldset>
+			<legend>Form legend</legend>
+			<p>
+				<label for="f1">Text input:</label>
+				<?php echo elgg_view('input/text', array(
+						'internalname' => 'f1',
+						'internalid' => 'f1',
+						'value' => 'input text',
+						));
+				?>
+			</p>
+			<p>
+				<label for="f2">Password input:</label>
+				<?php echo elgg_view('input/password', array(
+						'internalname' => 'f2',
+						'internalid' => 'f2',
+						'value' => 'password',
+						));
+				?>
+			</p>
+			<p>
+				<label for="f3">Radio input:</label><br />
+				<?php echo elgg_view('input/radio', array(
+						'internalname' => 'f3',
+						'internalid' => 'f3',
+						'options' => array(1, 2),
+						));
+				?>
+			</p>
+			<p>
+				<label for="f4">Checkboxes input:</label><br />
+				<?php echo elgg_view('input/checkboxes', array(
+						'internalname' => 'f4',
+						'internalid' => 'f4',
+						'options' => array(1, 2),
+						));
+				?>
+			</p>
+			<p>
+				<label for="f5">Dropdown input:</label><br />
+				<?php echo elgg_view('input/dropdown', array(
+						'internalname' => 'f5',
+						'internalid' => 'f5',
+						'options' => array('option 1', 'option 2'),
+						));
+				?>
+			</p>
+			<p>
+				<label for="f6">Access input:</label>
+				<?php echo elgg_view('input/access', array(
+						'internalname' => 'f6',
+						'internalid' => 'f6',
+						'value' => ACCESS_PUBLIC,
+						));
+				?>
+			</p>
+			<p>
+				<label for="f7">File input:</label>
+				<?php echo elgg_view('input/file', array(
+						'internalname' => 'f7',
+						'internalid' => 'f7',
+						));
+				?>
+			</p>
+			<p>
+				<label for="f8">URL input:</label>
+				<?php echo elgg_view('input/url', array(
+						'internalname' => 'f8',
+						'internalid' => 'f8',
+						'value' => 'http://elgg.org/',
+						));
+				?>
+			</p>
+			<p>
+				<label for="f9">Tags input:</label>
+				<?php echo elgg_view('input/tags', array(
+						'internalname' => 'f9',
+						'internalid' => 'f9',
+						'value' => 'one, two, three',
+						));
+				?>
+			</p>
+			<p>
+				<label for="f10">Email input:</label>
+				<?php echo elgg_view('input/email', array(
+						'internalname' => 'f10',
+						'internalid' => 'f10',
+						'value' => 'noone@elgg.org',
+						));
+				?>
+			</p>
+			<p>
+				<label for="f11">Autocomplete input:</label>
+				<?php echo elgg_view('input/autocomplete', array(
+						'internalname' => 'f11',
+						'internalid' => 'f11',
+						'match_on' => 'users',
+						));
+				?>
+			</p>
+			<p>
+				<label for="f12">Date picker input:</label>
+				<?php echo elgg_view('input/datepicker', array(
+						'internalname' => 'f12',
+						'internalid' => 'f12',
+						));
+				?>
+			</p>
+			<p>
+				<label for="f13">User picker input:</label>
+				<?php echo elgg_view('input/userpicker', array(
+						'internalname' => 'f13',
+						'internalid' => 'f13',
+						));
+				?>
+			</p>
+			<p>
+				<label for="f14">Long text input:</label>
+				<?php echo elgg_view('input/longtext', array(
+						'internalname' => 'f14',
+						'internalid' => 'f14',
+						'value' => $ipsum,
+						));
+				?>
+			</p>
+			<p>
+				<label for="f15">Plain text input:</label>
+				<?php echo elgg_view('input/plaintext', array(
+						'internalname' => 'f15',
+						'internalid' => 'f15',
+						'value' => $ipsum,
+						));
+				?>
+			</p>
+		</fieldset>
+	</form>
+
+	<div class="mtl">
+		<h2>Buttons</h2>
+		<table>
+			<thead>
+				<tr>
+					<th>Anchors</th>
+					<th>Default</th>
+					<th>Hover</th>
+					<th>Focus</th>
+					<th>Active</th>
+					<th>Disabled</th>
+					<th>Selected</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<th>Default</th>
+					<td><a href="#" class="elgg-button">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-state-hover">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-state-focus">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-state-active">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-state-disabled">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-state-selected">anchor</a></td>
+				</tr>
+				<tr>
+					<th>Action</th>
+					<td><a href="#" class="elgg-button elgg-button-action">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-action elgg-state-hover">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-action elgg-state-focus">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-action elgg-state-active">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-action elgg-state-disabled">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-action elgg-state-selected">anchor</a></td>
+				</tr>
+				<tr>
+					<th>Default</th>
+					<td><a href="#" class="elgg-button elgg-button-submit">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-submit elgg-state-hover">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-submit elgg-state-focus">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-submit elgg-state-active">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-submit elgg-state-disabled">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-submit elgg-state-selected">anchor</a></td>
+				</tr>
+				<tr>
+					<th>Default</th>
+					<td><a href="#" class="elgg-button elgg-button-cancel">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-cancel elgg-state-hover">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-cancel elgg-state-focus">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-cancel elgg-state-active">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-cancel elgg-state-disabled">anchor</a></td>
+					<td><a href="#" class="elgg-button elgg-button-cancel elgg-state-selected">anchor</a></td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
diff --git a/mod/developers/views/default/theme_preview/general.php b/mod/developers/views/default/theme_preview/general.php
new file mode 100644
index 000000000..e64a60748
--- /dev/null
+++ b/mod/developers/views/default/theme_preview/general.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * General CSS
+ */
+
+?>
+
+<div class="elgg-page mal">
+	<h1 class="mbs">
+		<a href="index.php">Index</a> > <a href="<?php echo $url; ?>"><?php echo $title; ?></a>
+	</h1>
+	<div class="mbl">
+		< previous&nbsp;&nbsp;<a href="nav.php">next ></a>
+	</div>
+	<h2>Headings</h2>
+	<div class="mbl">
+		<h1>Level 1 heading</h1>
+		<h2>Level 2 heading</h2>
+		<h3>Level 3 heading</h3>
+		<h4>Level 4 heading</h4>
+		<h5>Level 5 heading</h5>
+		<h6>Level 6 heading</h6>
+	</div>
+	<h2>Paragraph</h2>
+	<div class="mbl">
+	<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a>
+  adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec
+  faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero
+  nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent
+  mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu
+  volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus
+  eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem,
+  consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue
+  quis tellus.</p>
+
+  <p>Lorem ipsum dolor sit amet, <em>emphasis</em>
+  consectetuer
+  adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec
+  faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero
+  nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent
+  mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu
+  volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus
+  eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem,
+  consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue
+  quis tellus.</p>
+	</div>
+	<h2>Misc</h2>
+			<p>
+				I am <a href="?abc123">the a tag</a> example<br />
+				I am <abbr title="test">the abbr tag</abbr> example<br />
+				I am <acronym>the acronym tag</acronym> example<br />
+				I am <b>the b tag</b> example<br />
+				I am <code>the code tag</code> example<br />
+				I am <del>the del tag</del> example<br />
+				I am <em>the em tag</em> example<br />
+				I am <i>the i tag</i> example<br />
+				I am <strong>the strong tag</strong> example<br />
+			</p>
+			<blockquote><p>Paragraph inside Blockquote: <?php echo $ipsum; ?></p></blockquote>
+			<pre><strong>Preformated:</strong>Testing one row
+			 and another</pre>
+</div>
diff --git a/mod/developers/views/default/theme_preview/grid.php b/mod/developers/views/default/theme_preview/grid.php
new file mode 100644
index 000000000..8e85d5c72
--- /dev/null
+++ b/mod/developers/views/default/theme_preview/grid.php
@@ -0,0 +1,84 @@
+<?php
+/**
+ * Grid CSS
+ */
+
+?>
+<div class="elgg-page mal">
+	<h1 class="mbs">
+		<a href="index.php">Index</a> > <a href="<?php echo $url; ?>"><?php echo $title; ?></a>
+	</h1>
+	<div class="mbl">
+		<a href="objects.php">< previous</a>&nbsp;&nbsp;<a href="widgets.php">next ></a>
+	</div>
+
+<style>
+h3 {text-align: center;}
+.preview-outline {border: 1px solid #cccccc; padding: 5px;}
+</style>
+
+<div class="elgg-col elgg-col-1of5">
+	<div class="preview-outline">
+		<h3>1/5</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	</div>
+</div>
+<div class="elgg-col elgg-col-3of5">
+	<div class="preview-outline clearfix">
+		<h3>3/5</h3>
+		<div class="elgg-col elgg-col-1of2">
+			<div class="preview-outline">
+				<h3>1/2</h3>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			</div>
+		</div>
+		<div class="elgg-col elgg-col-1of2">
+			<div class="preview-outline">
+				<h3>1/2</h3>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			</div>
+		</div>
+		<div class="elgg-col elgg-col-1of3">
+			<div class="preview-outline">
+				<h3>1/3</h3>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			</div>
+		</div>
+		<div class="elgg-col elgg-col-2of3">
+			<div class="preview-outline">
+				<h3>2/3</h3>
+				<div class="elgg-col elgg-col-1of2">
+					<div class="preview-outline">
+						<h3>1/2</h3>
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					</div>
+				</div>
+				<div class="elgg-col elgg-col-1of2">
+					<div class="preview-outline">
+						<h3>1/2</h3>
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					</div>
+				</div>
+				<div class="elgg-col elgg-col-1of1">
+					<div class="preview-outline">
+						<h3>1</h3>
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="elgg-col elgg-col-1of5 elgg-col-last">
+	<div class="preview-outline">
+		<h3>1/5</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	</div>
+</div>
+
+</div>
diff --git a/mod/developers/views/default/theme_preview/icons.php b/mod/developers/views/default/theme_preview/icons.php
new file mode 100644
index 000000000..792818e31
--- /dev/null
+++ b/mod/developers/views/default/theme_preview/icons.php
@@ -0,0 +1,54 @@
+<?php
+/**
+ * Icons CSS
+ */
+
+?>
+<style>li {margin: 10px; float: left;} ul {background-color: #e0e0e0;}</style>
+<div class="elgg-page mal">
+	<h1 class="mbs">
+		<a href="index.php">Index</a> > <a href="<?php echo $url; ?>"><?php echo $title; ?></a>
+	</h1>
+	<div class="mbl">
+		<a href="widgets.php">< previous</a>&nbsp;&nbsp;next >
+	</div>
+	<h2>Icon Sprites</h2>
+	<ul class="mbl clearfix">
+		<li><span class="elgg-icon elgg-icon-settings"></span>Settings</li>
+		<li><span class="elgg-icon elgg-icon-friends"></span>Friends</li>
+		<li><span class="elgg-icon elgg-icon-help"></span>Help</li>
+		<li><span class="elgg-icon elgg-icon-delete"></span>Delete</li>
+		<li><span class="elgg-icon elgg-icon-likes"></span>Likes</li>
+		<li><span class="elgg-icon elgg-icon-liked"></span>Liked</li>
+		<li><span class="elgg-icon elgg-icon-following"></span>Following</li>
+		<li><span class="elgg-icon elgg-icon-dragger"></span>Dragger</li>
+		<li><span class="elgg-icon elgg-icon-rss"></span>RSS</li>
+		<li><span class="elgg-icon elgg-icon-arrow-s"></span>Arrow S</li>
+		<li><span class="elgg-icon elgg-icon-hover-menu"></span>Hover Menu</li>
+	</ul>
+	<h2>Ajax loader</h2>
+	<div class="mbl">
+		<?php echo elgg_view('graphics/ajax_loader', array('hidden' => false)); ?>
+	</div>
+	<h2>Avatars</h2>
+	<div class="mbl">
+		<?php
+			$user = new ElggUser();
+			$sizes = array('large', 'medium', 'small', 'tiny');
+			echo '<table>';
+			echo '<tr>';
+			foreach ($sizes as $size) {
+				echo "<td class=\"center\"><h4>$size</h4></td>";
+			}
+			echo '</tr>';
+			echo '<tr>';
+			foreach ($sizes as $size) {
+				echo '<td class="phs">';
+				echo elgg_view_entity_icon($user, $size, array('hover' => false));
+				echo '</td>';
+			}
+			echo '</tr>';
+			echo '</table>';
+		?>
+	</div>
+</div>
diff --git a/mod/developers/views/default/theme_preview/index.php b/mod/developers/views/default/theme_preview/index.php
new file mode 100644
index 000000000..5bb554d06
--- /dev/null
+++ b/mod/developers/views/default/theme_preview/index.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Main index for theme preview
+ */
+
+$url = "pg/theme_preview";
+$url = elgg_normalize_url($url);
+
+echo <<<HTML
+<div class="elgg-page mal">
+	<h1 class="mbl"><a href="$url/index">Index</a></h1>
+	<ul class="mtl">
+		<li><a href="$url/general">General CSS</a></li>
+		<li><a href="$url/nav">Navigation CSS</a></li>
+		<li><a href="$url/forms">Form CSS</a></li>
+		<li><a href="$url/objects">Lists, modules, image blocks CSS</a></li>
+		<li><a href="$url/grid">Grid CSS</a></li>
+		<li><a href="$url/widgets">Widgets CSS</a></li>
+		<li><a href="$url/icons">Icons CSS</a></li>
+	</ul>
+</div>
+HTML;
diff --git a/mod/developers/views/default/theme_preview/nav.php b/mod/developers/views/default/theme_preview/nav.php
new file mode 100644
index 000000000..7fdf49a8e
--- /dev/null
+++ b/mod/developers/views/default/theme_preview/nav.php
@@ -0,0 +1,70 @@
+<?php
+/**
+ * Navigation CSS
+ */
+
+$url = current_page_url();
+
+elgg_push_breadcrumb('First', "$url#");
+elgg_push_breadcrumb('Second', "$url#");
+elgg_push_breadcrumb('Third');
+
+?>
+<div class="elgg-page mal">
+	<h1 class="mbs">
+		<a href="index.php">Index</a> > <a href="<?php echo $url; ?>"><?php echo $title; ?></a>
+	</h1>
+	<div class="mbl">
+		<a href="general.php">< previous</a>&nbsp;&nbsp;<a href="forms.php">next ></a>
+	</div>
+	<h2>Breadcrumbs</h2>
+	<div class="mbl">
+		<?php echo elgg_view('navigation/breadcrumbs'); ?>
+	</div>
+	<h2>Tabs</h2>
+	<div class="mbl">
+		<?php
+		$tabs = array(
+			array('title' => 'First', 'url' => "$url#"),
+			array('title' => 'Second', 'url' => "$url#", 'selected' => true),
+			array('title' => 'Third', 'url' => "$url#"),
+		);
+		echo elgg_view('navigation/tabs', array('tabs' => $tabs));
+		?>
+	</div>
+	<h2>Pagination</h2>
+	<div class="mbl">
+		<?php
+		$params = array(
+			'count' => 1000,
+			'limit' => 10,
+			'offset' => 230,
+		);
+		echo elgg_view('navigation/pagination', $params);
+		?>
+	</div>
+	<h2>Site Menu</h2>
+	<div class="mbl">
+		<div class="elgg-page-header" style="height: 40px;">
+	<?php
+		$params = array();
+		$params['menu'] = array();
+		$params['menu']['default'] = array();
+		for ($i=1; $i<=5; $i++) {
+			$params['menu']['default'][] = new ElggMenuItem($i, "Page $i", "$url#");
+		}
+		$params['menu']['default'][2]->setSelected(true);
+		echo elgg_view('navigation/menu/site', $params);
+	?>
+		</div>
+	</div>
+	<h2>Page Menu</h2>
+	<div class="mbl pam" style="width: 200px; background-color: #cccccc;">
+	<?php
+		$m = new ElggMenuItem(10, "Child", "$url#");
+		$m->setParent($params['menu']['default'][1]);
+		$params['menu']['default'][1]->addChild($m);
+		echo elgg_view('navigation/menu/page', $params);
+	?>
+	</div>
+</div>
diff --git a/mod/developers/views/default/theme_preview/objects.php b/mod/developers/views/default/theme_preview/objects.php
new file mode 100644
index 000000000..fc773afb9
--- /dev/null
+++ b/mod/developers/views/default/theme_preview/objects.php
@@ -0,0 +1,79 @@
+<?php
+/**
+ * CSS Objects: list, module, image_block
+ */
+
+$url = current_page_url();
+
+?>
+
+<div class="elgg-page mal">
+	<h1 class="mbs">
+		<a href="index.php">Index</a> > <a href="<?php echo $url; ?>"><?php echo $title; ?></a>
+	</h1>
+	<div class="mbl">
+		<a href="forms.php">< previous</a>&nbsp;&nbsp;<a href="grid.php">next ></a>
+	</div>
+	<h2>Modules</h2>
+	<div class="mbl clearfix">
+		<div class="elgg-col elgg-col-1of2">
+			<div class="pam">
+			<?php
+				echo elgg_view_module('aside', 'elgg-module-aside', $ipsum);
+				echo elgg_view_module('popup', 'elgg-module-popup', $ipsum);
+			?>
+			</div>
+		</div>
+		<div class="elgg-col elgg-col-1of2">
+			<div class="pam">
+			<?php
+				echo elgg_view_module('info', 'elgg-module-info', $ipsum);
+				echo elgg_view_module('featured', 'elgg-module-featured', $ipsum);
+			?>
+			</div>
+		</div>
+	</div>
+	<h2>Image Block</h2>
+	<div class="mbl clearfix">
+	<?php
+		$user = new ElggUser();
+		$image = elgg_view_entity_icon($user, 'small');
+		echo elgg_view_image_block($image, $ipsum);
+	?>
+	</div>
+	<h2>List</h2>
+	<div class="mbl clearfix">
+	<?php
+		$obj1 = new ElggObject();
+		$obj1->title = "Object 1";
+		$obj1->description = $ipsum;
+		$obj2 = new ElggObject();
+		$obj2->title = "Object 2";
+		$obj2->description = $ipsum;
+		echo elgg_view('layout/objects/list', array('items' => array($obj1, $obj2)));
+	?>
+	</div>
+	<h2>Table</h2>
+	<div class="mbl clearfix">
+		<table class="elgg-table">
+		<?php
+			echo "<thead><tr><th>column 1</th><th>column 2</th></tr></thead>";
+			for ($i = 1; $i < 5; $i++) {
+				echo '<tr>';
+				for ($j = 1; $j < 3; $j++) {
+					echo "<td>value $j</td>";
+				}
+				echo '</tr>';
+			}
+		?>
+		</table>
+	</div>
+	<h2>Messages</h2>
+	<div class="mbl clearfix">
+		<ul>
+			<li class="elgg-message elgg-state-success mas">Success message</li>
+			<li class="elgg-message elgg-state-error mas">Error message</li>
+			<li class="elgg-message elgg-state-notice mas">Notice message</li>
+		</ul>
+	</div>
+</div>
diff --git a/mod/developers/views/default/theme_preview/widgets.php b/mod/developers/views/default/theme_preview/widgets.php
new file mode 100644
index 000000000..7f3fc938c
--- /dev/null
+++ b/mod/developers/views/default/theme_preview/widgets.php
@@ -0,0 +1,70 @@
+<?php
+/**
+ * Widgets CSS
+ */
+
+$url = current_page_url();
+
+elgg_register_plugin_hook_handler('view', 'widgets/friends/content', 'css_widget_content');
+elgg_register_plugin_hook_handler('view', 'widgets/friends/edit', 'css_widget_content');
+elgg_register_plugin_hook_handler('permissions_check', 'all', 'css_permissions_override');
+
+function css_widget_content() {
+	global $ipsum;
+	return $ipsum;
+}
+
+function css_permissions_override() {
+	return true;
+}
+
+
+?>
+<div class="elgg-page mal">
+	<h1 class="mbs">
+		<a href="index.php">Index</a> > <a href="<?php echo $url; ?>"><?php echo $title; ?></a>
+	</h1>
+	<div class="mbl">
+		<a href="grid.php">< previous</a>&nbsp;&nbsp;<a href="icons.php">next ></a>
+	</div>
+<?php
+$w = array();
+for ($i=1; $i<=6; $i++) {
+	$obj = new ElggWidget();
+	$obj->handler = 'friends';
+	$obj->title = "Widget $i";
+	$w[] = $obj;
+}
+$column1 = array($w[0], $w[1]);
+$column2 = array($w[2], $w[3]);
+$column3 = array($w[4], $w[5]);
+$widgets = array(1 => $column1, 2 => $column2, 3 => $column3);
+$num_columns = 3;
+$widget_class = "elgg-col-1of{$num_columns}";
+for ($column_index = 1; $column_index <= $num_columns; $column_index++) {
+	$column_widgets = $widgets[$column_index];
+
+	echo "<div class=\"$widget_class elgg-widgets\" id=\"elgg-widget-col-$column_index\">";
+	if (is_array($column_widgets) && sizeof($column_widgets) > 0) {
+		foreach ($column_widgets as $widget) {
+			echo elgg_view_entity($widget);
+		}
+	}
+	echo '</div>';
+}
+?>
+</div>
+<script type="text/javascript">
+	// widgets do not have guids so we override the edit toggle and delete button
+	$(document).ready(function() {
+		$('.elgg-widget-edit-button').unbind('click');
+		$('.elgg-widget-edit-button').click(function() {
+			$(this).closest('.elgg-module-widget').find('.elgg-widget-edit').slideToggle('medium');
+			return false;
+		});
+		$('.elgg-widget-delete-button').click(function() {
+			$(this).closest('.elgg-module-widget').remove();
+			return false;
+		});
+	});
+</script>