Аватар возле последнего сообщения

Всем Привет, Помогите оформить как на скрине, красиво выглядит очень. Спасибо за все советы.

Красиво, но средствами сторонних скриптов это будет сильно перегружать главную страницу.

ну если возможно помогите,

Вариант для BB2

1. Для начала надо будет включить доступ гостей к просмотру профилей (иначе неоткуда будет загружать аватары). ПА > Пользователи > Особые права доступа > Посмотреть профиль : Гости
Если этого не сделать, то для гостей аватары отображаться не будут.

2. В шаблоне index_box (Главная страница - показ категорий) замените

Код:

   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>

на

Код:

<tr>
<th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>

Чуть ниже замените:

Код:

<td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

на

Код:

      <td class="row3" align="right" valign="middle">
                  <div style="width: 120px"><span class="gensmall">{catrow.forumrow.TOPICS} тем</span><br /><span class="gensmall">{catrow.forumrow.POSTS} сообщений</span></div>
      </td>
      <td class="row3 over" align="left" valign="middle">
                  <div class="avs" style="width: 220px"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>

Сохраните и опубликуйте (!) измененный шаблон, нажав на

3. В CSS добавьте настройки для превью аватара:

Код:

.avs a.inx img {
  float: left;
  width: 40px;
  height: 40px;
  padding: 1px;
  border: 1px solid #DDD;
  margin: 0 5px;
  -webkit-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
}

4. В ПА > Модули > Управление кодами JS
укажите "Активировать управление кодами Javascript :да"
и создайте новый файл
Название : аватары на главной
Расположение : в оглавлении
Код Javascript :

Код:

$(document).on('ready', function() {
    $('.forumline tr .row3.over .avs').each(function () {
        var touser = $(this).children('span').children('span').children('strong').children('a').attr('href');
        $(this).prepend('<a href="' + touser + '" class="inx"><img src="http://i34.servimg.com/u/f34/16/54/26/99/female10.png" alt="нет аватара" /></a>');
        $(this).children('a').load(touser + ' .forumline .row1.gensmall[align="center"]:eq(0) img:eq(0)');
    });
});

Сохраните.

спасибо, Дана) думал очень сильно будет нагружать страничку, вроде нормально.

Только один баг, мне кажется если страничку во время ее обновления, не прокрутить до конца, показывает не все аватарки.

Случайно не аватар Vlad_Chepurnoi ?
https://7img.net/users/1515/23/97/50/avatars/gallery/nfs10.jpg

У меня он и в отдельном окне не загружается.

вот.

а у влада слетела была аватарка, наверное, я ему уже поставил.

Загрузилось достаточно шустро:

какой браузер используете?

спасибо еще раз отличная система.

Проверяла Хромом и Оперой.

Dana Domirani пишет:Проверяла Хромом и Оперой.

проверил в хроме, отлично, видимо мозила не очень. Тема идеальная думаю для интересных решений

Вариант для Pun

1. Проверить, чтобы в ПА > Пользователи и группы > Профили — Общие настройки было указано Активировать развернутый профиль : Да

2. В шаблоне index_box (Главная страница - показ категорий) заменить:

Код:

<td class="tcr">
      <span>
      <!-- BEGIN switch_topic_title -->
      <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
      <!-- END switch_topic_title -->
      {catrow.forumrow.USER_LAST_POST}
      </span>
</td>

на

Код:

<td class="tcr">
      <div class="avs"><span>
      <!-- BEGIN switch_topic_title -->
      <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
      <!-- END switch_topic_title -->
      {catrow.forumrow.USER_LAST_POST}
      </span></div>
</td>

Сохранить, опубликовать (!)

3. В CSS добавить

Код:

.avs a.inx img {
  float: left;
  width: 40px;
  height: 40px;
  padding: 1px;
  border: 1px solid #DDD;
  margin: 0 5px;
  -webkit-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
}

Сохранить.

4. В ПА > Модули > Управление кодами JS
указать "Активировать управление кодами Javascript :да"
и создать новый файл
Название : аватары на главной
Расположение : в оглавлении
Код Javascript :

Код:

$(document).on('ready', function() {
    $('.avs').each(function () {
        var touser = $(this).children('span').children('strong').children('a').attr('href');
        $(this).prepend('<a href="' + touser + '" class="inx"><img src="http://i34.servimg.com/u/f34/16/54/26/99/female10.png" alt="нет аватара" /></a>');
        $(this).children('a').load(touser + ' div.main-content.clearfix.center img:eq(0)');
    });
});