Side Shoutbox Mod

[rickasawr]

I was just messing with the code and i did not like how the Shoutbox took up one full page, and i wanted it to be on the side on my sidebar.

Heres a preview of what it will look like (http://i54.tinypic.com/24wu1pu.png)

Oh and this is my first mod. :meow:

1. First off, you may want to take off the shoutbox page off of the main links. We will not need it there because we will put it on the side.

2. Create a new .css file, and name it shoutbox.css Here, we will put all of the styles for everything on the shoutbox. Please edit it to your liking. Copy and paste this code onto your .css file:


/* this is to specify what the background of the shoutbox iframe will have */
body{background:#ffffff;}

/* This is the "box" where the comment is in */
blockquote, .comment{
background: #333333;
color: #dddddd;
padding: 10px;
width:150px;
margin:auto;
margin-bottom:5px;
text-shadow: 1px 1px 1px #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

/*this is for the date of the comment*/
.userdate{
width:100%;
height:25px;
color:#aaaaaa;
font-size:10px;
display:block;
text-align:right;
}

/*this makes all of the comments scroll up and down while keeping the add comment form in place */
.commentwrap{
overflow:auto;
height:205px;
}

/*this contains the add comment form */
#commentform{
width:190px;
height:90px;
bottom:0px;
margin:auto;
background:#eeeeee;
padding-top:5px;
}

/* this is for the "submit" button and the textbox to put the comment in */
input, textarea{
border: 1px solid #999999;
padding: 3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

/* this is so that the textbox does not show up as courier */
textarea{ font-family: arial; }



3. Now lets open up shoutbox.php, to make it easier for you, erase everything and paste this code:


<?php

// ************************************************** ********************
// Mysidia Adoptables Script: shoutbox.php by Arianna
// Copyright 2011 Mysidia Adoptables staff team
// For help and support: http://www.mysidiaadoptables.com/forum/
//
// Redistribution prohibited without written permission
// ************************************************** ********************


// Wake the sleeping giant

// ************************************************** ********************
// Basic Configuration Info
// ************************************************** ********************

include("inc/functions.php");
include("inc/config.php");
include("inc/bbcode.php");

$themeurl = grabanysetting("themeurl");


// ************************************************** ********************
// Check and see if the user is logged in to the site
// ************************************************** ********************

$loginstatus = logincheck();
$isloggedin = $loginstatus[loginstatus];
$loggedinname = $loginstatus[username];

// ************************************************** ********************
// End Prepwork - Output the page to the user
// ************************************************** ********************

$article_title = "Shoutbox";
$article_content = "<LINK REL=StyleSheet HREF='shoutbox.css' TYPE='text/css'><div class='commentwrap'> ";

$article_content = $article_content."<div class='enclosecomments'>";
$query = "SELECT * FROM ".$prefix."shoutbox ORDER BY id DESC LIMIT 0, 10";
$result = mysql_query($query);
$num = mysql_numrows($result);

//Loop out code
$i=0;
while ($i < $num) {
$id=@mysql_result($result,$i,"id");
$user=@mysql_result($result,$i,"user");
$date=@mysql_result($result,$i,"date");
$nolinecomment=@mysql_result($result,$i,"comment");
$nolinecomment = bbconvert($nolinecomment);
$comment=nl2br($nolinecomment);
$commentdiv = "<div class='comment'><div class='userdate'>".$user." - ".$date."</div>".$comment."</div>";
$article_content = $article_content.$commentdiv;
$i++;
}
$article_content = $article_content."</div></div><div id='commentform'>";
$article_content = $article_content."<form action='shoutbox2.php' method='post'>
<textarea style='width:190px;height:45px;' name='comment' wrap='physical' ></textarea><br>
<input type='submit' onClick='window.location.href=window.location.href ' />";

//here the user posts a comment
$comment = $_POST["comment"];
if ($comment != "") {
$date = date("Y-m-d H:i:s");
// $date = "10-23-3 21:02:35";
$user = $loggedinname;
if ($isloggedin!="yes") {
$user = "Guest";
}
$comment = $comment;
mysql_query("INSERT INTO ".$prefix."shoutbox VALUES ('', '$user', '$date', '$comment')");
$article_content = $article_content."<br /><span style='font-size:10px;'><a href='shoutbox.php'>Comment posted. Click here.</a></span></form></div>";
}
else {
$article_content = $article_content."</form></div>";
}

echo $article_content;

?>


4. Now, the last thing! go to your template's template.html file. Find a place where you would like this shoutbox to be and add in this code:


<iframe src="shoutbox.php" width="190" height="300" name="shoutbox">
Your Browser does not support iframes.
</iframe>
<br />
<a target="shoutbox" onClick="window.location.reload()">Refresh The Shoutbox</a>


and your done!

Please note: editing the iframe width and height may make the shoutbox look weird and ugly. You may have to edit the length and width in your .css file. edit #commentform and .commentwrap

[Kaeliah]

2 Things. 1st is you probably don't need a whole new CSS just for the shoutbox. You could add it into the normal CSS pretty easily. 2nd, is that it looks pretty cool. :3

[rickasawr]

I just did it for the sake of an easier install.

and thankyou. :meow:

[xCataluna]

This is nifty. :3

Just a quick post, in the event that anyone had trouble getting this working, as I did...

The line:
$article_content = $article_content."<form action='shoutbox2.php' method='post'>

Should be:
$article_content = $article_content."<form action='shoutbox.php' method='post'>

And the section:
// ************************************************** ********************
// Check and see if the user is logged in to the site
// ************************************************** ********************

$loginstatus = logincheck();
$isloggedin = $loginstatus[loginstatus];
$loggedinname = $loginstatus[username];

Seems to create an issue where everyone is named "Guest", so I simply removed it.

[RoconzaArt]

I have follow both instructions and yet can't get the username to display.

[Hall of Famer]

Well I dunno if I should bring it up, but the OP's last activity was...


Last Activity: 06-03-2011 12:15 PM

[RoconzaArt]

Darn oh well then.