add emoticos new chat

main/chat/chat.php

@@ -80,7 +80,7 @@ if (empty($open_chat_window)) {
 echo '<div class="page-chat">';
 echo '<iframe src="chat_whoisonline.php?cidReq='.$cidreq.'" name="chat_whoisonline" scrolling="no" style="height:500px; width:35%; border: 0px none; float:left"></iframe>';
 echo '<iframe src="chat_chat.php?origin='.$origin.'&target='.$target.'&amp;cidReq='.$cidreq.'" name="chat_chat" scrolling="auto" height="380" style="width:65%; border: 0px none; float:right"></iframe>';
-echo '<iframe src="chat_message.php?cidReq='.$cidreq.'" name="chat_message" scrolling="no" height="120" style="width:65%; border: 0px none; float:right"></iframe>';
+echo '<iframe src="chat_message.php?cidReq='.$cidreq.'" name="chat_message" scrolling="no" height="180" style="width:65%; border: 0px none; float:right"></iframe>';
 echo '<iframe src="chat_hidden.php?cidReq='.$cidreq.'" name="chat_hidden" height="0" style="border: 0px none"></iframe>';
 echo '</div>';
 

main/chat/chat_message.php

@@ -108,54 +108,56 @@ if (!empty($course) && !empty($_user['user_id'])) {
 
 	// Define emoticons
     $emoticon_text1 = ':-)';
-    $emoticon_img1  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_smile.gif" alt="'.get_lang('Smile').'" title="'.get_lang('Smile').'" />';
+    $emoticon_img1  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_smile.png" alt="'.get_lang('Smile').'" title="'.get_lang('Smile').'" />';
     $emoticon_text2 = ':-D';
-    $emoticon_img2  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_biggrin.gif" alt="'.get_lang('BigGrin').'" title="'.get_lang('BigGrin').'" />';
+    $emoticon_img2  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_biggrin.png" alt="'.get_lang('BigGrin').'" title="'.get_lang('BigGrin').'" />';
     $emoticon_text3 = ';-)';
-    $emoticon_img3  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_wink.gif" alt="'.get_lang('Wink').'" title="'.get_lang('Wink').'" />';
+    $emoticon_img3  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_wink.png" alt="'.get_lang('Wink').'" title="'.get_lang('Wink').'" />';
     $emoticon_text4 = ':-P';
-    $emoticon_img4  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_razz.gif" alt="'.get_lang('Avid').'" title="'.get_lang('Avid').'" />';
+    $emoticon_img4  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_razz.png" alt="'.get_lang('Avid').'" title="'.get_lang('Avid').'" />';
     $emoticon_text5 = '8-)';
-    $emoticon_img5  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_cool.gif" alt="'.get_lang('Cool').'" title="'.get_lang('Cool').'" />';
+    $emoticon_img5  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_cool.png" alt="'.get_lang('Cool').'" title="'.get_lang('Cool').'" />';
     $emoticon_text6 = ':-o)';
-    $emoticon_img6  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_surprised.gif" alt="'.get_lang('Surprised').'" title="'.get_lang('Surprised').'" />';
+    $emoticon_img6  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_surprised.png" alt="'.get_lang('Surprised').'" title="'.get_lang('Surprised').'" />';
     $emoticon_text7 = '=;';
-    $emoticon_img7  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_hand.gif" alt="'.get_lang('Hand').'" title="'.get_lang('Hand').'" />';
+    $emoticon_img7  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_hand.png" alt="'.get_lang('Hand').'" title="'.get_lang('Hand').'" />';
     $emoticon_text8 = '=8-o';
-    $emoticon_img8  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_eek.gif" alt="'.get_lang('Amazing').'" title="'.get_lang('Amazing').'" />';
+    $emoticon_img8  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_eek.png" alt="'.get_lang('Amazing').'" title="'.get_lang('Amazing').'" />';
 	$emoticon_text9 = ':-|)';
-	$emoticon_img9  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_neutral.gif" alt="'.get_lang('Neutral').'" title="'.get_lang('Neutral').'" />';
+	$emoticon_img9  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_neutral.png" alt="'.get_lang('Neutral').'" title="'.get_lang('Neutral').'" />';
-	$emoticon_text8 = ':-k';
+	$emoticon_text10 = ':-k';
-	$emoticon_img8  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_think.gif" alt="'.get_lang('Think').'" title="'.get_lang('Think').'" />';
+	$emoticon_img10  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_think.png" alt="'.get_lang('Think').'" title="'.get_lang('Think').'" />';
 	$emoticon_text11 = ':-?';
-	$emoticon_img11  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_confused.gif" alt="'.get_lang('Confused').'" title="'.get_lang('Confused').'" />';
+	$emoticon_img11  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_confused.png" alt="'.get_lang('Confused').'" title="'.get_lang('Confused').'" />';
 	$emoticon_text12 = ':-8';
-	$emoticon_img12  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_redface.gif" alt="'.get_lang('Redface').'" title="'.get_lang('Redface').'" />';
+	$emoticon_img12  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_redface.png" alt="'.get_lang('Redface').'" title="'.get_lang('Redface').'" />';
-	$emoticon_text13 = ':- = ';
+	$emoticon_text13 = ':-L';
-	$emoticon_img13  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_shhh.gif" alt="'.get_lang('Silence').'" title="'.get_lang('Silence').'" />';
+	$emoticon_img13  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_shhh.png" alt="'.get_lang('Silence').'" title="'.get_lang('Silence').'" />';
 	$emoticon_text14 = ':-#)';
-	$emoticon_img14  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_silenced.gif" alt="'.get_lang('Silenced').'" title="'.get_lang('Silenced').'" />';
+	$emoticon_img14  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_silenced.png" alt="'.get_lang('Silenced').'" title="'.get_lang('Silenced').'" />';
 	$emoticon_text15 = ':-(';
-	$emoticon_img15  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_sad.gif" alt="'.get_lang('Sad').'" title="'.get_lang('Sad').'" />';
+	$emoticon_img15  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_sad.png" alt="'.get_lang('Sad').'" title="'.get_lang('Sad').'" />';
-	$emoticon_text16 = ':-[8';
+	$emoticon_text16 = ';-(';
-	$emoticon_img16  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_angry.gif" alt="'.get_lang('Angry').'" title="'.get_lang('Angry').'" />';
+	$emoticon_img16  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_mourn.png" alt="'.get_lang('Weep').'" title="'.get_lang('Weep').'" />';
-	$emoticon_text17 = '--)';
+	$emoticon_text17 = ':-[8';
-	$emoticon_img17  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_arrow.gif" alt="'.get_lang('Arrow').'" title="'.get_lang('Arrow').'" />';
+	$emoticon_img17  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_angry.png" alt="'.get_lang('Angry').'" title="'.get_lang('Angry').'" />';
-	$emoticon_text18 = ':!:';
+	$emoticon_text18 = '--)';
-	$emoticon_img18  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_exclaim.gif" alt="'.get_lang('Exclamation').'" title="'.get_lang('Exclamation').'" />';
+	$emoticon_img18  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_arrow.png" alt="'.get_lang('Arrow').'" title="'.get_lang('Arrow').'" />';
-	$emoticon_text19 = ':?:';
+	$emoticon_text19 = ':!:';
-	$emoticon_img19  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_question.gif" alt="'.get_lang('Question').'" title="'.get_lang('Question').'" />';
+	$emoticon_img19  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_exclaim.png" alt="'.get_lang('Exclamation').'" title="'.get_lang('Exclamation').'" />';
-	$emoticon_text20 = '0-';
+	$emoticon_text20 = ':?:';
-	$emoticon_img20  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/icon_idea.gif" alt="'.get_lang('Idea').'" title="'.get_lang('Idea').'" />';
+	$emoticon_img20  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_question.png" alt="'.get_lang('Question').'" title="'.get_lang('Question').'" />';
+	$emoticon_text21 = '0-';
+	$emoticon_img21  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_idea.png" alt="'.get_lang('Idea').'" title="'.get_lang('Idea').'" />';
 
 	$emoticon_text201 = '*';
-	$emoticon_img201  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/waiting.gif" alt="'.get_lang('AskPermissionSpeak').'" title="'.get_lang('AskPermissionSpeak').'" />';
+	$emoticon_img201  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/waiting.png" alt="'.get_lang('AskPermissionSpeak').'" title="'.get_lang('AskPermissionSpeak').'" />';
 	$emoticon_text202 = ':speak:';
-	$emoticon_img202  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/flag_green_small.gif" alt="'.get_lang('GiveTheFloorTo').'" title="'.get_lang('GiveTheFloorTo').'" />';
+	$emoticon_img202  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/flag_green_small.png" alt="'.get_lang('GiveTheFloorTo').'" title="'.get_lang('GiveTheFloorTo').'" />';
 	$emoticon_text203 = ':pause:';
-	$emoticon_img203  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/flag_yellow_small.gif" alt="'.get_lang('Pause').'" title="'.get_lang('Pause').'" />';
+	$emoticon_img203  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/flag_yellow_small.png" alt="'.get_lang('Pause').'" title="'.get_lang('Pause').'" />';
 	$emoticon_text204 = ':stop:';
-	$emoticon_img204  = '<img src="'.api_get_path(WEB_IMG_PATH).'smileys/flag_red_small.gif" alt="'.get_lang('Stop').'" title="'.get_lang('Stop').'" />';
+	$emoticon_img204  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/flag_red_small.png" alt="'.get_lang('Stop').'" title="'.get_lang('Stop').'" />';
 
 	if ($sent) {
 		$message = Security::remove_XSS(trim(htmlspecialchars(stripslashes($_POST['message']), ENT_QUOTES, $charset)));
@@ -168,7 +170,7 @@ if (!empty($course) && !empty($_user['user_id'])) {
 		$message = str_replace($emoticon_text7, $emoticon_img7, $message);
 		$message = str_replace($emoticon_text8, $emoticon_img8, $message);
 		$message = str_replace($emoticon_text9, $emoticon_img9, $message);
-		//$message = str_replace($emoticon_text10, $emoticon_img10, $message);
+		$message = str_replace($emoticon_text10, $emoticon_img10, $message);
 		$message = str_replace($emoticon_text11, $emoticon_img11, $message);
 		$message = str_replace($emoticon_text12, $emoticon_img12, $message);
 		$message = str_replace($emoticon_text13, $emoticon_img13, $message);
@@ -179,6 +181,7 @@ if (!empty($course) && !empty($_user['user_id'])) {
 		$message = str_replace($emoticon_text18, $emoticon_img18, $message);
  		$message = str_replace($emoticon_text19, $emoticon_img19, $message);
 		$message = str_replace($emoticon_text20, $emoticon_img20, $message);
+		$message = str_replace($emoticon_text21, $emoticon_img21, $message);
 		//
 		$message = str_replace($emoticon_text201, $emoticon_img201, $message);
 		$message = str_replace($emoticon_text202, $emoticon_img202, $message);
@@ -238,6 +241,7 @@ if (!empty($course) && !empty($_user['user_id'])) {
 	?>
 	<form name="formMessage" method="post" action="<?php echo api_get_self().'?'.api_get_cidreq(); ?>" onsubmit="javascript: if(document.formMessage.message.value == '') { alert('<?php echo addslashes(api_htmlentities(get_lang('TypeMessage'), ENT_QUOTES)); ?>'); document.formMessage.message.focus(); return false; }" autocomplete="off">
 	<input type="hidden" name="sent" value="1">
+	<div class="message-form-chat">
 	<table border="0" cellpadding="5" cellspacing="0" width="100%">
 	<tr>
         <td width="320" valign="middle">
@@ -248,9 +252,9 @@ if (!empty($course) && !empty($_user['user_id'])) {
             <button type="submit" value="<?php echo get_lang('Send'); ?>" class="btn-enviar"><?php echo get_lang('Send'); ?></button>
         </td>
 	</tr>
-    <tr>
+	</table>
-        <td>
         <?php
+        echo  '<div class="emoticons-chat">';
 		echo  "<a href=\"javascript:insert('".$emoticon_text1."')\">".$emoticon_img1."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text2."')\">".$emoticon_img2."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text3."')\">".$emoticon_img3."</a>";
@@ -260,7 +264,7 @@ if (!empty($course) && !empty($_user['user_id'])) {
 		echo  "<a href=\"javascript:insert('".$emoticon_text7."')\">".$emoticon_img7."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text8."')\">".$emoticon_img8."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text9."')\">".$emoticon_img9."</a>";
-		//echo  "<a href=\"javascript:insert('".$emoticon_text10."')\">".$emoticon_img10."</a>";
+		echo  "<a href=\"javascript:insert('".$emoticon_text10."')\">".$emoticon_img10."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text11."')\">".$emoticon_img11."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text12."')\">".$emoticon_img12."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text13."')\">".$emoticon_img13."</a>";
@@ -271,18 +275,16 @@ if (!empty($course) && !empty($_user['user_id'])) {
 		echo  "<a href=\"javascript:insert('".$emoticon_text18."')\">".$emoticon_img18."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text19."')\">".$emoticon_img19."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text20."')\">".$emoticon_img20."</a>";
+		echo  "<a href=\"javascript:insert('".$emoticon_text21."')\">".$emoticon_img21."</a>";
 		?>
-        </td>
-        <td>
         <?php
 		echo  "<a href=\"javascript:insert('".$emoticon_text201."')\">".$emoticon_img201."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text202."')\">".$emoticon_img202."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text203."')\">".$emoticon_img203."</a>";
 		echo  "<a href=\"javascript:insert('".$emoticon_text204."')\">".$emoticon_img204."</a>";
+		echo '</div>';
 		?>
-        </td>
+    </div>
-    </tr>
-	</table>
     </form>
 <?php
 }

main/chat/chat_whoisonline.php

@@ -107,9 +107,10 @@ if (!empty($course)) {
 	require 'header_frame.inc.php';
 
 	?>
+	<div class="user-connected">
 	<div id="user-online-scroll" class="user-online">
 
-		<div class="title"><?php echo get_lang('Connected'); ?></div>
+		<div class="title"><?php echo get_lang('Users'); ?> <?php echo get_lang('Connected'); ?></div>
 		<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
 		<div class="viewport"><div id="hidden" class="overview">
 		<ul class="perfil list-group">
@@ -136,7 +137,7 @@ if (!empty($course)) {
 			</li>
 			<?php  } unset($users); ?>
 		</ul>
-	</div></div></div>
+	</div></div></div></div>
 	<?php
 }
 require 'footer_frame.inc.php';

main/css/chat.css

@@ -3,13 +3,12 @@ body{
 	font-size: 13px;
   	line-height: 18px;
   	color: #333333;
-  	background-color:#F5F5F5;
   	margin: 0;
   	padding: 0;
 }
 .page-chat{
 	padding: 10px;
-	background: #F5F5F5;
+	background: #2C2C2C;
 }
 #clear-chat{
 		position: absolute;
@@ -20,7 +19,7 @@ body{
         width:100px;
 }
 #content-chat{
-	background:#fff;
+	background:#3E3E3E;
 	padding: 30px;
 	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
@@ -32,14 +31,14 @@ textarea {
 	height: 100px;
 	float: left;
 	border: 0;
-	background-color: #fff; 
+	background-color: #434343; 
 	font-size: 0.75em;
 	font-family: Helvetica, arial, sans-serif;
 	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
 	border-radius: 10px;
-	border: 1px solid #CCCCCC;
+	border: 1px solid #434343;
-	color: #555555;
+	color: #BDBDBA;
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075) inset;
 }
 .message-student .chat-image, .message-teacher .chat-image{
@@ -51,17 +50,18 @@ textarea {
  	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
 	border-radius: 10px;
-	border:2px solid #D8D8D8;
+	border:2px solid #fff;
+	box-shadow: 1px 1px 10px #484848; 
  }
 .message-student .content-message{
-	background-color: #ffffff;
+	background-color: #FAEDCE;
-    color: #555555;
+    color: #000;
     padding: 10px;
     margin-bottom: 15px;
-    border-top: 1px solid #ECECEC;
+    border-top: 1px solid #FAEDCE;
-    border-left: 1px solid #ECECEC;
+    border-left: 1px solid #FAEDCE;
-    border-right: 1px solid #ECECEC;
+    border-right: 1px solid #FAEDCE;
-    border-bottom: 3px solid #ECECEC;
+    border-bottom: 1px solid #FAEDCE;
     border-radius: 10px;
 
 	display: inline-block;
@@ -78,7 +78,7 @@ textarea {
 	height: 0; 
 	border-top: 0px solid transparent;
 	border-bottom: 15px solid transparent;
-	border-left: 15px solid #DFF0D8;
+	border-left: 15px solid #F0E700;
 }
 .message-student .icon-message{
 	display: inline-block;
@@ -88,17 +88,17 @@ textarea {
 	height: 0; 
 	border-top: 0px solid transparent;
 	border-bottom: 15px solid transparent;
-	border-right: 15px solid white;
+	border-right: 15px solid #FAEDCE;
 }
 .message-teacher .content-message{
-	background-color: #DFF0D8;
+	background-color: #EFE856;
-    color: #468847;
+    color: #000;
     padding: 10px;
     margin-bottom: 15px;
-    border-top: 1px solid #D6E9C6;
+    border-top: 1px solid #EFE856;
-    border-left: 1px solid #D6E9C6;
+    border-left: 1px solid #EFE856;
-    border-right: 1px solid #D6E9C6;
+    border-right: 1px solid #EFE856;
-    border-bottom: 3px solid #D6E9C6;
+    border-bottom: 1px solid #EFE856;
     border-radius: 10px;
 	display: inline-block;
 	font-size: 13px;
@@ -130,24 +130,18 @@ textarea {
 	margin-bottom: 5px;
 }
 .user-online .perfil li a{
-	color: #666;
+	color: #fff;
 	text-decoration: none;
 }
 .user-online .title{
-	color: #fff;
+	background: url(chat.png) no-repeat 0 center;
-	padding: 5px;
+	color: #ffffff;
+	padding-top: 5px;
+	padding-left: 30px;
 	font-weight: bold;
 	font-size: 16px;
 	margin-bottom: 15px;
 	width: 90%;
-	background: #2a83bf; /* Old browsers */
-	background: -moz-linear-gradient(top, #2a83bf 0%, #216da8 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a83bf), color-stop(100%,#216da8)); /* Chrome,Safari4+ */
-	background: -webkit-linear-gradient(top, #2a83bf 0%,#216da8 100%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(top, #2a83bf 0%,#216da8 100%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(top, #2a83bf 0%,#216da8 100%); /* IE10+ */
-	background: linear-gradient(to bottom, #2a83bf 0%,#216da8 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a83bf', endColorstr='#216da8',GradientType=0 ); /* IE6-9 */
 }
 .delete-chat{
 	background: #F8F8F8;
@@ -162,13 +156,20 @@ textarea {
   display: block;
   padding: 10px 15px;
   margin-bottom: -1px;
-  background-color: #ffffff;
+  background-color: #3D3D3D;
-  border: 1px solid #dddddd;
+  border: 1px solid #3D3D3D;
+  -webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	border-radius: 10px;
+	color: #666;
 }
 li.list-group-item:hover, li.list-group-item:focus {
   text-decoration: none;
   background-color: #EEEEEE;
 }
+li.list-group-item:hover a{
+	color: #000;
+}
 .user-image-chat{
 	width: 40px;
  	height: auto;
@@ -192,27 +193,18 @@ li.list-group-item:hover, li.list-group-item:focus {
 .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
 
 .btn-enviar {
-	-moz-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
+	background: #fc585d; /* Old browsers */
-	-webkit-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
+	background: -moz-linear-gradient(top, #fc585d 0%, #fd3746 99%); /* FF3.6+ */
-	box-shadow:inset 0px 1px 0px 0px #c1ed9c;
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fc585d), color-stop(99%,#fd3746)); /* Chrome,Safari4+ */
-	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
+	background: -webkit-linear-gradient(top, #fc585d 0%,#fd3746 99%); /* Chrome10+,Safari5.1+ */
-	background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
+	background: -o-linear-gradient(top, #fc585d 0%,#fd3746 99%); /* Opera 11.10+ */
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
+	background: -ms-linear-gradient(top, #fc585d 0%,#fd3746 99%); /* IE10+ */
-	background-color:#9dce2c;
+	background: linear-gradient(to bottom, #fc585d 0%,#fd3746 99%); /* W3C */
-	-webkit-border-top-left-radius:10px;
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc585d', endColorstr='#fd3746',GradientType=0 ); /* IE6-9 */
-	-moz-border-radius-topleft:10px;
+	-webkit-border-radius: 15px;
-	border-top-left-radius:10px;
+	-moz-border-radius: 15px;
-	-webkit-border-top-right-radius:10px;
+	border-radius: 15px;
-	-moz-border-radius-topright:10px;
+	border:1px solid #FD3746;
-	border-top-right-radius:10px;
-	-webkit-border-bottom-right-radius:10px;
-	-moz-border-radius-bottomright:10px;
-	border-bottom-right-radius:10px;
-	-webkit-border-bottom-left-radius:10px;
-	-moz-border-radius-bottomleft:10px;
-	border-bottom-left-radius:10px;
-	text-indent:0;
-	border:1px solid #83c41a;
 	display:inline-block;
 	color:#ffffff;
 	font-family:Arial;
@@ -224,15 +216,23 @@ li.list-group-item:hover, li.list-group-item:focus {
 	width:131px;
 	text-decoration:none;
 	text-align:center;
-	text-shadow:1px 1px 0px #689324;
 	cursor: pointer;
 }
 .btn-enviar:hover {
-	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c) );
+	opacity: 0.8;
-	background:-moz-linear-gradient( center top, #8cb82b 5%, #9dce2c 100% );
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c');
-	background-color:#8cb82b;
 }.btn-enviar:active {
 	position:relative;
 	top:1px;
 }
+.emoticons-chat img{
+  width: 24px;
+  border: none;
+}
+.message-form-chat{
+	margin-top: 20px;
+	padding: 10px;
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	border-radius: 10px;
+	background: #3D3D3D;
+}

main/inc/lib/course_home.lib.php

@@ -143,7 +143,7 @@ class CourseHome
                 if (strpos($tool['name'], 'visio_') !== false) {
                     $cell_content .= '<a  href="javascript: void(0);" onclick="javascript: window.open(\''.$tool['link'].$link_annex.'\',\'window_visio'.$_SESSION['_cid'].'\',config=\'height=\'+730+\', width=\'+1020+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$tool['target'].'"><img src="'.$tool['img'].'" title="'.$tool_name.'" alt="'.$tool_name.'" align="absmiddle" border="0">'.$tool_name.'</a>';
                 } elseif (strpos($tool['name'], 'chat') !== false && api_get_course_setting('allow_open_chat_window')) {
-                    $cell_content .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.$tool['link'].$link_annex.'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+540+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$tool['target'].'"><img src="'.$tool['img'].'" title="'.$tool_name.'" alt="'.$tool_name.'" align="absmiddle" border="0">'.$tool_name.'</a>';
+                    $cell_content .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.$tool['link'].$link_annex.'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$tool['target'].'"><img src="'.$tool['img'].'" title="'.$tool_name.'" alt="'.$tool_name.'" align="absmiddle" border="0">'.$tool_name.'</a>';
                     // don't replace img with display::return_icon because $tool['img'] = api_get_path(WEB_IMG_PATH).$tool['img']
                 } else {
                     $cell_content .= '<a href="'.$tool['link'].$link_annex.'" target="'.$tool['target'].'"><img src="'.$tool['img'].'" title="'.$tool_name.'" alt="'.$tool_name.'" align="absmiddle" border="0">'.$tool_name.'</a>';
@@ -155,7 +155,7 @@ class CourseHome
                     if (strpos($tool['name'], 'visio_') !== false) {
                         $cell_content .= '<a  href="javascript: void(0);" onclick="window.open(\''.$tool['link'].$link_annex.'\',\'window_visio'.$_SESSION['_cid'].'\',config=\'height=\'+730+\', width=\'+1020+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$tool['target'].'"><img src="'.str_replace(".gif", "_na.gif", $tool['img']).'" title="'.$tool_name.'" alt="'.$tool_name.'" align="absmiddle" border="0">'.$tool_name.'</a>';
                     } elseif (strpos($tool['name'], 'chat') !== false && api_get_course_setting('allow_open_chat_window')) {
-                        $cell_content .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.$tool['link'].$link_annex.'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+540+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$tool['target'].'" class="invisible"><img src="'.str_replace(".gif", "_na.gif", $tool['img']).'" title="'.$tool_name.'" alt="'.$tool_name.'" align="absmiddle" border="0">'.$tool_name.'</a>';
+                        $cell_content .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.$tool['link'].$link_annex.'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$tool['target'].'" class="invisible"><img src="'.str_replace(".gif", "_na.gif", $tool['img']).'" title="'.$tool_name.'" alt="'.$tool_name.'" align="absmiddle" border="0">'.$tool_name.'</a>';
                         // don't replace img with display::return_icon because $tool['img'] = api_get_path(WEB_IMG_PATH).$tool['img']
                     } else {
                         $cell_content .= '<a href="'.$tool['link'].$link_annex.'" target="'.$tool['target'].'" class="invisible">
@@ -318,7 +318,7 @@ class CourseHome
                 if (strpos($tool['name'], 'visio_') !== false) {
                     $html .= '<a  '.$class.' href="javascript: void(0);" onclick="javascript: window.open(\''.htmlspecialchars($tool['link']).(($tool['image'] == 'external.gif' || $tool['image'] == 'external_na.gif') ? '' : $qm_or_amp.api_get_cidreq()).'\',\'window_visio'.$_SESSION['_cid'].'\',config=\'height=\'+730+\', width=\'+1020+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$tool['target'].'">';
                 } elseif (strpos($tool['name'], 'chat') !== false && api_get_course_setting('allow_open_chat_window')) {
-                    $html .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.htmlspecialchars($tool['link']).$qm_or_amp.api_get_cidreq().'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+540+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$tool['target'].'"'.$class.'>';
+                    $html .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.htmlspecialchars($tool['link']).$qm_or_amp.api_get_cidreq().'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$tool['target'].'"'.$class.'>';
                 } else {
                     $html .= '<a href="'.htmlspecialchars($tool['link']).(($tool['image'] == 'external.gif' || $tool['image'] == 'external_na.gif') ? '' : $qm_or_amp.api_get_cidreq()).'" target="'.$tool['target'].'" '.$class.'>';
                 }
@@ -731,7 +731,7 @@ class CourseHome
                     $tool_link_params = array('id' => 'tooldesc_'.$tool["id"],
                         'class' => $class,
                         'href' => 'javascript: void(0);',
-                        'onclick' => 'javascript: window.open(\''.$tool['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+540+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')', //Chat Open Windows
+                        'onclick' => 'javascript: window.open(\''.$tool['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')', //Chat Open Windows
                         'target' => $tool['target']);
                 } else {
                     if (count(explode('type=classroom', $tool['link'])) == 2 || count(explode('type=conference', $tool['link'])) == 2) {
@@ -1033,7 +1033,7 @@ class CourseHome
                 $url_current = parse_url($_SERVER['REQUEST_URI']);
 
                 if (strpos($navigation_item['link'], 'chat') !== false && api_get_course_setting('allow_open_chat_window', $course_id)) {
-                    $html .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.$navigation_item['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+540+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$navigation_item['target'].'"';
+                    $html .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.$navigation_item['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$navigation_item['target'].'"';
                 } else {
                     $html .= '<a href="'.$navigation_item['link'].'" target="_top" ';
                 }
@@ -1075,7 +1075,7 @@ class CourseHome
 
             foreach ($navigation_items as $key => $navigation_item) {
                 if (strpos($navigation_item['link'], 'chat') !== false && api_get_course_setting('allow_open_chat_window')) {
-                    $html .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.$navigation_item['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+540+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$navigation_item['target'].'"';
+                    $html .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.$navigation_item['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$navigation_item['target'].'"';
                 } else {
                     $html .= '<a href="'.$navigation_item['link'].'"';
                 }