Эпиграф в стиле tumblr (перевод windymind)
Автор: Deff
Кнопки-картинки(ссылки красным) ставим в нужное место перед нужной группой полей(Число кнопок, - Произвольное)
В HTML верх
<!-- HTML верх -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<style>img.post-img-Sp {margin:6px 3px;}
div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner{font-size:14px;letter-spacing:1px;}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/57844.js"></script>В HTML низ
<!-- HTML низ -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<script>
var a1 = 0 // 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 0 // 0 - Скрытие первой вкладки; 1 - Показ первой вкладки;
var a3 = 0 // Резкость Открытия: 0 - Плавно; 1 - Резко;var LiArr=new Array(
//При наличии двух косых => // в начале пункта, - пункт не скрывается.//"pa-author", //Ник-Нейм
//"pa-avatar", //Аватар
//"pa-title", //статус// 1 кнопка - ссылка на Картинку
//В квадратных скобках, прямо к ссылке можно добавить своё описание (по желанию)
"http://s3.uploads.ru/VymNB.png[Описание 1]","pa-reg", //Зарегистрирован
"pa-invites", //Приглашений
"pa-posts", //Кол-во сообщений:
"pa-respect", //Уважение:
"pa-positive", //Позитив
"pa-sex", //Пол
"pa-age", //Возраст
"pa-icq", //Аська
"pa-ip", //IP Юзера
"pa-time-visit", //Провел на форуме:
"pa-last-visit", //Последний визит:
//"pa-online", //Пользователь online - Не засовываем в спойлеры// 2 кнопка- ссылка на Картинку
"http://s3.uploads.ru/T7hLI.png",
"pa-from", //Откуда
"pa-fld1", //Доп.Поле.1// 3 кнопка- ссылка на Картинку
"http://s3.uploads.ru/VtGQ4.png","pa-fld2", //Доп.Поле.2
"pa-fld3", //Доп.Поле.3
"pa-fld4", //Доп.Поле.4
"pa-fld5", //Доп.Поле.5
//"award", //Награды(только для rusff и ork)
//"gift", //Подарки(только для rusff и ork)//Конец Списка,
"_End"); SetProvilSpoil(a1,a2,a3);
</script>
<!--Конец//=Cпойлер cкрытия Инфы под N-кнопок в Профиле Топик-->
В скрипте расположение Пунктов, установлено так же, как и по умолчанию на форумах mybb,
Пункты в списке - можно переставлять и оно независит от их начального положения.
Приведённый вариант, по дефолту, чуть быстрее, если поля не переставлялись в Админке,
в настройках "Поля Профиля", поскольку требует меньше времени на перестановки скриптом.
Пункт активен - //"pa-online" сейчас вытащен из спойлеров.
Для этого необходимо было поставить перед ним две косых //.(Это для последующих установок, к примеру скриптов: офлайн - онлайн картинкой, (аналогично можно вытащить из участия в спойлере и любой другой пункт
Пункты:
//"award", //Награды(только для rusff и ork)
//"gift", //Подарки(только для rusff и ork)
- Только для Quadro.Boards, - снимаем два наклонных слеша только для реально используемого(ых) пунктов.
*Награды и подарки удобнее ставить под последнюю кнопку, особенно если их много
Совет: При горизонтальном расположении кнопок, симпатичней их делать несколько длиннее
Для дизайнеров
Селектор для стиля вкладки ul.post-ul-Sp
Селектор для картинки-кнопки .post-img-Sp
Селектор aктивной кнопки .post-img-Sp.active
Селектор кнопки при наведении .post-img-Sp:hover
Селектор подсказки при наведении на кнопку div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner
Пояснения к DEMO:
В демке четыре сообщения, с разными вариантами оформления и начального срабатывания кнопок в профиле, в зависимости от установки параметров а1 и a2 *см. начало скрипта, в части, устанавливаемой в HTML низ
<!-- HTML верх - Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<style>img.post-img-Sp {
margin:1px;
padding:2px;
border:transparent 1px dashed;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
-ms-border-radius:4px;
border-radius:4px;
}
img.post-img-Sp.active {
border:#645850 1px dashed;
-webkit-box-shadow:0px 5px 18px #000;
-khtml-box-shadow:0px 5px 18px #000;
-moz-box-shadow:0px 5px 18px #000;
-ms-box-shadow:0px 5px 18px #000;
box-shadow: 0px 5px 18px #000;
}
</style>
