update tpl block and css social profile home

10 years ago · d76483535c
parent 9980e68ad7
commit d76483535c
5 changed files with 462 additions and 95 deletions
--- a/main/css/base.css
+++ b/main/css/base.css
@ -5591,4 +5591,376 @@ i.size-32.icon-new-work{
 }
 .badges-text{
  text-align: center;
-}
+}
+/* Social Profile */
+
+.social-avatar{
+  text-align: center;
+  padding-top: 10px;
+}
+.social-avatar .avatar-profile{
+  margin-bottom: 5px;
+}
+.social-avatar .lastname{
+  font-size: 18px;
+  font-weight: bold;
+  color: #4d4d4d;
+}
+.social-avatar .firstname{
+  font-size: 16px;
+  font-weight: bold;
+  color: #4d4d4d;
+  margin-bottom: 5px;
+}
+.social-avatar .edit-profile{
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+.social-search form{
+  margin-bottom: 0px;
+}
+.social-group{
+
+}
+/* deleted bootstrap 3 update */
+
+.panel {
+  margin-bottom: 20px;
+  background-color: #fff;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+}
+.panel-body {
+  padding: 15px;
+}
+.panel-heading {
+  padding: 10px 15px;
+  border-bottom: 1px solid transparent;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.panel-heading > .dropdown .dropdown-toggle {
+  color: inherit;
+}
+.panel-title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 16px;
+  color: inherit;
+}
+.panel-title > a,
+.panel-title > small,
+.panel-title > .small,
+.panel-title > small > a,
+.panel-title > .small > a {
+  color: inherit;
+}
+.panel-footer {
+  padding: 10px 15px;
+  background-color: #f5f5f5;
+  border-top: 1px solid #ddd;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.panel > .list-group,
+.panel > .panel-collapse > .list-group {
+  margin-bottom: 0;
+}
+.panel > .list-group .list-group-item,
+.panel > .panel-collapse > .list-group .list-group-item {
+  border-width: 1px 0;
+  border-radius: 0;
+}
+.panel > .list-group:first-child .list-group-item:first-child,
+.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
+  border-top: 0;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.panel > .list-group:last-child .list-group-item:last-child,
+.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
+  border-bottom: 0;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.panel-heading + .list-group .list-group-item:first-child {
+  border-top-width: 0;
+}
+.list-group + .panel-footer {
+  border-top-width: 0;
+}
+.panel > .table,
+.panel > .table-responsive > .table,
+.panel > .panel-collapse > .table {
+  margin-bottom: 0;
+}
+.panel > .table caption,
+.panel > .table-responsive > .table caption,
+.panel > .panel-collapse > .table caption {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+.panel > .table:first-child,
+.panel > .table-responsive:first-child > .table:first-child {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.panel > .table:first-child > thead:first-child > tr:first-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
+.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
+  border-top-left-radius: 3px;
+}
+.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
+.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
+  border-top-right-radius: 3px;
+}
+.panel > .table:last-child,
+.panel > .table-responsive:last-child > .table:last-child {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.panel > .table:last-child > tbody:last-child > tr:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
+.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
+  border-bottom-left-radius: 3px;
+}
+.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
+.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
+  border-bottom-right-radius: 3px;
+}
+.panel > .panel-body + .table,
+.panel > .panel-body + .table-responsive,
+.panel > .table + .panel-body,
+.panel > .table-responsive + .panel-body {
+  border-top: 1px solid #ddd;
+}
+.panel > .table > tbody:first-child > tr:first-child th,
+.panel > .table > tbody:first-child > tr:first-child td {
+  border-top: 0;
+}
+.panel > .table-bordered,
+.panel > .table-responsive > .table-bordered {
+  border: 0;
+}
+.panel > .table-bordered > thead > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
+.panel > .table-bordered > tbody > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
+.panel > .table-bordered > tfoot > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+.panel > .table-bordered > thead > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
+.panel > .table-bordered > tbody > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
+.panel > .table-bordered > tfoot > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+  border-left: 0;
+}
+.panel > .table-bordered > thead > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
+.panel > .table-bordered > tbody > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
+.panel > .table-bordered > tfoot > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+.panel > .table-bordered > thead > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
+.panel > .table-bordered > tbody > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
+.panel > .table-bordered > tfoot > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+  border-right: 0;
+}
+.panel > .table-bordered > thead > tr:first-child > td,
+.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
+.panel > .table-bordered > tbody > tr:first-child > td,
+.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
+.panel > .table-bordered > thead > tr:first-child > th,
+.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
+.panel > .table-bordered > tbody > tr:first-child > th,
+.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
+  border-bottom: 0;
+}
+.panel > .table-bordered > tbody > tr:last-child > td,
+.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
+.panel > .table-bordered > tfoot > tr:last-child > td,
+.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
+.panel > .table-bordered > tbody > tr:last-child > th,
+.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
+.panel > .table-bordered > tfoot > tr:last-child > th,
+.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
+  border-bottom: 0;
+}
+.panel > .table-responsive {
+  margin-bottom: 0;
+  border: 0;
+}
+.panel-group {
+  margin-bottom: 20px;
+}
+.panel-group .panel {
+  margin-bottom: 0;
+  border-radius: 4px;
+}
+.panel-group .panel + .panel {
+  margin-top: 5px;
+}
+.panel-group .panel-heading {
+  border-bottom: 0;
+}
+.panel-group .panel-heading + .panel-collapse > .panel-body,
+.panel-group .panel-heading + .panel-collapse > .list-group {
+  border-top: 1px solid #ddd;
+}
+.panel-group .panel-footer {
+  border-top: 0;
+}
+.panel-group .panel-footer + .panel-collapse .panel-body {
+  border-bottom: 1px solid #ddd;
+}
+.panel-default {
+  border-color: #ddd;
+}
+.panel-default > .panel-heading {
+  color: #333;
+  background-color: #f5f5f5;
+  border-color: #ddd;
+}
+.panel-default > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #ddd;
+}
+.panel-default > .panel-heading .badge {
+  color: #f5f5f5;
+  background-color: #333;
+}
+.panel-default > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #ddd;
+}
+.panel-primary {
+  border-color: #337ab7;
+}
+.panel-primary > .panel-heading {
+  color: #fff;
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+.panel-primary > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #337ab7;
+}
+.panel-primary > .panel-heading .badge {
+  color: #337ab7;
+  background-color: #fff;
+}
+.panel-primary > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #337ab7;
+}
+.panel-success {
+  border-color: #d6e9c6;
+}
+.panel-success > .panel-heading {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+.panel-success > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #d6e9c6;
+}
+.panel-success > .panel-heading .badge {
+  color: #dff0d8;
+  background-color: #3c763d;
+}
+.panel-success > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #d6e9c6;
+}
+.panel-info {
+  border-color: #bce8f1;
+}
+.panel-info > .panel-heading {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+.panel-info > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #bce8f1;
+}
+.panel-info > .panel-heading .badge {
+  color: #d9edf7;
+  background-color: #31708f;
+}
+.panel-info > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #bce8f1;
+}
+.panel-warning {
+  border-color: #faebcc;
+}
+.panel-warning > .panel-heading {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+.panel-warning > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #faebcc;
+}
+.panel-warning > .panel-heading .badge {
+  color: #fcf8e3;
+  background-color: #8a6d3b;
+}
+.panel-warning > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #faebcc;
+}
+.panel-danger {
+  border-color: #ebccd1;
+}
+.panel-danger > .panel-heading {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+.panel-danger > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: #ebccd1;
+}
+.panel-danger > .panel-heading .badge {
+  color: #f2dede;
+  background-color: #a94442;
+}
+.panel-danger > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: #ebccd1;
+}
+/* Deleted bootstrap 3 update */
--- a/main/inc/lib/social.lib.php
+++ b/main/inc/lib/social.lib.php
@ -614,22 +614,20 @@ class SocialManager extends UserManager
        $total_invitations = (!empty($total_invitations) ? Display::badge($total_invitations) : '');
        $showUserImage = user_is_online($user_id) || api_is_platform_admin();

-        $html = '<div>';
+        $html = '<div class="avatar-profile">';
        if (in_array($show, $show_groups) && !empty($group_id)) {
            //--- Group image
            $group_info = GroupPortalManager::get_group_data($group_id);
            $big = GroupPortalManager::get_picture_group($group_id, $group_info['picture_uri'], 160, GROUP_IMAGE_SIZE_BIG);

-            $html .= '<div class="social-content-image">';
-            $html .= '<div class="well social-background-content">';
+
            $html .= Display::url('<img src='.$big['file'].' class="social-groups-image" /> </a><br /><br />', api_get_path(WEB_CODE_PATH).'social/groups.php?id='.$group_id);
            if (GroupPortalManager::is_group_admin($group_id, api_get_user_id())) {
-                $html .= '<div id="edit_image" class="hidden_message" style="display:none">
+                $html .= '<div id="edit_image">
                            <a href="'.api_get_path(WEB_CODE_PATH).'social/group_edit.php?id='.$group_id.'">'.
                    get_lang('EditGroup').'</a></div>';
            }
-            $html .= '</div>';
-            $html .= '</div>';
+
        } else {
            if ($showUserImage) {
                $img_array = UserManager::get_user_picture_path_by_id($user_id, 'web', true, true);
@ -642,17 +640,13 @@ class SocialManager extends UserManager

            //--- User image

-            $html .= '<div class="well social-background-content">';
+
            if ($img_array['file'] != 'unknown.jpg') {
-                $html .= '<a class="thumbnail thickbox" href="'.$big_image.'"><img src='.$normal_image.' /> </a>';
+                $html .= '<a class="thickbox" href="'.$big_image.'"><img class="img-responsive" src='.$normal_image.' /> </a>';
            } else {
                $html .= '<img src='.$normal_image.' width="110px" />';
            }
-            if (api_get_user_id() == $user_id) {
-                $html .= '<div id="edit_image" class="hidden_message" style="display:none">';
-                $html .= '<a href="'.api_get_path(WEB_CODE_PATH).'auth/profile.php">'.get_lang('EditProfile').'</a></div>';
-            }
-            $html .= '</div>';
+
        }
        $html .= '</div>';
        return $html;
@ -729,7 +723,9 @@ class SocialManager extends UserManager
        $active = null;
        if (!in_array($show, array('shared_profile', 'groups', 'group_edit', 'member_list', 'waiting_list', 'invite_friends'))) {

-            $html .= '<div class="well sidebar-nav"><ul class="nav nav-list">';
+            $html .= '<div class="panel panel-info sidebar-nav">';
+            $html .= '<div class="panel-body">';
+            $html .= '<ul class="nav nav-list">';
            $active = $show == 'home' ? 'active' : null;
            $html .= '<li class="home-icon '.$active.'"><a href="'.api_get_path(WEB_CODE_PATH).'social/home.php">'.get_lang('Home').'</a></li>';
            $active = $show == 'messages' ? 'active' : null;
@ -754,8 +750,7 @@ class SocialManager extends UserManager
            //My files
            $active = $show == 'myfiles' ? 'active' : null;
            $html .= '<li class="myfiles-icon '.$active.'"><a href="'.api_get_path(WEB_CODE_PATH).'social/myfiles.php">'.get_lang('MyFiles').'</span></a></li>';
-            $html .='</ul>
-                  </div>';
+            $html .='</ul></div></div>';
        }

        if (in_array($show, $show_groups) && !empty($group_id)) {
--- a/main/inc/lib/usermanager.lib.php
+++ b/main/inc/lib/usermanager.lib.php
@ -3796,8 +3796,8 @@ class UserManager
        $searchType = isset($_GET['search_type']) ? $_GET['search_type'] : null;

        return '
-        <form method="GET" class="well form-search" action="'.api_get_path(WEB_PATH).'main/social/search.php">
-                <input placeholder="'.get_lang('UsersGroups').'" type="text" class="input-small" value="'.api_htmlentities(Security::remove_XSS($query)).'" name="q"/> &nbsp;
+        <form method="GET" class="form-search" action="'.api_get_path(WEB_PATH).'main/social/search.php">
+                <input placeholder="'.get_lang('UsersGroups').'" type="text" value="'.api_htmlentities(Security::remove_XSS($query)).'" name="q"/> &nbsp;
                ' . get_lang('Type') .'
                <select name="search_type" onchange="javascript: extra_field_toogle();">
                <option value="0">--'.get_lang('Select').'--</option>
--- a/main/social/home.php
+++ b/main/social/home.php
@ -83,59 +83,60 @@ if (api_get_setting('profile', 'picture') == 'true') {

 $user_info = UserManager :: get_user_info_by_id(api_get_user_id());

-$social_avatar_block = SocialManager::show_social_avatar_block('home');
-$social_menu_block = SocialManager::show_social_menu('home');
+$social_avatar_block = '<div class="panel panel-info social-avatar">';
+$social_avatar_block .= SocialManager::show_social_avatar_block('home');
+$social_avatar_block .= '<div class="lastname">'.$user_info['lastname'].'</div>';
+$social_avatar_block .= '<div class="firstname">'.$user_info['firstname'].'</div>';
+/* $social_avatar_block .= '<div class="username">'.Display::return_icon('user.png','','',ICON_SIZE_TINY).$user_info['username'].'</div>'; */
+$social_avatar_block .= '<div class="email">'.Display::return_icon('instant_message.png').'&nbsp;' .$user_info['email'].'</div>';
+$chat_status = $user_info['extra'];
+ if(!empty($chat_status['user_chat_status'])){
+     $social_avatar_block.= '<div class="status">'.Display::return_icon('online.png').get_lang('Chat')." (".get_lang('Online').')</div>';
+ }else{
+     $social_avatar_block.= '<div class="status">'.Display::return_icon('offline.png').get_lang('Chat')." (".get_lang('Offline').')</div>';
+ }
+
+    $editProfileUrl = api_get_path(WEB_CODE_PATH) . 'auth/profile.php';
+
+    if (api_get_setting('sso_authentication') === 'true') {
+        $subSSOClass = api_get_setting('sso_authentication_subclass');
+        $objSSO = null;
+
+        if (!empty($subSSOClass)) {
+            require_once api_get_path(SYS_CODE_PATH) . 'auth/sso/sso.' . $subSSOClass . '.class.php';
+
+            $subSSOClass = 'sso' . $subSSOClass;
+            $objSSO = new $subSSOClass();
+        } else {
+            $objSSO = new sso();
+        }

-$socialRightContent = '<div class="span5">';
-$socialRightContent .= '<div class="well_border">';
-$socialRightContent .= '<h3>' . get_lang('ContactInformation') . '</h3>';
-
-$list = array(
-    array(
-        'title' => get_lang('Name'),
-        'content' => api_get_person_name(
-            $user_info['firstname'],
-            $user_info['lastname']
-        )
-    ),
-    array('title' => get_lang('Email'), 'content' => $user_info['email']),
-);
-// information current user
-$socialRightContent .= '<div>' . Display::description($list) . '</div>';
-
-$editProfileUrl = api_get_path(WEB_CODE_PATH) . 'auth/profile.php';
-
-if (api_get_setting('sso_authentication') === 'true') {
-    $subSSOClass = api_get_setting('sso_authentication_subclass');
-    $objSSO = null;
-
-    if (!empty($subSSOClass)) {
-        require_once api_get_path(SYS_CODE_PATH) . 'auth/sso/sso.' . $subSSOClass . '.class.php';
-
-        $subSSOClass = 'sso' . $subSSOClass;
-        $objSSO = new $subSSOClass();
-    } else {
-        $objSSO = new sso();
+        $editProfileUrl = $objSSO->generateProfileEditingURL();
    }
+$social_avatar_block .= '<div class="edit-profile">
+                            <a class="btn" href="' . $editProfileUrl . '">' . get_lang('EditProfile') . '</a>
+                         </div>';
+$social_avatar_block .= '</div>';

-    $editProfileUrl = $objSSO->generateProfileEditingURL();
-}
+$social_menu_block = SocialManager::show_social_menu('home');

-$socialRightContent .= '
-    <div class="form-actions">
-    <a class="btn" href="' . $editProfileUrl . '">
-        ' . get_lang('EditProfile') . '
-    </a>
-    </div></div></div>';
-$socialRightInformation = '<div class="span4">';
+//Search box
+$social_search_block = '<div class="panel panel-info social-search">';
+$social_search_block .= '<div class="panel-heading">Busqueda de usuarios o grupos</div>';
+$social_search_block .= '<div class="panel-body">';
+$social_search_block.= UserManager::get_search_form('');
+$social_search_block.= '</div>';
+$social_search_block.= '</div>';
+
+//Skill
 if (api_get_setting('allow_skills_tool') == 'true') {
-    $socialRightInformation .= '<div class="well_border">';
+    $social_skill_block = '<div class="panel panel-info social-skill">';
+    $social_skill_block .= '<div class="panel-heading">' . get_lang('Skills') . '</div>';
+
    $skill = new Skill();
    $ranking = $skill->get_user_skill_ranking(api_get_user_id());
-
    $skills = $skill->get_user_skills(api_get_user_id(), true);

-    $socialRightInformation .= '<h3>' . get_lang('Skills') . '</h3>';
    $lis = '';
    if (!empty($skills)) {
        foreach ($skills as $skill) {
@ -162,8 +163,15 @@ if (api_get_setting('allow_skills_tool') == 'true') {
                )
            );
        }
-        $socialRightInformation .= Display::tag('ul', $lis, array('class' => 'menulist'));
+        $social_skill_block .= Display::tag('ul', $lis, array('class' => 'menulist'));
    }
+    //Colocar los botones anteriores
+}
+$social_skill_block.='</div>';
+
+
+
+/*
    $socialRightInformation .= '<div class="menulist">';
    if (api_is_student() || api_is_student_boss() || api_is_drh()) {
        $socialRightInformation .= Display::url(
@ -184,14 +192,13 @@ if (api_get_setting('allow_skills_tool') == 'true') {
    );
    $socialRightInformation .= '</div><br />';
 }
+*/


-//Search box
-$socialRightInformation .= '<div>';
-$socialRightInformation .= UserManager::get_search_form('');
-$socialRightInformation .= '<br /></div>';
-
 //Group box by age
+$social_group_block = '<div class="panel panel-info social-group">';
+$social_group_block .= '<div class="panel-heading">'.get_lang('Group').'</div>';
+$social_group_block .= '<div class="panel-body">';
 $results = GroupPortalManager::get_groups_by_age(1, false);

 $groups_newest = array();
@ -279,10 +286,8 @@ foreach ($results as $result) {
 }

 if (count($groups_newest) > 0) {
-    $socialRightInformation .= '<div class="social-groups-home-title">' . get_lang(
-            'Newest'
-        ) . '</div>';
-    $socialRightInformation .= Display::return_sortable_grid(
+    $social_group_block .= '<div class="group-title">' . get_lang('Newest') . '</div>';
+    $social_group_block .= Display::return_sortable_grid(
        'home_group',
        array(),
        $groups_newest,
@ -294,10 +299,8 @@ if (count($groups_newest) > 0) {
 }

 if (count($groups_pop) > 0) {
-    $socialRightInformation .= '<div class="social-groups-home-title">' . get_lang(
-            'Popular'
-        ) . '</div>';
-    $socialRightInformation .= Display::return_sortable_grid(
+    $social_group_block .= '<div class="group-title">' . get_lang('Popular') . '</div>';
+    $social_group_block .= Display::return_sortable_grid(
        'home_group',
        array(),
        $groups_pop,
@ -307,12 +310,13 @@ if (count($groups_pop) > 0) {
        array(true, true, true, true, true)
    );
 }
-$socialRightInformation .= '</div>';
+$social_group_block .= '</div></div>';

 $tpl = new Template(get_lang('SocialNetwork'));
 $tpl->assign('social_avatar_block', $social_avatar_block);
 $tpl->assign('social_menu_block', $social_menu_block);
-$tpl->assign('social_right_content', $socialRightContent);
-$tpl->assign('socialRightInformation', $socialRightInformation);
+$tpl->assign('social_search_block', $social_search_block);
+$tpl->assign('social_skill_block', $social_skill_block);
+$tpl->assign('social_group_block', $social_group_block);
 $social_layout = $tpl->get_template('social/home.tpl');
 $tpl->display($social_layout);
--- a/main/template/default/social/home.tpl
+++ b/main/template/default/social/home.tpl
@ -3,27 +3,23 @@
 {% block content %}
    <div class="row">
        <div class="span3">
-            <div class="social-menu">
            {{ social_avatar_block }}
+
+            <div class="social-menu">
            {{ social_menu_block }}
            </div>
        </div>
-        <div id="wallMessages" class="span5" style="min-height:1px">
-            <div class="row">
-                <div class="span5">
-                    <div id="message_ajax_reponse" class=""></div>
-                </div>
-            </div>
-            <div class="row">
-                {{ social_right_content}}
-            </div>
-            <div id="display_response_id" class="span5"></div>
+        <div class="span6">
+            {{ social_search_block }}
+            {{ social_skill_block }}
+            {{ social_group_block }}
+            <div id="message_ajax_reponse" class=""></div>
+            <div id="display_response_id"></div>
            {{ socialAutoExtendLink }}
        </div>
-        <div class="span4">
-            <div class="row">
-                {{ socialRightInformation}}
-            </div>
+        <div class="span3">
+
+            <div id="wallMessages" class="span5" style="min-height:1px"></div>
        </div>
    </div>
 {% endblock %}