Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» ВПНавтор Raumt Вчера в 13:51
» Дублируется ссылка на форум в боковом меню
автор Чистый сталкер Октябрь 26th 2024, 21:13
» совет админам
автор лексей2222 Октябрь 23rd 2024, 05:45
» Проблема с гугл из-за Hitskin
автор Вултур Октябрь 21st 2024, 15:43
» [решено]Редактирвоание темы
автор AlexDarkTech Октябрь 13th 2024, 08:14
» Пропали иконки редактирования - HEEELP
автор Archaea Сентябрь 23rd 2024, 18:11
» Как загружать ролики и мультики по ссылкам напрямую
автор лексей2222 Сентябрь 14th 2024, 19:22
» Интернет адрес форума
автор Mierena Сентябрь 7th 2024, 15:24
» некоторые форумы долго загружаются
автор Raumt Сентябрь 6th 2024, 15:06
» На форуме Пропали кнопки модерации тем
автор лексей2222 Август 16th 2024, 22:36
Индивидуальная иконка в описании темы
Страница 1 из 1
Индивидуальная иконка в описании темы
Индивидуальная иконка в описании темы
Как это выглядит:
Данная "уловка" всё-таки требует определенной аккуратности, поэтому рассчитана не на пользователей, а на админов, которые смогут корректно добавлять ссылку + текст для любой темы
Для начала убедимся, что у нас включены описания тем. ПА > Общие настройки > Сообщения и 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>
- Код:
<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://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;
}
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения