Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Dana Domirani в Пн 12 Авг - 4:53




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




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


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

Для начала убедимся, что у нас включены описания тем. ПА > Общие настройки > Сообщения и 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;
}
Ссылку http://i70.servimg.com/u/f70/17/37/83/89/status10.png замените на свою иконку

В описании обычной темы используйте стандартную картинку-пустышку:
Код:
http://illiweb.com/fa/empty.gif


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


Результат:


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

Тут всё на ваш вкус smile
Для примера: чтобы сделать такое же оформление как на скриншотах в туториале, добавьте в 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;
}



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22300
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8959

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения