Оформление сообщений в зависимости от пола автора
Страница 1 из 1
Оформление сообщений в зависимости от пола автора
1. Общий принцип работы
Данный туториал поможет вам оформить сообщения на форуме в зависимости от пола их авторов.
Чтобы предложенный здесь способ сработал на вашем форуме, необходимо, чтобы поле "Пол" показывалось в профиле в сообщениях, и обязательно в виде иконки или иконки и текста, а не только текста:
Принцип действия таков: мы добавим новые классы CSS (fa_postbody_xy для мужчин и fa_postbody_xx для женщин), чтобы связать корпус сообщения с полом, указанным в профиле сообщения, и с помощью этих новых классов сможем управлять оформлением сообщений.
2. Установка скрипта Javascript
Создайте новый файл Javascript :
ПА - Модули - HTML & Javascript - Управление кодами Javascript
Название : любое по вашему желанию
Расположение: в темах
Код Javascript :
Внимание: Для правильной работы этого скрипта необходимо указать версию вашего форума, отредактировав переменную version, которая может принимать значения phpBB2, phpBB3, punBB и Invision.
3. Настройка CSS
Для примера мы дадим здесь код CSS, позволяющий применить разные цвета для фона сообщений в зависимости от пола их авторов. Этот код использует 2 класса, добавленных нами выше посредством скрипта Javascript.
Возможности настройки с помощью CSS разнообразны и зависят от ваших умений и воображения
ПА - Оформление - Картинки и цвета - Цвета - Каскадная таблица стилей CSS
4. Результат :
© Данный туториал разработан командой форума поддержки FOROACTIVO.COM и в частности пользователем Turbodeif. Любая публикация этого материала без разрешения администрации help.forum2x2.ru запрещается.
Данный туториал поможет вам оформить сообщения на форуме в зависимости от пола их авторов.
Чтобы предложенный здесь способ сработал на вашем форуме, необходимо, чтобы поле "Пол" показывалось в профиле в сообщениях, и обязательно в виде иконки или иконки и текста, а не только текста:
Принцип действия таков: мы добавим новые классы CSS (fa_postbody_xy для мужчин и fa_postbody_xx для женщин), чтобы связать корпус сообщения с полом, указанным в профиле сообщения, и с помощью этих новых классов сможем управлять оформлением сообщений.
2. Установка скрипта Javascript
Создайте новый файл Javascript :
ПА - Модули - HTML & Javascript - Управление кодами Javascript
Название : любое по вашему желанию
Расположение: в темах
Код Javascript :
- Код:
$(function() {
//Укажите здесь версию вашего форума!
var version = "phpBB3";
if(version.toLowerCase() == "phpbb2"){
$(".postdetails img[title='Мужчина']").closest('.postdetails').parent('td').next('td').addClass("fa_postbody_xy");
$(".postdetails img[title='Женщина']").closest('.postdetails').parent('td').next('td').addClass("fa_postbody_xx");
}else if(version.toLowerCase() == "phpbb3"){
$(".postprofile img[title='Мужчина']").closest('.postprofile').prev('.postbody').addClass("fa_postbody_xy");
$(".postprofile img[title='Женщина']").closest('.postprofile').prev('.postbody').addClass("fa_postbody_xx");
}else if(version.toLowerCase() == "punbb"){
$(".user-info img[title='Мужчина']").closest('.postmain').addClass("fa_postbody_xy");
$(".user-info img[title='Женщина']").closest('.postmain').addClass("fa_postbody_xx");
}else if(version.toLowerCase() == "invision"){
$(".postprofile img[title='Мужчина']").closest('.post-container').addClass("fa_postbody_xy");
$(".postprofile img[title='Женщина']").closest('.post-container').addClass("fa_postbody_xx");
}
});
Внимание: Для правильной работы этого скрипта необходимо указать версию вашего форума, отредактировав переменную version, которая может принимать значения phpBB2, phpBB3, punBB и Invision.
3. Настройка CSS
Для примера мы дадим здесь код CSS, позволяющий применить разные цвета для фона сообщений в зависимости от пола их авторов. Этот код использует 2 класса, добавленных нами выше посредством скрипта Javascript.
Возможности настройки с помощью CSS разнообразны и зависят от ваших умений и воображения
ПА - Оформление - Картинки и цвета - Цвета - Каскадная таблица стилей CSS
- Код:
.fa_postbody_xy{
background-color: #87CEEB;
min-height: 500px;
}
.fa_postbody_xx {
background-color: #DDA0DD;
min-height: 500px;
}
4. Результат :
© Данный туториал разработан командой форума поддержки FOROACTIVO.COM и в частности пользователем Turbodeif. Любая публикация этого материала без разрешения администрации help.forum2x2.ru запрещается.
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
|
|