Created layout 7

The following changes were also made in this revision:

* All HTML was changed to XHTML and a !DOCTYPE was included to reflect this
* Rewrote quotes tracking system to be much less complicated and actually working
* Changed quotes rendering to look more like Chirpy than Rash
* Fixed comment textarea bug
* Rewrote a ton of CSS so it's not as bloated
* Added a JavaScript confirmation when deleting a comment
* AJAXified voting on the POTW
* AJAXified voting and flagging quotes
* AJAXified commenting
* AJAXified voting on posts
* Added DateFinder back after it was accidentally deleted in Layout 4.5

The following database changes must be performed as soon as possible:

* Fix title of NO <!DOCTYPE> post (the &lt; is missing the semicolon)
* Restore post Frasty Tha Snaman from a backup
* Reset "flag" field of all rows in "rash_quotes" to 0
* Remove the "vote" and "flag" columns of "rash_tracking"
* Rename the "quote_id" column of "rash_tracking" to "vote"

The following external code changes must also be performed as soon as possible:

* Add the following line to the end of the // Four Island block in The Fourm's functions.php:
  require('/svr/www/hatkirby/fourisland/main/includes/specialdates.php');

9 files changed, 386 insertions, 396 deletions

@@ -21,6 +21,8 @@
 if (!defined('S_INCLUDE_FILE')) {define('S_INCLUDE_FILE',1);}
 
 require('headerproc.php');
+include_once('../../security/config.php');
+include_once('../includes/db.php');
 
 ?>
 
@@ -82,13 +84,14 @@ span.post-day {
 div.post-title {
  float: left;
  margin-left: 10px;
- width: 500px; /* 430px */
+ width: 90%; /* 500px */
 }
 
 div.entry {
  clear: both;
  padding-top: 10px;
- font: 75%/150% Arial, "Trebuchet MS", Tahoma;
+ /*font-size: 75%;
+ line-height: 150%;*/
 }
 
 div.entry ol,
@@ -218,5 +221,14 @@ div.post-date-4 {
 span.post-vote {
  float: right;
  position: relative;
- top: -10px;
+ top: -2em;
+ right: 1em;
+}
+
+span.post-rating {
+ font-size: big;
+}
+
+span.post-action-done {
+        opacity: 0.2;
 }
@@ -1,27 +1,14 @@
-/* Normal Bubble */
-
-div.bubble {
-        width: auto;
-        font-size: 0.75em;
-        margin-bottom: 14px;
-        font: 1em "Lucida Grande", Lucida, Verdana, sans-serif;
-}
-
-div.bubble blockquote {
-        margin: 0px;
-        padding: 0px;
-        border: 1px solid #c9c2c1;
-        background-color: #fff;
-}
-
-div.bubble blockquote div {
-        margin: 10px;
-        padding: 0px;
+.rounded {
+        -moz-border-radius: 10px;
+        -webkit-border-radius: 10px;
+        -khtml-border-radius: 10px;
+        border-radius: 10px;
+        padding: 4px;
 }
 
-div.bubble cite {
+div.module + cite {
         position: relative;
-        top: 6px;
+        top: -1em;
         margin: 0;
         padding: 7px 0px 0px 15px;
         background: transparent url(/theme/images/tip.gif) no-repeat 20px 0;
@@ -29,56 +16,46 @@ div.bubble cite {
         font-size: small;
 }
 
-/* Rounded Bubble */
-div.bubble div.rounded {
-        margin-bottom: 10px;
-        border: 3px solid #fff;
-        background-color: #b7e0ff;
-}
-
-div.bubble div.rounded blockquote,
-div.bubble div.navbar-rounded blockquote {
-        border: 0;
-        background-color: transparent;
+div.module.unrounded + cite {
+        top: -0.9em;
 }
 
-div.bubble div.rounded blockquote div {
-        margin: 0px 10px;
+div.module.bquote + cite {
+        top: -0.8em;
 }
 
-div.bubble cite.rounded {
+div.module.rounded + cite {
         margin: 0px;
-        padding: 19px 0 0 15px;
         background: transparent url(/theme/images/tip-rounded.gif) no-repeat 15px 0;
 }
 
-/* Pimped Bubble */
-
-div.pimped {
-        font-size: 0.9em;
-}
-
-div.pimped div.rounded {
+div.module.pimped {
         color: #fff;
         border: 3px solid #fff;
-        background-color: #111;
+        background-color: #111 !important;
+        padding-top: 5px;
+        padding-bottom: 5px;
 }
 
-div.pimped cite.rounded {
-        background: transparent url(/theme/images/tip-pimped.gif) no-repeat 15px 0;
+div.module.pimped + cite {
+        background: transparent url(/theme/images/tip-pimped.gif) no-repeat 20px 0;
 }
 
-div.bubble div.bquote blockquote {
-        margin: 0;
-        padding: 4px 0;
-        border: 1px solid #c9c2c1;
-        background-color: #fff;
+div.module {
+        margin: auto 10px 14px 10px;
+        margin-left: 10px;
+        margin-right: 10px;
+        font-size: 0.9em;
+        background-color: #B7E0FF !important;
+        border: 3px solid #FFFFFF;
 }
 
-.rounded {
-        -moz-border-radius: 10px;
-        -webkit-border-radius: 10px;
-        -khtml-border-radius: 10px;
-        border-radius: 10px;
-        padding: 4px;
+div.module.unrounded {
+        background-color: white !important;
+        border: 1px solid #c9c2c1 !important;
+        padding: 5px;
+}
+
+div.module.sidebar {
+        width: 250px;
 }
@@ -1,4 +0,0 @@
-body {
- background-color: aqua;
- background-image: url(/theme/images/backgrounds/island6.PNG);
-}
@@ -21,6 +21,9 @@
 if (!defined('S_INCLUDE_FILE')) {define('S_INCLUDE_FILE',1);}
 
 require('headerproc.php');
+include('../includes/specialdates.php');
+
+$bgcolor='aqua';
 
 if (sd_isSpecialDay('Four Island A'))
 {
@@ -93,20 +96,44 @@ if (sd_isSpecialDay('Four Island A'))
 } elseif (sd_isSpecialDay('Valentines Day'))
 {
         $bgimgm = 'valentines';
+} else {
+        $bgimgm = 'island6';
+}
+
+?>
+
+div#window {
+ background-color: <?php echo($bgcolor); ?>;
+ background-image: url(/theme/images/backgrounds/<?php echo($bgimgm); ?>.PNG);
+ background-position: bottom left;
+ background-repeat: repeat-x;
+ background-attachment: fixed;
+ padding: 0 !important;
 }
 
-$bodyID = $_GET['id'];
-if (!isset($bgcolor))
+<?php
+
+if ($bgcolor == 'aqua')
 {
-        $bgcolor='aqua';
+?>
 
-        include("css/day.css");
-} else {
-        include("css/night.css");
+div#content div#actual-content {
+        background-color: rgba(255, 255, 255, 0.5);
 }
 
+<?php
+} else {
 ?>
 
-body {
- background-image: url(/theme/images/backgrounds/<?php echo($bgimgm); ?>.PNG) !important;
+div#content div#actual-content {
+        background-color: rgba(0, 0, 0, 0.75);
 }
+
+.light-at-night {
+        color: #536482;
+}
+
+<?php
+}
+
+?>
@@ -1,44 +0,0 @@
-body * {
- overflow: hidden;
-}
-
-dl.icon {
- height: 50px;
-}
-
-#wrap {
- text-align: center;
- background:transparent;
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF,endColorstr=#99FFFFFF);
- zoom: 1;
-}
-
-#wrap #page-body {
- text-align: left;
-}
-
-body#night #wrap {
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
-}
-
-div#fi-navbar ul li a {
- position: relative;
- top: -0.4em;
-}
-
-div.bubble cite {
- position: static;
- padding-top: 4px;
-}
-
-div.bubble cite.rounded {
- padding-top: 13px;
-}
-
-div.pimped cite.rounded {
- padding-top: 14px;
-}
-
-span.post-vote {
- position: static;
-}
@@ -1,25 +0,0 @@
-body {
- background-color: black;
- background-image: url(/theme/images/backgrounds/island6night.PNG);
-}
-
-div#wrap {
- background-color: rgba(0, 0, 0, 0.75);
-}
-
-div#banner {
- background-color: black;
- background-image: url(/theme/images/fourisland_header_night.png);
-}
-
-div#fi-navbar ul li.active img {
- background-color: black;
- outline: black solid .5em;
-}
-
-#rightbar .sidebar  .pimped cite,
-.post .entry .bubble cite,
-#footer,
-body.quotes #content {
- color: #555555;
-}
@@ -1,36 +1,34 @@
-body {
- width: 100% !important;
-}
-
-div#footer, div#rightbar, div#push {
+div#sidebar, div#footer .foot-module, div#newComment {
  display: none;
 }
 
-div#banner {
- background-image: none;
- height: auto !important;
+div#content div#window, div#content div#actual-content {
+ background-color: white;
+ padding: 0;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ -khtml-border-radius: 0;
+ border-radius: 0;
+ margin: 0;
 }
 
-div#banner h1 a {
- text-indent: 0 !important;
- color: black;
- text-align: center;
- height: auto !important;
-}
-
-span.print {
- display: inline;
-}
- 
 div#cleardiv {
  clear: none;
 }
 
 div#content {
- width: 100%;
+ width: 95%;
 }
 
 div.post-title {
  width: 90%;
 }
 
+div#banner a {
+ text-indent: 0 !important;
+ color: black;
+ text-align: center;
+ height: auto !important;
+ font-size: 4em;
+ padding-top: 1em;
+}
@@ -0,0 +1,61 @@
+ul.quote-list {
+        list-style-type: none;
+}
+
+li.quote {
+        margin: 0 0 1em;
+        padding-bottom: 0.1em;
+        background-color: #FCFCFC;
+}
+
+h3.quote-header {
+        background-color: #F7F7F7;
+        border: 1px solid #F4F4F4;
+        margin: 0;
+        padding: 0.25em 0.75em;
+}
+
+li.quote, h3.quote-header {
+        -moz-border-radius-topleft: 0.5em;
+        -moz-border-radius-topright: 0.5em;
+        -webkit-border-top-left-radius: 0.5em;
+        -webkit-border-top-right-radius: 0.5em;
+        -khtml-border-top-left-radius: 0.5em;
+        -khtml-border-top-right-radius: 0.5em;
+        border-top-left-radius: 0.5em;
+        border-top-right-radius: 0.5em;
+}
+
+span.quote-date {
+        font-size: 70%;
+}
+
+blockquote.quote-body {
+        font-family: Consolas, Monaco, Courier New, monospace;
+        font-size: 12px;
+        margin: 0.5em 0.75em;
+        padding: 0;
+        position: static;
+        width: 100%;
+}
+
+ul.quote-list li:hover {
+        background: #FFFCEC;
+}
+
+ul.quote-list li:hover h3.quote-header {
+        background: #FEC;
+        border-color: #FFE9C9;
+}
+
+span.quote-action-done {
+        opacity: 0.2;
+}
+
+span.quote-update-result {
+        float: right;
+        text-transform: uppercase;
+        font-size: 70%;
+        position: relative;
+        top: -1.2em;
+}
@@ -1,14 +1,6 @@
-/* Four Island CSS */
-
-body {
- background: repeat-x bottom left fixed;
- font-family: Arial, FreeSans;
- margin: 0px;
- padding: 0px 0px 30px !important;
-}
-
-body.fourm {
- font-family: Verdana, Helvetica, Arial, sans-serif;
+* {
+        margin: 0;
+        padding: 0;
 }
 
 /* Effects */
@@ -27,349 +19,345 @@ body.fourm {
 }
 
 form textarea:focus, form input:focus {
- border: 2px solid #900;
- background-color: #FEFFB2;
+        border: 2px solid #900;
+        background-color: #FEFFB2;
 }
 
 /* Links */
 
 a:link {
- color: blue;
- font-weight: bold;
- text-decoration: none;
+        color: blue;
+        font-weight: bold;
+        text-decoration: none;
 }
 
 a:visited, a:active {
- color: blue;
- text-decoration: none;
+        color: blue;
+        text-decoration: none;
 }
 
 a:hover, a:focus {
- color: blue;
- font-weight: bold;
- text-decoration: none;
- font-variant: small-caps;
- text-transform: capitalize;
+        color: blue;
+        font-weight: bold;
+        text-decoration: none;
+        font-variant: small-caps;
+        text-transform: capitalize;
 }
 
 a img {
- border: 0;
+        border: 0;
 }
 
-/* Random Elements */
+/* Body */
 
-* {
- margin:0pt;
- padding:0pt;
+body {
+        font-family: "Lucida Grande", "Arial", sans;
+        background-color: #111;
 }
 
-p {margin-top: 1em;}
-ul, ol {margin-top: 1em; margin-bottom: 1em}
-
-img.center, img[align="center"] {
- display: block;
- margin-left: auto;
- margin-right: auto;
+div#header {
+        width: 100%;
+        height: 200px;
+        background-image: url(http://fourisland.com/theme/images/header-repeat.png);
+        background-repeat: repeat-x;
 }
 
-acronym, abbr, span.caps {
- cursor: help;
+div#banner {
+        width: 800px;
+        height: 200px;
+        margin: 0 auto;
+        background-image: url(http://fourisland.com/theme/images/header.png);
+        background-position: bottom right;
 }
 
-acronym, abbr {
- border-bottom: 1px dashed #999;
+div#header a {
+        width: 800px;
+        height: 200px;
+        text-indent: -5000px;
+        display: block;
 }
 
-blockquote {
- padding-left: 10px;
- border-left: 3px solid #CCC;
- font-family: Helvetica, sans-serif;
- font-size: 14px;
- margin: 10px 0 10px 50px;
+div#sidebar {
+        width: 21%;
+        float: left;
 }
 
-pre {
- line-height: 12px;
+div#content {
+        width: 69%;
+        float: right;
+        padding-left: 5%;
+        padding-right: 5%;
+        padding-top: 20px;
 }
 
-/* Banner */
-                
-div#banner, div#fi-banner {
- background-repeat: no-repeat;
- width: 900px; /*728*/
- height: 200px;
- float: left;
-/* margin-top: 21px; */
+div#content div.rounded {
+        padding: 10px;
 }
 
-div#banner {
- background: white url("/theme/images/fourisland_header.png") center no-repeat;
- width: 100%;
+div#footer {
+        width: 100%;
+        padding-top: 20px;
+        padding-bottom: 20px;
 }
 
-body div#banner h1, body div#fi-banner h1 {
- margin: 0;
+div#footer div.foot-module {
+        margin: 0 auto;
+        float: left;
+        width: 20%;
+        margin-left: 4%;
+        color: white;
+        font-size: 0.9em;
 }
 
-body div#banner h1 a, body div#fi-banner h1 a {
- display: block;
- width: 900px;
- height: 200px;
- text-indent: -5000px;
- text-decoration: none;
- margin: 0;
+div#footer a {
+        color: white;
+        border-bottom: 1px dotted white;
 }
 
-div#banner h1, div#fi-banner h1 {
- margin: 0;
- font-size: 3.0em;
- font-weight: normal;
+div#footer div.foot-module ul {
+        list-style-type: square;
 }
 
-/* NavBar */
-
-div#fi-navbar {
- position: relative;
- background-color: #b7e0ff;
- width: auto;
- margin-bottom: 14px;
- font: 0.9em "Lucida Grande", Lucida, Verdana, sans-serif;
- height: 1.9em;
- clear: both;
+div#footer p {
+        font-size: 0.5em;
+        color: white;
+        text-align: center;
 }
 
-div#fi-navbar div {
- padding: .001em 0;
- margin: 10px;
+div#page-content {
+        background-color: #00ff00; /*#8B4513;*/
+        padding-bottom: 10px;
 }
 
-div#fi-navbar ul {
- margin: .25em 0;
- padding-left: 1em;
- text-align: center;
+body[id^=fourm] div#page div#content code {
+        display: block;
+        border: solid black 1px;
+        background-color: #FFFF64;
+        width: 485px;
+        overflow: visible;
 }
 
-div#fi-navbar ul li {
- display: inline;
- font-family: Verdana, sans-serif;
- font-size: 1.1em;
+body[id^=fourm] div#content h2 {
+        color: #59770e;
+        margin: 0px 0px 2px;
+        border-bottom: 1px dotted #CCCCCC;
+        letter-spacing: -1px;
+        font-size: 140%;
+        padding-bottom: 3px;
 }
 
-div#fi-navbar ul li+li:before {
- content: " - ";
+body#fourm div#actual-content {
+        font-size: 60%;
 }
 
-div#fi-navbar ul li img,
-div#fi-navbar ul li.active span {
- display: none;
+ul#navbar {
+        text-align: center;
+        margin-top: 0;
 }
 
-div#fi-navbar ul li.active img {
- display: inline;
- background-color: white;
- outline: white solid .5em;
- margin: 0 .5em;
+ul#navbar li {
+        display: inline;
+        font-family: Verdana, sans-serif;
+        font-size: 1.1em;
 }
 
-div#fi-navbar div.bubble blockquote {
- background: none;
- font-size: 0.9em;
+ul#navbar li+li:before {
+        content: " - ";
 }
 
-div#fi-navbar div.bubble blockquote a {
- color: blue;
+ul#navbar li img, ul#navbar li.active span {
+        display: none;
 }
 
-/* Sidebar */
-
-div#rightbar {
- float: left;
- width: 270px; /*210*/
+ul#navbar li.active img {
+        display: inline;
+        background-color: white;
+        outline: white solid .5em;
+        margin: 0 .5em;
 }
 
-div.sidebar {
- width: 250px; /*250*/ /*240*/ /*210*/
- padding: 0 10px;
- margin-bottom: 5px;
+.invisible {
+        display: none;
 }
 
-div.sidebar h3 {
- font-family: Verdana, Helvetica, Arial, sans-serif;
- margin: 5px 0 0 0;
- font-weight: bold;
- color: #333333;
+a img {
+        border: 0;
 }
 
-div.sidebar p {
- font-size: 0.8em;
- margin: 3px 0;
+p {
+        margin-top: 1em;
 }
 
-div.sidebar ul {
- list-style-type: none;
- padding: 0;
- margin: 0;
- line-height: normal !important;
- list-style-image: none !important;
-}
-                                                        
-div#sidebar ul li {
- margin-top: 4px;
+ul, ol {
+        margin-top: 1em;
+        margin-bottom: 1em;
 }
-                                
-div#sidebar ul li a {
- display: block;
- width: 230px;
+
+.center, img[align="center"] {
+        display: block;
+        margin: 0 auto !important;
 }
 
-div#sidebar li img {
- border: 0;
- height: 16px;
- width: 16px;
+acronym, abbr, span.caps {
+ cursor: help;
 }
 
-/* Layout */
+acronym, abbr {
+ border-bottom: 1px dashed #999;
+}
 
-#wrap {
- width: 910px;
- margin: 10px auto;
- padding: 0;
- background-color: white;
- background-color: rgba(255, 255, 255, 0.5);
- border: 4px solid gray;
+pre {
+        background: #eee; 
+        padding: 10px; 
+        border: 2px solid #c94a29; 
+        overflow: auto;
+        margin: 15px 0;
+        font-family: Courier, Monospace;
 }
 
-#page-body {
- margin: 0 30px;
- clear: both;
- position: relative;
+ul pre, ol pre {
+        margin-left: -3em;
 }
 
-body.fourm #page-body {
- margin: 0 10px 0 25px;
- width: 95%;
- font-size: 62.5%;
+div.autosize {
+        margin-bottom: 6px !important;
 }
 
-#phpBB3-page-body {
- margin: 4px 0 !important;
- clear: both;
+ul blockquote, ol blockquote {
+        position: relative;
+        left: -3em;
+        width: 110%;
 }
 
-/* Content */
-                                                                                                                        
-div#content {
- float: right;
- width: 555px; /*465*/ /*555*/
+.comment ul, .comment ol {
+        margin-left: 3em;
 }
 
-body#day div#page div#content code {
- display: block;
- border: solid black 1px;
- background-color: #FFFF64;
- width: 485px;
- overflow: visible;
+ul div.bquote blockquote, ol div.bquote blockquote {
+        left: 0;
 }
 
-div#content h2 {
- color: #59770e;
- margin: 0px 0px 2px;
- border-bottom: 1px dotted #CCCCCC;
- letter-spacing: -1px;
- font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
- padding-bottom: 3px;
+li+br {
+        display: none;
 }
 
-/* Random Divs/Spans */
+/* Tables */
 
-div.cleardiv {
- clear: both;
-}
-                                
-div#footer {
- clear: both;
- padding: .5em 0 1em 0;
- margin-top: .5em;
- text-align: center;
- font-size: .68em;
- border-top: 1px black solid;
+table.webmail {
+        border: 0;
+        width: 100%;
 }
 
-div#footer ul.rows li {
- display: list-item;
+table.webmail, table.webmail td {
+        border-spacing: 0;
 }
 
-div#footer ul {
- padding: 0;
- margin: 0;
- list-style-type: none;
+table.webmail tr {
+        background-color: #3CE4ED;
 }
 
-div#footer ul li {
- display: inline;
- margin-right: 1em;
+table.webmail tr.even {
+        background-color: #39B7CD;
 }
 
-div#footer ul li img {
- width: 20px;
- height: 20px;
- vertical-align: top;
+table.webmail th {
+        background-color: #FF9912;
+        text-align: left;
 }
 
-div#content ul {
- list-style: url(/theme/images/bullet_disk_big.png);
+/* Sidebar */
+
+div#rightbar {
+        float: left;
+        width: 270px; /*210*/
 }
 
-div#content a img {
- border: solid transparent 1px;
+div.sidebar {
+        width: 250px; /*250*/ /*240*/ /*210*/
+        padding: 0 10px;
+        margin-bottom: 5px;
 }
 
-div#content a:hover img {
- border: dashed gray 1px;
+div.sidebar h3 {
+        font-family: Verdana, Helvetica, Arial, sans-serif;
+        margin: 5px 0 0 0;
+        font-weight: bold;
+        color: #333333;
 }
 
-div#hatbar.quotes-options ul {
- list-style: none;
+div.sidebar p {
+        font-size: 0.8em;
+        margin: 3px 0;
 }
 
-div.autosize {
- margin-bottom: 6px !important;
+div#sidebar ul.hatnav {
+        list-style-type: none;
+        padding-left: 24px;
+        margin-top: 0 !important;
+        line-height: normal !important;
+        list-style-image: none !important;
 }
 
-ul blockquote, ol blockquote {
- position: relative;
- left: -3em;
- width: 110%;
+div#sidebar ul {
+        list-style-type: none;
+}
+                                                        
+div#sidebar ul.hatnav li {
+        text-align: right;
+        border: 1px gray solid;
+        padding-top: 2px;
+        padding-bottom: 2px;
+        background-color: #111;
+        color: white;
+}
+                                
+div#sidebar ul.hatnav li a {
+        display: block;
+        width: 230px;
+        color: white;
 }
 
-li+br {
- display: none;
+div#sidebar li img {
+        border: 0;
+        height: 16px;
+        width: 16px;
 }
 
-.invisible {
- display: none;
+div#sidebar ul.hatnav li.active {
+        background-color:#00FF00;
+        border: none;
 }
 
-/* Tables */
+div#sidebar ul.hatnav li:hover {
+        background-color:yellow;
+        border: none;
+}
 
-table.webmail {
- border: 0;
- width: 100%;
+div#sidebar ul li.active a, div#sidebar ul li a:hover {
+        color: black;
 }
 
-table.webmail, table.webmail td {
- border-spacing: 0;
+div.cleardiv {
+        clear: both;
 }
 
-table.webmail tr {
- background-color: #3CE4ED;
+.nobr {
+        white-space: nowrap;
 }
 
-table.webmail tr.even {
- background-color: #39B7CD;
+textarea {
+        width: 99%;
 }
 
-table.webmail th {
- background-color: #FF9912;
- text-align: left;
+div#flash {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        background-color: yellow;
+        padding: 10px 0;
+        text-align: center;
+        border-bottom: 1px solid black;
+        display: none;
+        z-index: 9999;
 }