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
Oh and this is my first mod.
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:
3. Now lets open up shoutbox.php, to make it easier for you, erase everything and paste this code:
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:
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
Heres a preview of what it will look like
Oh and this is my first mod.
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:
Code:
/* 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:
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:
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
Last edited:
Forum Contains New Posts
Forum Contains No New Posts
