From 09ee2b5eef75a9bba17973a9d76bfd7249fb6283 Mon Sep 17 00:00:00 2001
From: Byron Lutz <byronlutz@gmail.com>
Date: Wed, 2 Jan 2013 08:41:12 -0800
Subject: [PATCH] Improved 404 page styling

---
 404.php        | 53 ++++++++++----------------------------------------
 css/app.css    | 34 ++++++++++++++++++++++++++++++++
 searchform.php |  6 ++++--
 3 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/404.php b/404.php
index aea6be58..25a145d5 100755
--- a/404.php
+++ b/404.php
@@ -2,52 +2,19 @@
 
 <div class="row">
 	<div class="span8">
-        <div class="page-header">
-          <h1><?php _e('File Not Found', 'roots'); ?></h1>
-        </div><!-- end div.page-header -->
-        <div class="alert alert-block fade in">
-          <a class="close" data-dismiss="alert">&times;</a>
-          <p><?php _e('The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.', 'roots'); ?></p>
-        </div><!-- end div.alert -->
-        <p><?php _e('Please try the following:', 'roots'); ?></p>
-        <ul>
-          <li><?php _e('Check your spelling', 'roots'); ?></li>
-          <li><?php printf(__('Return to the <a href="%s">home page</a>', 'roots'), home_url()); ?></li>
-          <li><?php _e('Click the <a href="javascript:history.back()">Back</a> button', 'roots'); ?></li>
-        </ul>
-        <?php get_search_form(); ?>
+		<div class="fourohfour">
+			<span class="f-title">Oops...</span>
+			<span class="f-desc">Looks like we couldn't find the page you were looking for.</span>
+			<span class="f-verbose">404 Error</span>
+			<p>An administrator has been notified. If you keep getting this error email us at <a href="mailto:online@media.ucla.edu">online@media.ucla.edu</a> and we'll do our best to get it fixed.</p>
+			<div class="f-search">
+				<?php get_search_form(); ?>
+			</div><!-- end div.f-search -->
+		</div><!-- end div.fourohfour -->
 	</div><!-- end div.span8 -->
-      
-      	<aside class="span4" id="sidebar" role="complementary">
-		<div id="sidebar-inside">
-		<?php get_template_part('ad','side'); ?>
-			
-			
-			<div id="sidebar-popular">
-				<div class="side-head">
-					<h2><a href="#" id="popular-select" class="activetab" data-target="side-info-popular"><i class="ticon-eye"></i>Popular</a> <a href="#" id="commented-select" data-target="side-info-commented"><i class="ticon-personchat"></i>Most commented</a><br style="display:block;float:left;clear:both" /></h2>
-				</div><!-- end div.side-head -->
-				<div class="side-info" id="side-info-popular">
-					<?php wpp_get_mostpopular('limit=5&range="weekly"&pages=0&wpp_start="<ul class=\'side-popularlist\' id=\'side-popularlist-popular\'>"&wpp_end="</ul>"&order_by="views"&do_pattern=1&pattern_form="{image} {title} {stats} Comment(s)"&thumbnail_selection="usergenerated"'); ?>
-				</div>
-				<div class="side-info" id="side-info-commented">
-					<ul id="side-commented">
-						<?php
-							// From http://stackoverflow.com/questions/3328560/how-to-sort-posts-by-views-comments-rating-etc-wordpress
-						    global $wpdb;
-							$most_commented = $wpdb->get_results("SELECT comment_count, ID, post_title FROM $wpdb->posts WHERE post_type='post' AND post_status = 'publish' ORDER BY comment_count DESC LIMIT 0 , 5");
-							foreach ($most_commented as $post) : setup_postdata($post); ?>
-						<li><a href="<?php echo  get_permalink($post->ID); ?>"><?php the_title(); ?></a> <?php comments_number('0 Comments','1 Comment','% Comments'); ?></li>
-							<?php endforeach; ?>
-					</ul>
-				</div><!-- end div#side-info-commented -->
-
-			</div><!-- end div#sidebar-popular -->
 
-		</div><!-- end div#sidebar-inside -->
-	</aside><!-- end aside#sidebar -->
 
-      
+	<?php get_sidebar(); ?>
       
       
 </div><!-- end div.row -->
diff --git a/css/app.css b/css/app.css
index 2dc849bc..bd5949ac 100755
--- a/css/app.css
+++ b/css/app.css
@@ -1897,6 +1897,40 @@ a.page-numbers:hover {
 	height: 383px !important;
 }
 
+/* ====== 404 ===== */
+.f-title {
+	display: block;
+	font-weight: bold;
+	font-size: 8em;
+	text-align: center;
+	line-height: 1.4em;
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+}
+.f-desc {
+    display: block;
+    text-align: center;
+    font-family: Georgia,serif;
+    font-size: 1.5em;
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
+}
+.f-verbose {
+	font-family: Georgia,serif;
+	display: block;
+	text-align: center;
+	font-size: 0.9em;
+	opacity: 0.6;
+}
+.fourohfour > p {
+	width: 90%;
+	margin-top: 31px;
+	margin-bottom: 20px;
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+}
+.f-search {
+	text-align: center;
+}
 
 
 /* =============================================================================
diff --git a/searchform.php b/searchform.php
index 483b84f3..eb5b8498 100755
--- a/searchform.php
+++ b/searchform.php
@@ -1,5 +1,7 @@
 <form role="search" method="get" id="searchform" class="form-search" action="<?php echo home_url('/'); ?>">
   <label class="hide-text" for="s"><?php _e('Search for:', 'roots'); ?></label>
-  <input type="text" value="" name="s" id="s" class="search-query" placeholder="<?php _e('Search', 'roots'); ?> <?php bloginfo('name'); ?>">
-  <input type="submit" id="searchsubmit" value="<?php _e('Search', 'roots'); ?>" class="btn">
+  <div class="input-append">
+		<input type="text" value="" name="s" id="s" class="search-query" placeholder="<?php _e('Search...', 'roots'); ?>">
+		<input type="submit" id="searchsubmit" value="<?php _e('Search', 'roots'); ?>" class="btn">
+  </div>
 </form>
\ No newline at end of file