Updated shoutbox display

3 files changed, 42 insertions, 30 deletions

diff --git a/templates/show_shoutbox.inc.php b/templates/show_shoutbox.inc.php
index 006cb73d..aea1d30a 100644
--- a/templates/show_shoutbox.inc.php
+++ b/templates/show_shoutbox.inc.php
@@ -21,18 +21,22 @@
 ?>
 <?php show_box_top(_('Shoutbox')); ?>
 <div id="shoutbox">
-<?php foreach ($shouts as $shout_id) { 
+<?php 
+  $rowparity="shouteven";
+  foreach ($shouts as $shout_id) { 
 	$shout = new shoutBox($shout_id); 
 	$object = shoutBox::get_object($shout->object_type,$shout->object_id); 
 	$object->format(); 
 	$client = new User($shout->user); 
 	$client->format(); 
+	
+	$rowparity = ($rowparity=="shouteven") ? "shoutodd" : "shouteven";
 ?>
-<div class="shout">
-	<strong><?php echo ucfirst($shout->object_type); ?>:</strong> <?php echo $object->f_link; ?><br />
-	<?php echo $shout->get_image(); ?><br />
-	<?php echo scrub_out($shout->text); ?><br />
+<div class="shout <?php echo($rowparity) ?>">
+	<?php echo $shout->get_image(); ?>
+	<strong><?php echo ucfirst($shout->object_type); ?>:</strong> <?php echo $object->f_link; ?>
 	<span class="information"><?php echo $client->f_link; ?> <?php echo date("d/m H:i",$shout->date); ?></span>
+	<span class="shouttext"><?php echo scrub_out($shout->text); ?></span>
 </div>
 <?php } ?>
 </div>
diff --git a/themes/classic/templates/default.css b/themes/classic/templates/default.css
index 4c6d386d..2b8e823f 100644
--- a/themes/classic/templates/default.css
+++ b/themes/classic/templates/default.css
@@ -603,23 +603,23 @@ td.cel_cover{padding:6px;}
 /************************************************/

 

 #shoutbox {

-	font-size:0.8em;	

+	font-size:0.8em;

 } 

 

-#shoutbox div.shout { 

-	float:left;

-	margin-right:5px;

+#shoutbox div.shout {

+  padding-top:0.5em; 

+	margin:10px 5px 0 0;

+  border-top:1px dotted #c0c0c0;

 } 

 

-#shoutbox span.information { 

-	float:left;

-	clear:left;

-} 

+#shoutbox span.information {}

+#shoutbox .shouttext{display:block;}

+img.shoutboximage {	margin:0 3px;}

 

-img.shoutboximage { 

-	float:left;

-	margin-right:3px;

-} 

+#shoutbox div.shoutodd{margin-right:20%;text-align:left;}

+#shoutbox div.shouteven{margin-left:20%;text-align:right;}

+.shoutodd img.shoutboximage {float:left;}

+.shouteven img.shoutboximage {float:right;}

 

 /************************************************/

 /*             List Header                      */

diff --git a/themes/greysme/templates/default.css b/themes/greysme/templates/default.css
index 2a25c82e..e12ab897 100644
--- a/themes/greysme/templates/default.css
+++ b/themes/greysme/templates/default.css
@@ -658,24 +658,32 @@ background:#000;
 /*               Shoutbox                       */

 /************************************************/

 

+

 #shoutbox {

-        font-size:0.8em;

-}

+	font-size:1em;

+	position:relative;

+} 

 

-#shoutbox div.shout {

-        float:left;

-        margin-right:5px;

-}

+#shoutbox div.shout { 

+	/*float:left;*/

+	padding:1em 85px 0 30px;  

+} 

 

-#shoutbox span.information {

-        float:left;

-        clear:left;

+#shoutbox span.information { 

+/*	float:left;

+	clear:left;*/

+} 

+#shoutbox .shouttext{display:block;}

+img.shoutboximage { 

+	margin-right:3px;

+	width:25px;

+	height:25px;

+	position:absolute;margin-left:-30px;

 }

+.shoutodd img.shoutboximage {/*float:right;*/}

+.shouteven img.shoutboximage {/*float:right;*/}

 

-img.shoutboximage {

-        float:left;

-        margin-right:3px;

-}

+div.shout:hover img.shoutboximage{width:75px;height:75px;position:absolute;top:50%;right:0;margin-top:-38px}

 

 /************************************************/

 /*             List Header                      */