Индивидуальная иконка в описании темы

---

---

Как это выглядит:


Данная "уловка" всё-таки требует определенной аккуратности, поэтому рассчитана не на пользователей, а на админов, которые смогут корректно добавлять ссылку + текст для любой темы

Для начала убедимся, что у нас включены описания тем. ПА > Общие настройки > Сообщения и E-mail - Конфигурация > Показывать описание тем : Да

Шаг 1. Добавляем скрипт.

Отправляемся в ПА > Оформление > Шаблоны > Общие настройки - topics_list_box (Показ тем) и в самом его верху добавляем следующий скрипт:

Код:

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery('.dessk').each(function () {
        var titl_link= $(this).children('.privs').children('.ixer').attr('title');
        $(this).children('.tuy').prepend(titl_link);
    });
});
</script>

Сохраняем и публикуем (!) шаблон.

Что он делает: в каждом блоке с классом "dessk" находит изображение с классом "ixer" и копирует его описание из атрибута title, а затем вставляет это описание в свободный блок "tuy" рядом с изображением.

Шаг 2. Изменяем функционал поля описания

Теперь нам надо создать те самые объекты "dessk", "ixer" и т.д.
В этом же шаблоне находим и заменяем строку

Код:

 {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}

на

Код:

<div class="dessk"><div class="privs"><img src={topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} alt="" class="ixer" /></div><div class="tuy"></div></div>

Сохраняем и публикуем (!) шаблон.

Что мы сделали: превратили строку с текстом описания во внутренний код изображения. Теперь то, что мы будем вводить в поле "Описание темы" после публикации темы будет подставляться в атрибут src (ссылки на иконку).

Шаг 3. Защищаем поле "Описание темы" от постороннего доступа

Отправляемся в шаблон Запостить & Личные сообщения > posting_body (Страница отправки сообщений)

Для BB3, Pun и IPB:
Находим фрагмент

Код:

<!-- BEGIN switch_description -->
 <dl>
 <dt><label>{L_DESCRIPTION}</label></dt>
 <dd class="frm-input">
 <input type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
 </dd>
 </dl>
<!-- END switch_description -->

и заменяем на

Код:

<!-- BEGIN switch_description -->
 <dl class="mask_des" style="display: none;">
 <dt><label>{L_DESCRIPTION}</label></dt>
 <dd class="frm-input">
 <input type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
 </dd>
 </dl>
<!-- END switch_description -->

Для BB2:
Находим фрагмент

Код:

<!-- BEGIN switch_description -->
<tr>
<td class="row1" width="22%"><span class="gen"><b>{L_DESCRIPTION}</b></span></td>
<td class="row2" width="78%">
<span class="gen">
<input class="post" style="width:450px" type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
</span>
</td>
</tr>
<!-- END switch_description -->

и заменяем на

Код:

<!-- BEGIN switch_description -->
<tr>
<td class="row1 mask_des" style="display: none" width="22%"><span class="gen"><b>{L_DESCRIPTION}</b></span></td>
<td class="row2 mask_des" style="display: none" width="78%"><span class="gen">
<input class="post" style="width:450px" type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
</span>
</td>
</tr>
<!-- END switch_description -->

Сохраняем, публикуем (!). Теперь по-умолчанию поле "Описание" при создании/ редактировании темы будет скрыто. Для всех.

Для администраторского доступа к полю мы создадим виджет со специальными правами доступа "только для администраторов", и поместим туда код, снимающий маскировку с "Описания":

Для Pun

Код:

<style type="text/css">
.mask_des {
display: block !important
}
</style>

Для BB2

Код:

<style type="text/css">
.mask_des {
display: table-cell !important
}
</style>

Сохраняем виджет и не забываем поместить его в активированную колонку на главной странице.

Если у Вас вообще не отображается поле "описание" — включите его в ПА > Общие настройки > Сообщения и E-mail - Конфигурация > Показывать описание тем : Да

Шаг 4. Разбираемся, как это работает.

При создании темы данные из поля "Описание" будут превращаться в часть кода изображения. Поэтому вместо обычного описания надо добавлять один из двух кодов.

Вариант 1 - просто ссылку на иконку

При желании на нее можно нанести текст описания (методом фотошопографии):



Вариант 2 - ссылку на иконку + описание. Для этого потребуется cледующая конструкция:

Код:

http://i33.servimg.com/u/f33/17/37/83/89/min0210.png title="Внимание! Как вы относитесь к новой политике форума?"

где ссылка — это иконка, которая появится в описании темы
а данные из title (Внимание! Как вы относитесь к новой политике форума?) — собственно, описание, которое встанет рядом с иконкой


Само собой, длина такого "описания" ограничена внутренними настройками форума. Поэтому, если количество знаков превысит лимит, часть текста просто "съестся":


Вот он — обрыв текста, выделен оранжевым. Если такое произошло, уменьшите длину ссылки на изображение (можно воспользоваться сокращателем goo.gl, например) или подкорректируйте текст.

Надо ли после этого придумывать тексты и иконки для ВСЕХ тем?

Нет. Добавлять иконки на ВСЕ темы необязательно. Если оставить поле "Описание" пустым, то и возле темы ничего не появится.



Можно добавлять особые иконки только избранным темам, а на остальные поставить общую, стандартную картинку?

Да. Добавьте в CSS следующий фрагмент:

Код:

/* стандартная иконка в описании темы */
.privs {
background: #fff url(http://i70.servimg.com/u/f70/17/37/83/89/status10.png) center no-repeat;
}

Ссылку https://i.servimg.com/u/f70/17/37/83/89/status10.png замените на свою иконку

В описании обычной темы используйте стандартную картинку-пустышку:

Код:

http://illiweb.com/fa/empty.gif

А в описание "избранной" темы поставьте индивидуальную иконку (ссылка на неё для примера сокращена через goo.gl):


Результат:


Шаг 5. Оформление с помощью CSS

Тут всё на ваш вкус
Для примера: чтобы сделать такое же оформление как на скриншотах в туториале, добавьте в CSS —

Код:

/* контейнер с иконкой в описании темы */
.privs {
background-color: #fff;
width: 66px; /* макс. ширина картинки */
height: 66px; /* макс. высота картинки */
margin-right: 5px;
float: left;
}

/* настройки иконки в описании темы */
.privs img {
background-color: #fff;
border: 1px solid #ACF5B2;
border-radius: 6px;
}

/* убрать обрамление с пустой иконки */
.privs img[src*="empty"] {
border: none;
}

/* оформление всего блока с описанием темы */
.dessk {
border: 1px solid #ACF5B2;
border-radius: 6px;
width: 95%;
min-height: 70px;
padding: 5px;
}