AJAX Chat Background-color + AJAX Chat Sprites [Tutorial]

How-to's, little tricks, tutorials, code examples (snippets) and read-me's.

AJAX Chat Background-color + AJAX Chat Sprites [Tutorial]

Postby jooda » 02 Apr 2012, 09:13

AJAX Chat Background-color + AJAX Chat Sprites


First what you want to do is log in with a client, perferably FileZilla etc.

Go to Chat.php > right click edit.

Once you have Chat.php opened, try to find a code similar to this.
i.e

Code: Select all
if ($count++ == 0)
         {
            $last_id = $row['message_id'];
         }
            if( $row['user_id']== 2){
         $class4 = 3;
         }else if( $row['user_colour']=="#000000"){
         $class4 = 4;
         }else{
         $class4= ($row['message_id'] % 2) ? 1 : 2;
         }



There are 4 of these, I've only found 3 of 4 but aslong as you edit 3 of these codes the chat bg will still work.

Now go to Stylesheet.css of the style theme you're using i.e this forum is using the Infinity style.

Now in Stylesheet.css you want to look for .Rows1 - 3 Under Tables.

Once you find those .rows that will look something like this:

Code: Select all
.row1 {
   background-color: #ECECEC;
   padding: 4px;
}

.row2 {
   background-color: #DCE1E5;
   padding: 4px;
}

.row3 {
   background-color: #C0C8D0;
   padding: 4px;
}


now add this code after .row3

Code: Select all
.row2011{
background-color: #8DACD9;
}


save it to your FTP and overwrite the other stylesheet.css.

Now go to back to you're chat.php and find the codes that i showed you earlier in this Tutorial; edit ['user_id'] == 2){ to whatever user you want to have a bg.

then go to ['user_color'] == "#8DACD9"
then edit this: $class4 = 3; and change it to this:

Code: Select all
$class4 = 2011;


So it should look like something like this:

Code: Select all
if($count++ == 0)
{
$last_id = $row['message_id'];
}
if( $row['user_id']==2){
$class4 = 2011;
}else if ( $row['user_color']=="#8DACD9"){
$class4= ($row['message_id'] % 2) ? 1 : 2;
}


GO TO SHOUT.PHP and GO TO The code that looks like this:

Code: Select all
{
         if ($count++ == 0)
         {
            $last_id = $row['message_id'];
         }


And add this into that code:

Code: Select all
if( $row['user_id']==2){
         $class2 = 2011;
         }else if( $row['user_colour']=="#8DACD9"){
         $class2 = 2-11;
         }else{
         $class2= ($row['message_id'] % 2) ? 1 : 2;
         }


If the Class is not 2 try $class4 instead.

Save and overwrite it with your old chat.php
Then go to your forum, and log in to your ACP[Administrator Control Panel] Go to "Purge Cache" and click yes to purge cache, doing this refreshes all edited syle related codes. Then go to styles > themes > refresh your theme that you edited these codes with, if it doesn't let you refresh via Database then to go Details and change it from FileSystem to Database. Then Refresh your theme, and go to user Index and it should work.

Thank me If I Helped.

HOW TO ADD SPRITES (ICONS) BESIDE YOU NAME IN THE CHATBOX:

Adding Sprites is pretty basic, if you know HTML you'll reconize and understand the code.
What you want to do is log-in to your FTP (FileZilla) and goto your chat.php again, scroll down to the buttom of the chat.php and push enter after this code:

Code: Select all
}
   
   return $user;
}



And enter this code in:

Code: Select all
function random_color(){
    mt_srand((double)microtime()*1000000);
    $c = '';
    while(strlen($c)<6){
        $c .= sprintf("%02X", mt_rand(0, 255));
    }
    return $c;
}

function get_pokeman(){
  global $db, $user;

      if($user->data['user_id'] == 2){
         $pmn = '<img src="THE LINK OF THE IMAGE YOU WANT GOES HERE" height="22p">';
}
    if(!isset($pmn)){
      return $user->data['username'];
    }else{
      return $pmn . $user->data['username'];
    }
}


If you're adding another user sprite them after :
Code: Select all
if($user->data['user_id'] == 2){
         $pmn = '<img src="THE LINK OF THE IMAGE YOU WANT GOES HERE" height="22p">';


(PRESS ENTER & TYPE THE FOLLOWING)

Code: Select all
}else if($user->data['user_id'] == 10){
$pmn = '<img src="THE LINK OF THE IMAGE YOU WANT GOES HERE" height="22px">';


So your code should look something like this at the end:

Code: Select all
function random_color(){
    mt_srand((double)microtime()*1000000);
    $c = '';
    while(strlen($c)<6){
        $c .= sprintf("%02X", mt_rand(0, 255));
    }
    return $c;
}

function get_pokeman(){
  global $db, $user;

      if($user->data['user_id'] == 2){
         $pmn = '<img src="http://i47.tinypic.com/2e31lxd.gif" height="22px">';
      }else if($user->data['user_id'] == 58){
         $pmn = '<img src="http://cris.hobo-studios.org/pixolart/favicon.png" height="16px">';
      }
    if(!isset($pmn)){
      return $user->data['username'];
    }else{
      return $pmn . $user->data['username'];
    }
}
?>


Save and overwrite And DONE! no need to purge cache or anything the sprite(icon) should now be beside the users name.
jooda    
Ensign
Ensign
 
Posts: 73
Joined: 08 Jul 2011, 08:33
Gender: Male
phpBB Knowledge: 4




phpBB Academy at StarTrekGuide
Support STG
Using PayPal Donate

Re: AJAX Chat Background-color + AJAX Chat Sprites [Tutorial]

Postby Apathy » 15 Apr 2012, 19:09

About the function pokemon, where is it? can i get it?
Apathy    
Crewman
Crewman
 
Posts: 6
Joined: 14 Apr 2012, 21:43
Gender: Male
phpBB Knowledge: 3

Re: AJAX Chat Background-color + AJAX Chat Sprites [Tutorial]

Postby Kill4 » 09 May 2012, 14:33

Apathy wrote:About the function pokemon, where is it? can i get it?


Open chat.php and do the following edit;

Find:
Code: Select all
generate_text_for_storage($message, $uid, $bitfield, $options, $allow_bbcode, $allow_urls, $allow_smilies);

      $sql_ary = array(
         'chat_id'         => 1,
         'user_id'         => $user->data['user_id'],
         'username'         => $user->data['username'],
         'user_colour'      => $user->data['user_colour'],
         'message'         => $message,
         'bbcode_bitfield'   => $bitfield,
         'bbcode_uid'      => $uid,
         'bbcode_options'   => $options,
         'time'            => time(),
      );


Replace with:
Code: Select all
generate_text_for_storage($message, $uid, $bitfield, $options, $allow_bbcode, $allow_urls, $allow_smilies);
     
      $users = get_pokeman();

      $sql_ary = array(
         'chat_id'         => 1,
         'user_id'         => $user->data['user_id'],
         'username'        => $users,
         'user_colour'     => $user->data['user_colour'],
         'message'         => '<span style="overflow: hidden; max-width: 800px; max-height: 300px;">'.$message.'</span>',
         'bbcode_bitfield' => $bitfield,
         'bbcode_uid'      => $uid,
         'bbcode_options'  => $options,
         'time'            => time(),
      );


That should work.
Kill4    
Supporter
Supporter
 
Posts: 3
Joined: 25 Jan 2011, 11:03
Gender: Male
phpBB Knowledge: 5

Re: AJAX Chat Background-color + AJAX Chat Sprites [Tutorial]

Postby xXxShadowxXx » 07 Jun 2012, 18:12

Jooda, your BG code does not work..
xXxShadowxXx    
Crewman
Crewman
 
Posts: 8
Joined: 06 Feb 2012, 23:37
Gender: Male
phpBB Knowledge: 5

Re: AJAX Chat Background-color + AJAX Chat Sprites [Tutorial]

Postby Sniper_E » 08 Jun 2012, 13:41

My bg codes works. :)

[ Post made via HTC Inspire] Image
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
User avatar
Sniper_E    
STG Jedi Master
STG Jedi Master
 
Posts: 6983
Joined: 31 May 2006, 06:29
Location: Shreveport, LA
Favorite Team: The STG Team
Gender: Male
phpBB Knowledge: 6

Re: AJAX Chat Background-color + AJAX Chat Sprites [Tutorial]

Postby Apathy » 08 Jun 2012, 13:59

Lol Sniper_E, you fun :)
Apathy    
Crewman
Crewman
 
Posts: 6
Joined: 14 Apr 2012, 21:43
Gender: Male
phpBB Knowledge: 3

Re: AJAX Chat Background-color + AJAX Chat Sprites [Tutorial]

Postby legendxxx » 02 Jan 2013, 10:46

Code: Select all
if ($count++ == 0)
         {
            $last_id = $row['message_id'];
         }
            if( $row['user_id']== 2){
         $class4 = 3;
         }else if( $row['user_colour']=="#000000"){
         $class4 = 4;
         }else{
         $class4= ($row['message_id'] % 2) ? 1 : 2;
         }

i cant find that code mine is like this
Code: Select all
if ($count++ == 0)
         {
            $last_id = $row['message_id'];
         }
         $template->assign_block_vars('chatrow', array(
            'MESSAGE_ID'   => $row['message_id'],
            'USERNAME_FULL'   => clean_username(get_username_string('full', $row['user_id'], $row['username'], $row['user_colour'], $user->lang['GUEST'])),
            'MESSAGE'      => generate_text_for_display($row['message'], $row['bbcode_uid'], $row['bbcode_bitfield'], $row['bbcode_options']),
            'TIME'         => $user->format_date($row['time']),
            'CLASS'         => ($row['message_id'] % 2) ? 1 : 2,
         ));
      }

help me in adding background
legendxxx
Crewman
Crewman
 
Posts: 7
Joined: 29 Dec 2012, 09:57
Gender: Male


Return to Tutorials and How-Tos

Who is online

Users browsing this forum: No registered users and 3 guests