Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Каталог стилей » Интересные решения для форумов

Интересные решения для форумов

Страница: 1

Сообщений 1 страница 11 из 11

1

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

http://se.uploads.ru/KCUmQ.png

На сервисе размещено невероятное количество форумов. Кому-то важен контент, кому-то стиль, а кому-то и то, и другое. Есть форумы каждый год (а то и ранее) меняющие свой стиль оформления на новый, не обращая внимания на простые мелочи: кнопки, ссылки, рейтинг, профиль, иконки и т.д., совершенно забыв о них. Хотя вы и увидите красивый дизайн, но однообразные элементы управления портят всю красоту. Всё, что будет представлено в этой теме, мало кто делал на форумах MyBB, а если и делал, то не делился этим.

Эти уникальные мелочи придадут форумам частичку современности, эффективность, продуктивность и удобства пользования. К сожалению, многие из представленных решений не подойдут для старых браузеров, хоть я и постарался в силу своих знаний и умений сделать кроссбраузернее.

Как устанавливать?
Все коды, представленные в теме, написаны на CSS. Копируете код и, в зависимости от того, каким образом у вас оформлен форум, вставляете по месту. Если используете свой стиль оформления, а не один из стандартных, вставлять в Администрирование - Свой стиль, в самый низ первого поля. Если используете один из стандартных стилей, вставлять в Администрирование - Настройки - Основное - поле HTML-верх. Перед вставкой код обязательно обернуть в теги <style> и </style>, пример:

<style>
  здесь код из темы
</style>

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

У меня возникли вопросы!
Прошу не задавать вопросы по оформлению в этой теме. Все вопросы автоматически будут перемещены в соответствующую тему раздела "Вопросы по оформлению форума", поэтому, будет проще и вам, и мне, если вы сразу создадите тему в том разделе, указав ссылку на сообщение из этой темы.

Содержание

+6

2

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

1. Появление/исчезание ссылок в посте
http://se.uploads.ru/t/eu5fR.png
При наведении курсора на пост, ссылки "Профиль", "ЛС", "E-mail", "Удалить", "Редактировать" и "Цитировать" появляются. При отведении курсора от поста, ссылки затухают и становятся еле заметными. Это сделано для того, чтобы ссылки лишний раз не отвлекали внимание пользователя от содержания темы, появляясь лишь при необходимости. Особенно хорошо смотрится на маленьких постах с использованием горизонтального профиля. Такие способы скрытия элементов управления используют современные сайты (тот же Вконтакте скрывает кнопку "Это спам", показывая её только при наведении на сообщение).
Кто таки не понял о чем речь, посмотрите пример:

Пример (4Мб)

http://se.uploads.ru/t/NKwVp.gif

Код:
/* Появление/исчезание ссылок в посте */
.post-links a {
  filter: alpha(opacity=25);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  -moz-opacity: 0.25;
  -khtml-opacity: 0.25;
  opacity: 0.25;

  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
}
.post:hover .post-links a {
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -moz-opacity: 1.0;
  -khtml-opacity: 1.0;
  opacity: 1.0;
}

+2

3

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

2. Полезность поста
http://se.uploads.ru/7Rjfe.png
На мой взгляд одно из интереснейших решений. Стилизация рейтинга поста — своего рода ребрединг. Чем хороша такая система отношений? Во-первых, для ресурсов, занимающихся поддержкой пользователей (как например наш ЕТП), это отличный способ оценки ответа на поставленные вопросы. То есть не будет "минусов", будет несогласие пользователя с ответом. Во-вторых, как известно, вопрос/ответ всегда считался эффективным способом управления, не даром админка сервиса интуитивно понятна.

Код:
/* Полезность поста */
.post-vote {
  display: block !important;
  position: relative;
}
.post-vote .container {
  background: transparent !important;
  padding: 0 !important;
}
.post-rating p.container {
  background: #8d8d8d !important;
  font-weight: 700;
  padding: 2px 7px!important;
  display: inline-block;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.post-rating p.container a {
  color: #fff;
  font-size: 11px !important;
}
.post-vote p.container {
  margin-right: 0 !important;
}
.post-vote p.container:before {
  content: "Полезное сообщение?";
  position: relative;
  top: 4px;
  right: 32px;
}
.post-vote .container a {
  font-size: 0!important;
  margin: 0!important;
}
.post-vote .container a:first-child:after,
.post-vote .container a:first-child:before,
.post-vote .container a:last-child:before {
  display: inline-block;
  position: relative;
  font-size: 13px;
}
.post-vote .container a:first-child:before {
  content: "Да";
  right: 24px;
  top: 2px;
  color: #2b805d;
  border-bottom: 1px solid #cadcd5;
}
.post-vote .container a:first-child:after {
  content: "/";
  right: 16px;
  top: 2px;
}
.post-vote .container a:last-child:before {
  content: "Нет";
  right: 10px;
  top: 2px;
  color: #b42222;
  border-bottom: 1px solid #bd9393;
}

Не хотите портить карму? И не нужно! Благодаря "недоработке" рейтинга (а может специально так задумано) посетителю в уважение не ставится отрицательная репутация в профиль, тем самым давая безграничную возможность остальным пользователям в полной мере оценивать старания пользователей без негативных эмоций и ответных реакций на них. Чтобы "минус" не заносился в профиль, идем в Администрирование - Настройки - Система отношений - Тип оценок, выставляем "Только плюсы".
http://se.uploads.ru/J39BT.png

+5

4

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

3. Индикатор активности пользователя (обновлено 27.08.2016)
Сколько же картинок было придумано для аналогичного скрипта. Их минус в том, что они не выводят информацию о времени активности пользователя. Я сделал немного иначе — при наведении на значок "Онлайн", появляется время активности пользователя на форуме. Новая версия стилизована под всплывающие подсказки, универсальна для горизонтальных профилей (независимо от местоположения строки "Активен" в Администрирование - Поля профиля).

Старая версия
http://se.uploads.ru/1VBP3.png

Новая версия
http://s2.uploads.ru/1RIXd.png

Код:
/* Индикатор активности пользователя */
.post .post-author ul {
  position: relative;
}
.pa-online {
  position: absolute;
  display: inline-block !important;
  top: 3px;
  right: 6px;
  background: #8db13e !important;
  height: 10px;
  width: 10px;
  margin: 0 0 0 -5px !important;
  padding: 0 !important;
  border: 0 !important;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.pa-online:hover {
  background: #b3d568 !important;
}
.pa-online:hover strong {
  opacity: 1.0;
  visibility: visible;
}
.pa-online strong {
  position: absolute;
  top: 18px;
  right: -6px;
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
  background: rgba(0, 0, 0, 0.7);
  font-weight: 400;
  white-space: nowrap;
  color: #fff;
  font-size: 90%;
  text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
  text-align: center;
  z-index: 10;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  transition: all .2s ease;
  opacity: 0;
  visibility: hidden;
}
.pa-online strong:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  right: 6px;
  top: -10px;
  border-width: 5px 5px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
}

Меняйте позиции top и left, перемещая значок на нужное место.

+2

5

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

4. Горизонтальный профиль (обновлено 31.08.2016)

Новая версия
http://s6.uploads.ru/t/wAdTD.png

На моем форуме такой вид отображения профиля стоит уже года 3-4. Не было такого, чтобы я пожалел о решении сделать профиль горизонтальным. Это действительно удобно! Удобно читать содержимое поста, когда левая колонка не маячит, а текст развернут во всю ширину. К тому же это немного раскрасит представления об однообразии форумов.

Код:
/* Горизонтальный профиль */
.post-body {
  margin: 0 !important;
  border-style: none solid !important;
  border-width: 0 1px !important;
  width: 100% !important;
}
.post h3 span {
  position: relative !important;
  float: right !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
}
.post h3 strong, .post .permalink {
  position: absolute !important;
  right: 0;
}
.post h3 strong {
  cursor: default;
  top: 13px;
  font-weight: 400 !important;
  font-size: 250% !important;
  width: initial !important;
  color: #dbdbdb !important;
}
.post h3 strong:before {
  content: "#";
}
.post h3 span a:link, .post h3 span a:visited {
  font-weight: 400;
  text-decoration: none;
  color: #777;
  border-bottom: 1px solid #dbdbdb;
  font-style: italic;
}
.post h3 strong, .post h3 span a {
  margin-right: 8px !important;
}
.post .permalink {
  top: 46px;
  margin-right: 8px;
  font-size: 80% !important;
  white-space: nowrap;
  z-index: 6;
}
.post-author li {
  display: inline-block;
  margin: .4em;
}
.post-author ul {
  border: none;
  width: 85%;
}
.post-author ul, .post-author p {
  height: 48px;
  padding: 6px !important;
  line-height: inherit !important;
}
.post-author {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: inherit !important;
}
.post-author .pa-avatar {
  float: left;
  margin: 0;
}
.post-author .pa-avatar img {
  margin: -6px 6px 0 -6px;
  width: 60px;
  height: 60px;
  background-color: #fff;
  vertical-align: top;
  border: none;
}
.post-author .pa-online {
  background: #4caf50;
  margin: 0 !important;
  padding: 0 !important;
  height: 8px;
  width: 8px;
  border-radius: 50%;
}
.post-author .pa-online strong {
  font-size: 0;
}
.post-author .pa-respect span {
  background: #dee8c3;
  color: #5c7c09;
  text-shadow: none;
  padding: 3px 6px;
}
.post-author .pa-time-visit br {
  display: none;
}

Переходим к настройкам: Администрирование - Поля профиля.
Перемещаем поля в нужном вам порядке. Аватарку лучше всего переместить в самое начало, ведь именно визуально человек всегда обращает внимание на аватарку, а уже затем на имя и прочую информацию. Настоятельно рекомендую отключить неиспользуемые или малоиспользуемые поля, например "Откуда", "Приглашения", "Пол", "Возраст", "Позитив", "Последний визит" и, особенно, "Провел на форуме" (в противном случае готовитесь получить неожиданный результат). В зависимости от разрешения монитора и ширины форума не помешало бы и убрать длиннющее поле "Зарегистрирован".

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

Старая версия
http://se.uploads.ru/t/MK0Hs.png

Старая версия
Код:
/* Горизонтальный профиль */
.post-author {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: inherit !important;
}
.post-author ul {
  border-bottom: 1px solid #e0e0e0;
  height: 20px;
  padding: 6px;
}
.post-author li {
  display: inline-block !important;
  margin-right: 8px;
}
.post h3 span {
  float: right;
  margin: 0 !important;
  border-left: 0 !important;
}
.post-body {
  margin: 0 !important;
}
.post-author .pa-avatar img {
  max-height: 32px;
  max-width: 32px;
  vertical-align: middle;
}

+2

6

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

5. Оформление страницы профиля
http://se.uploads.ru/t/uDlvt.png
Стоит признать, нынешнее оформление профилей пользователей на сервисе устарело, при этом к блокам и элементам профиля никак не привяжешь индивидуальный стили и не изменишь их позиции, из-за чего страницы профилей вытесняются на последнее место. Надоели скучные и однообразные сетки профилей? Представляю вашему вниманию новое отображение профилей пользователей!

Код:
#profile-left {
  width: 20% !important;
}
#profile-left li {
  text-align: center;
  margin: 0 !important;
}
#viewprofile li strong, #profile-left li div {
  background: transparent !important;
}
#profile-left #profile-name strong, #profile-left #profile-title strong {
  color: #fff !important;
}
#profile-left #profile-name {
  background: #4c9b72;
  border-bottom: 1px solid #3c7958;
}
#viewprofile li strong {
  display: block;
  font-weight: 400 !important;
  padding: 6px 1em;
}
#profile-left #profile-title {
  background-color: #448a65;
  border-top: 1px solid #56ab7e;
}
#profile-left li img {
  background: #fff;
  margin-top: 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
#profile-left li:nth-child(3) {
  background: #eff7f3;
  border-top: 1px solid #3c7958;
}
#profile-left li:last-child {
  background: #eff7f3;
  border-bottom: 4px solid #4c9b72;
}
#profile-right {
  position: relative;
  right: -4px;
}
#profile-right li {
  display: inline-block !important;
  background: #f5f5f5;
  border-left: 4px solid #eee;
  margin-bottom: 4px !important;
  padding: 0 !important;
  width: 32% !important;
}
#viewprofile li span {
  float: none !important;
  display: inline-block;
  font-weight: 700;
  padding: 10px 10px 5px;
  margin: 0 0 10px;
}
#profile-right li strong {
  font-size: 16px;
  line-height: 1.1;
  padding: 0 10px 10px !important;
}
#profile-right li strong a {
  text-decoration: none;
  border-bottom: 1px solid #ccc;
  color: #292929;
  font-size: 13px;
}

Сетка автоматически подстраивается под размер страницы. Осталось сменить только цвета на свои.

+6

7

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

6. Компактная форма ответа с красивыми кнопками
http://se.uploads.ru/t/CRtj5.png
Еще одно универсальное решение — убирает надпись "Напишите ваше сообщение и нажмите отправить" и компонует кнопки в зависимости от ширины страницы. Теперь форма ответа смотрится лаконично ;)

Код:
/* Красивые кнопки в форме ответа  */
#form-buttons {
  display: inline-block;
  width: 60%;
  max-width: 700px;
  min-width: 600px;
  border: 1px solid #c9d9e9;
  border-left-width: 0;
  background-color: #e3ecf3;
  background-image: url(http://forumupload.ru/uploads/0007/af/57/14152-4.png);
  background-repeat: repeat-x;
}
#form-buttons table {
  width: 100% !important;
}
#form-buttons td {
  border-left: 1px solid #c9d9e9 !important;
  border-right: 1px solid #f3f7fa !important;
}
#form-buttons td:hover {
  background-color: #f5f8fb;
}
#form-buttons td:active {
  background-color: #c9d9e9;
  -moz-box-shadow: inset 1px 1px 5px #92a9c1;
  -webkit-box-shadow: inset 1px 1px 5px #92a9c1;
  box-shadow: inset 1px 1px 5px #92a9c1;
}

/* Компактная форма ответа  */
#post {
  margin: 0;
  padding: 0;
}
#post fieldset {
  border: none;
}
#post legend {
  display: none;
}
#post .formsubmit {
  padding: 0 18px 18px 18px;
  margin: 0 !important;
}

Если не нужна "компактность", удаляем всё что расположено ниже строчки /* Компактная форма ответа  */

+5

8

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

7. Описание категорий
http://se.uploads.ru/SEcMx.png
Не помню, публиковал ли кто описание категорий на CSS, но на JS точно есть описание категорий от Duka, собственно, от скрипта я и решил отказаться в пользу стиля. Если выложу, думаю, лишним точно не будет.

Данное решение позволяет вывести описание к каждой отдельной категории. Множим строчку выделенную курсивом столько раз, сколько нужно. Красным — меняем цифру на номер категории сверху по счету, к которой делаем описание. Синим — текст описания категории.

/* Описание под названием категории */
.category h2:after {
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
}

#pun-category1 h2:after {
  content: "Описание для первой категории";
}
#pun-category2 h2:after {
  content: "Описание для второй категории";
}

Особенность этого решения состоит в том, что описание можно делать как под названием категории, так и над ним:
http://se.uploads.ru/G1ZTn.png

/* Описание над названием категории */
.category h2:before {
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
}

#pun-category1 h2:before {
  content: "Описание для первой категории над названием категории";
}
#pun-category2 h2:before {
  content: "Описание для второй категории над названием категории";
}

У этого решения существуют серьезная проблема: при перестроении категорий необходимо будет менять и их номер по счету (то есть менять красную цифру). Поэтому настоятельно рекомендуется использовать это решение только на готовом сформировавшемся форуме, где не требуется частое перестроение и создание новых категорий.

+3

9

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

8. Делаем иконки статуса тем/форумов одной картинкой (спрайтом)
http://sh.uploads.ru/t/r8jv1.png

Лирическое отступление

Давно собирался поделится с сообществом данным хаком, поэтому изначально предполагалось сделать что-то наподобие урока, но в последствии засомневался из-за сложности создания и использования таких иконок в дальнейшем. К счастью, сейчас на тему создания картинок-спрайтов в интернете размещено огромное количество уроков, и при необходимости, кому надо будет, тот для себя отыщет и изучит. А для остальных предлагаю, так сказать, готовое решение с описанием.

Кто-то наверняка знает, но не использует либо в силу своей лени, либо оно ему незачем . Не сказать, что эта идея инновационная, но кардинально отличается от всех тех представлений, которые вы видели раньше на этом форуме. Так вдруг данный хак подтолкнет наших "фотошоперов" к созданию новых иконок по данному эскизу?!

Хоть на форуме тех.поддержки и полно ответов на тему своих иконок, но многие забывают, что помимо основных иконок тем (в теме есть новые сообщения/нет новых сообщений), тема так же может быть закреплена и в ней могут быть новые сообщения. Или тема может быть вовсе закрытой, а в ней могут быть новые сообщения. А еще круче - закрепленная закрытая тема и в ней есть новые сообщения (оставленные, к примеру, администраторами или модераторами).

Вместо 4-8 отдельных иконок используется всего одна. К сожалению, без минусов использования данного хака не обойтись: при замене иконки на другую каждый раз придется редактировать в фотошопе, высчитывая местоположение иконки (а то и нескольких иконок), и затем снова загружать на форум. Единственной иконки которой здесь нет - иконка форума "переадресация на URL", поскольку эти иконки я делал лет 5 назад специально для своего форума. Несмотря на все сложности создания и редактирования иконок, можете использовать мои иконки у себя на форуме.

http://forumstatic.ru/files/0007/af/57/44444.png
8 типов иконок в одной картинке (слева на право):
- Обычная открытая тема, Нет новых сообщений;
- Обычная открытая тема, Есть новые сообщения;
- Обычная закрытая тема, Нет новых сообщений;
- Обычная закрытая тема, Есть новые сообщения;
- Важная открытая тема, Нет новых сообщений;
- Важная открытая тема, Есть новые сообщения;
- Важная закрытая тема, Нет новых сообщений;
- Важная закрытая тема, Есть новые сообщения.

Спрайт размером 288px в ширину и 28px в высоту.
Каждая иконка в спрайте имеет размер ~36px в ширину и 28px в высоту.
В коде разметил комментарии: где и для какой иконки используется позиционирование.

/* Иконки форумов одной картинкой */
div.icon {
  display: inline-block;
  width: 36px !important;
  height: 28px !important;
  background-image: url(http://forumstatic.ru/files/0007/af/57/44444.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}

/* Обычная открытая тема - Есть новые сообщения */
.inew .icon {
  background-position: -36px 0;
}

/* Обычная закрытая тема - Нет новых сообщений */
.iclosed .icon {
  background-position: -74px 0;
}

/* Обычная закрытая тема - Есть новые сообщения */
.inew.iclosed .icon {
  background-position: -108px 0;
}

/* Важная открытая тема - Нет новых сообщений */
.isticky .icon {
  background-position: -144px 0;
}

/* Важная открытая тема - Есть новые сообщения */
.inew.isticky .icon {
  background-position: -180px 0;
}

/* Важная закрытая тема - Нет новых сообщений */
.isticky.iclosed .icon {
  background-position: -216px 0;
}

/* Важная закрытая тема - Есть новые сообщения */
.inew.isticky.iclosed .icon {
  background-position: -252px 0;
}

Зеленым обозначена картинка (если надумаете создать свои иконки).

+1

10

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

9. Компактная вертикальная навигация в профиле и личных сообщениях (обновлено 5.08.2020)
Данное решение видоизменяет навигационное меню на страницах в профиле и личных сообщениях, делая его компактным - каждый отдельный пункт меню в виде соответствующей иконки.
https://i4.imageban.ru/out/2020/08/05/9d931a3f5b813911cd5f5911cd40c161.png http://s6.uploads.ru/t/SuWbI.png
Создавал и подбирал иконки максимально подходящими для понимания при первом взгляде. Тестировал на нескольких форумах сервиса. После недели использования, с админами провели опрос - жалоб на недопонимание иконок пользователями не было (разве что поначалу использования). Проверил на нескольких стандартных стилях (в том числе новых). В коде указал комментарии для смены цвета активного пункта меню и спрайтов.

В связи с недавним видоизменением профиля (и по поступившим просьбам мне в ЛС) актуализировал код, обновил некоторые иконки. Спрайт пересобран в новый вид.

Код:
/* Вертикальное меню в профиле и сообщениях */
#profile > .container {
  padding: 1em 1em 1em 0 !important;
}
#profilenav {
  float: left;
  display: inline-block;
  width: 42px;
  margin: 0 1em 0;
  z-index: 10;
}
#profilenav ul, #profilenav li {
  padding: 0;
  margin: 0;
}
#profilenav h2 {
  display: none;
}
#profilenav ul {
  border: 1px solid #dbdbdb;
  background: #ebebeb;
  margin-bottom: 1em;
  width: 42px;
}
#profilenav ul li {
  border-bottom: 1px solid #dbdbdb;
}
#profilenav ul li:last-child {
  border-bottom: 0;
}
#profilenav li a {
  display: block;
  height: 0;
  width: 0;
  padding: 21px;
  color: transparent;
  text-decoration: none !important;
  text-indent: -9999px;
  z-index: 1;
  border-radius: 0;
  box-shadow: none;
}
#profilenav li a:hover {
  line-height: 0;
  padding-left: 50px;
}
#profilenav li a:hover, #nav-standard li a:hover, #pun-adnav li a:hover {
  text-decoration: none !important;
}
#profilenav ul li a:hover {
  position: relative;
  padding-right: 120px;
  color: #fff;
  text-indent: 0;
}
#pun-profile #profilenav ul li a, #pun-messages #profilenav ul li a {
  background-repeat: no-repeat;
}
 
/* Цвет при наведении и активного пункта */
#profilenav li.isactive a, #profilenav ul li a:hover {
  background-color: #4c9b72;
  box-shadow: none;
  border: 0;
}
/* Спрайт для Профиль */
#pun-profile #profilenav ul li a {
  background-image: url(https://forumstatic.ru/files/0007/af/57/65555.png);
}
/* Спрайт для Сообщения */
#pun-messages #profilenav ul li a {
  background-image: url(https://forumstatic.ru/files/0007/af/57/55565.png);
}
 
/* Входящие / Просмотр */
#pun-messages #profilenav ul .item1 a {
  background-position: 0 0;
}
#pun-profile #profilenav ul .view a:hover, #pun-profile #profilenav ul .view.isactive a, #pun-messages #profilenav ul .item1.isactive a, #pun-messages #profilenav ul .item1 a:hover {
  background-position: -42px 0;
}
/* -- */
/* Отправленные */
#pun-messages #profilenav ul .item2 a {
  background-position: 0 -42px;
}
#pun-messages #profilenav ul .item2.isactive a, #pun-messages #profilenav ul .item2 a:hover {
  background-position: -42px -42px;
}
/* -- */
/* Новое сообщение */
#pun-messages #profilenav ul:last-child .item1 a {
  background-position: 0 -84px;
}
#pun-messages #profilenav ul:last-child .item1.isactive a, #pun-messages #profilenav ul:last-child .item1 a:hover {
  background-position: -42px -84px;
}
/* -- */
/* Статус / Аватар */
#pun-messages #profilenav ul:last-child .item2 a {
  background-position: 0 -126px;
}
#pun-messages #profilenav ul:last-child .item2.isactive a, #pun-messages #profilenav ul:last-child .item2 a:hover {
  background-position: -42px -126px;
}
/* -- */
/* Всё прочитано */
#pun-messages #profilenav ul:last-child .item3 a {
  background-position: 0 -168px;
}
#pun-messages #profilenav ul:last-child .item3.isactive a, #pun-messages #profilenav ul:last-child .item3 a:hover {
  background-position: -42px -168px;
}
/* -- */
/* Очистить папку */
#pun-messages #profilenav ul:last-child .item4 a {
  background-position: 0 -210px;
}
#pun-messages #profilenav ul:last-child .item4.isactive a, #pun-messages #profilenav ul:last-child .item4 a:hover {
  background-position: -42px -210px;
}
/* -- */
/* - Начало Профиль - */
/* Основной */
#pun-profile #profilenav ul .item1 a {
  background-position: 0 -42px;
}
#pun-profile #profilenav ul .item1 a:hover, #pun-profile #profilenav ul .item1.isactive a {
  background-position: -42px -42px;
}
/* -- */
/* Персональный */
#pun-profile #profilenav ul .item2 a {
  background-position: 0 -84px;
}
#pun-profile #profilenav ul .item2 a:hover, #pun-profile #profilenav ul .item2.isactive a {
  background-position: -42px -84px;
}
/* -- */
/* Общения */
#pun-profile #profilenav ul .item3 a {
  background-position: 0 -126px;
}
#pun-profile #profilenav ul .item3 a:hover, #pun-profile #profilenav ul .item3.isactive a {
  background-position: -42px -126px;
}
/* -- */
/* Аватар */
#pun-profile #profilenav ul .item4 a {
  background-position: 0 -168px;
}
#pun-profile #profilenav ul .item4 a:hover, #pun-profile #profilenav ul .item4.isactive a {
  background-position: -42px -168px;
}
/* -- */
/* Подпись */
#pun-profile #profilenav ul .item5 a {
  background-position: 0 -210px;
}
#pun-profile #profilenav ul .item5 a:hover, #pun-profile #profilenav ul .item5.isactive a {
  background-position: -42px -210px;
}
/* -- */
/* Отображения */
#pun-profile #profilenav ul .item6 a {
  background-position: 0 -252px;
}
#pun-profile #profilenav ul .item6 a:hover, #pun-profile #profilenav ul .item6.isactive a {
  background-position: -42px -252px;
}
/* -- */
/* Приватность */
#pun-profile #profilenav ul .item7 a {
  background-position: 0 -294px;
}
#pun-profile #profilenav ul .item7 a:hover, #pun-profile #profilenav ul .item7.isactive a {
  background-position: -42px -294px;
}
/* -- */
/* Дополнительно */
#pun-profile #profilenav ul .item8 a {
  background-position: 0 -336px;
}
#pun-profile #profilenav ul .item8 a:hover, #pun-profile #profilenav ul .item8.isactive a {
  background-position: -42px -336px;
}
/* -- */
/* Приглашения */
#pun-profile #profilenav ul .item9 a {
  background-position: 0 -378px;
}
#pun-profile #profilenav ul .item9 a:hover, #pun-profile #profilenav ul .item9.isactive a {
  background-position: -42px -378px;
}
/* -- */
/* Загрузки */
#pun-profile #profilenav ul .item10 a {
  background-position: 0 -420px;
}
#pun-profile #profilenav ul .item10 a:hover, #pun-profile #profilenav ul .item10.isactive a {
  background-position: -42px -420px;
}
/* -- */
/* Управление */
#pun-profile #profilenav ul .item11 a {
  background-position: 0 -462px;
}
#pun-profile #profilenav ul .item11 a:hover, #pun-profile #profilenav ul .item11.isactive a {
  background-position: -42px -462px;
}
/* -- */
/* - Конец Профиль - */

Светлая версия
https://i5.imageban.ru/out/2020/08/05/111cd4b410e77019a3cd7176bf94072a.png

Код
Код:
<style>
/* Вертикальное меню в профиле и сообщениях */
#profile > .container {
  padding: 1em 1em 1em 0 !important;
}
#profilenav {
  float: left;
  display: inline-block;
  width: 42px;
  margin: 0 1em 0;
  z-index: 10;
}
#profilenav ul, #profilenav li {
  padding: 0;
  margin: 0;
}
#profilenav h2 {
  display: none;
}
#profilenav ul {
  border: 1px solid #dbdbdb;
  background: #ebebeb;
  margin-bottom: 1em;
  width: 42px;
}
#profilenav ul li {
  border-bottom: 1px solid #dbdbdb;
}
#profilenav ul li:last-child {
  border-bottom: 0;
}
#profilenav li a {
  display: block;
  height: 0;
  width: 0;
  padding: 21px;
  color: transparent;
  text-decoration: none !important;
  text-indent: -9999px;
  z-index: 1;
  border-radius: 0;
  box-shadow: none;
}
#profilenav li a:hover {
  line-height: 0;
  padding-left: 50px;
}
#profilenav li a:hover, #nav-standard li a:hover, #pun-adnav li a:hover {
  text-decoration: none !important;
}
#profilenav ul li a:hover {
  position: relative;
  padding-right: 120px;
  color: #757575;
  text-indent: 0;
}
#pun-profile #profilenav ul li a, #pun-messages #profilenav ul li a {
  background-repeat: no-repeat;
}
 
/* Цвет при наведении и активного пункта */
#profilenav li.isactive a, #profilenav ul li a:hover {
  background-color: #fff;
  box-shadow: none;
  border: 0;
}
/* Спрайт для Профиль */
#pun-profile #profilenav ul li a {
  background-image: url(https://forumstatic.ru/files/0007/af/57/65555.png);
}
/* Спрайт для Сообщения */
#pun-messages #profilenav ul li a {
  background-image: url(https://forumstatic.ru/files/0007/af/57/55565.png);
}
 
/* Входящие / Просмотр */
#pun-messages #profilenav ul .item1 a {
  background-position: 0 0;
}
#pun-profile #profilenav ul .view a:hover, #pun-profile #profilenav ul .view.isactive a, #pun-messages #profilenav ul .item1.isactive a, #pun-messages #profilenav ul .item1 a:hover {
  background-position: 0 0;
}
/* -- */
/* Отправленные */
#pun-messages #profilenav ul .item2 a {
  background-position: 0 -42px;
}
#pun-messages #profilenav ul .item2.isactive a, #pun-messages #profilenav ul .item2 a:hover {
  background-position: 0 -42px;
}
/* -- */
/* Новое сообщение */
#pun-messages #profilenav ul:last-child .item1 a {
  background-position: 0 -84px;
}
#pun-messages #profilenav ul:last-child .item1.isactive a, #pun-messages #profilenav ul:last-child .item1 a:hover {
  background-position: 0 -84px;
}
/* -- */
/* Статус / Аватар */
#pun-messages #profilenav ul:last-child .item2 a {
  background-position: 0 -126px;
}
#pun-messages #profilenav ul:last-child .item2.isactive a, #pun-messages #profilenav ul:last-child .item2 a:hover {
  background-position: 0 -126px;
}
/* -- */
/* Всё прочитано */
#pun-messages #profilenav ul:last-child .item3 a {
  background-position: 0 -168px;
}
#pun-messages #profilenav ul:last-child .item3.isactive a, #pun-messages #profilenav ul:last-child .item3 a:hover {
  background-position: 0 -168px;
}
/* -- */
/* Очистить папку */
#pun-messages #profilenav ul:last-child .item4 a {
  background-position: 0 -210px;
}
#pun-messages #profilenav ul:last-child .item4.isactive a, #pun-messages #profilenav ul:last-child .item4 a:hover {
  background-position: 0 -210px;
}
/* -- */
/* - Начало Профиль - */
/* Основной */
#pun-profile #profilenav ul .item1 a {
  background-position: 0 -42px;
}
#pun-profile #profilenav ul .item1 a:hover, #pun-profile #profilenav ul .item1.isactive a {
  background-position: 0 -42px;
}
/* -- */
/* Персональный */
#pun-profile #profilenav ul .item2 a {
  background-position: 0 -84px;
}
#pun-profile #profilenav ul .item2 a:hover, #pun-profile #profilenav ul .item2.isactive a {
  background-position: 0 -84px;
}
/* -- */
/* Общения */
#pun-profile #profilenav ul .item3 a {
  background-position: 0 -126px;
}
#pun-profile #profilenav ul .item3 a:hover, #pun-profile #profilenav ul .item3.isactive a {
  background-position: 0 -126px;
}
/* -- */
/* Аватар */
#pun-profile #profilenav ul .item4 a {
  background-position: 0 -168px;
}
#pun-profile #profilenav ul .item4 a:hover, #pun-profile #profilenav ul .item4.isactive a {
  background-position: 0 -168px;
}
/* -- */
/* Подпись */
#pun-profile #profilenav ul .item5 a {
  background-position: 0 -210px;
}
#pun-profile #profilenav ul .item5 a:hover, #pun-profile #profilenav ul .item5.isactive a {
  background-position: 0 -210px;
}
/* -- */
/* Отображения */
#pun-profile #profilenav ul .item6 a {
  background-position: 0 -252px;
}
#pun-profile #profilenav ul .item6 a:hover, #pun-profile #profilenav ul .item6.isactive a {
  background-position: 0 -252px;
}
/* -- */
/* Приватность */
#pun-profile #profilenav ul .item7 a {
  background-position: 0 -294px;
}
#pun-profile #profilenav ul .item7 a:hover, #pun-profile #profilenav ul .item7.isactive a {
  background-position: 0 -294px;
}
/* -- */
/* Дополнительно */
#pun-profile #profilenav ul .item8 a {
  background-position: 0 -336px;
}
#pun-profile #profilenav ul .item8 a:hover, #pun-profile #profilenav ul .item8.isactive a {
  background-position: 0 -336px;
}
/* -- */
/* Приглашения */
#pun-profile #profilenav ul .item9 a {
  background-position: 0 -378px;
}
#pun-profile #profilenav ul .item9 a:hover, #pun-profile #profilenav ul .item9.isactive a {
  background-position: 0 -378px;
}
/* -- */
/* Загрузки */
#pun-profile #profilenav ul .item10 a {
  background-position: 0 -420px;
}
#pun-profile #profilenav ul .item10 a:hover, #pun-profile #profilenav ul .item10.isactive a {
  background-position: 0 -420px;
}
/* -- */
/* Управление */
#pun-profile #profilenav ul .item11 a {
  background-position: 0 -462px;
}
#pun-profile #profilenav ul .item11 a:hover, #pun-profile #profilenav ul .item11.isactive a {
  background-position: 0 -462px;
}
/* -- */
/* - Конец Профиль - */
</style>
Старая версия (не актуальная)

http://s4.uploads.ru/t/cSCbZ.png http://s6.uploads.ru/t/SuWbI.png

Код:
/* Вертикальное меню в профиле и сообщениях */
#profile > .container {
  padding: 1em 1em 1em 0 !important;
}
#profilenav {
  float: left;
  display: inline-block;
  width: 42px;
  margin: 0 1em 0;
  z-index: 10;
}
#profilenav ul, #profilenav li {
  padding: 0;
  margin: 0;
}
#profilenav h2 {
  display: none;
}
#profilenav ul {
  border: 1px solid #dbdbdb;
  background: #ebebeb;
  margin-bottom: 1em;
}
#profilenav ul li {
  border-bottom: 1px solid #dbdbdb;
}
#profilenav ul li:last-child {
  border-bottom: 0;
}
#profilenav li a {
  display: block;
  height: 0;
  width: 0;
  padding: 20px;
  color: transparent;
  text-decoration: none !important;
  text-indent: -9999px;
  z-index: 1;
  border-radius: 0;
  box-shadow: none;
}
#profilenav li a:hover {
  line-height: 0;
  padding-left: 60px;
}
#profilenav li a:hover, #nav-standard li a:hover, #pun-adnav li a:hover {
  text-decoration: none !important;
}
#profilenav ul li a:hover {
  position: relative;
  padding-right: 140px;
  color: #fff;
  text-indent: 0;
}
#pun-profile #profilenav ul li a, #pun-messages #profilenav ul li a {
  background-repeat: no-repeat;
}

/* Цвет при наведении и активного пункта */
#profilenav li.isactive a, #profilenav ul li a:hover {
  background-color: #4c9b72;
}
/* Спрайт для Профиль */
#pun-profile #profilenav ul li a {
  background-image: url(https://forumstatic.ru/files/0007/af/57/65555.png);
}
/* Спрайт для Сообщения */
#pun-messages #profilenav ul li a {
  background-image: url(https://forumstatic.ru/files/0007/af/57/55565.png);
}

/* Входящие / Основной */
#pun-messages #profilenav ul .item1 a {
  background-position: 0 0;
}
#pun-profile #profilenav ul .item1 a:hover, #pun-profile #profilenav ul .item1.isactive a, #pun-messages #profilenav ul .item1.isactive a, #pun-messages #profilenav ul .item1 a:hover {
  background-position: -42px 0;
}
/* -- */
/* Отправленные / Персональный */
#pun-profile #profilenav ul .item2 a, #pun-messages #profilenav ul .item2 a {
  background-position: 0 -42px;
}
#pun-profile #profilenav ul .item2 a:hover, #pun-profile #profilenav ul .item2.isactive a, #pun-messages #profilenav ul .item2.isactive a, #pun-messages #profilenav ul .item2 a:hover {
  background-position: -42px -42px;
}
/* -- */
/* Новое сообщение / Общение */
#pun-profile #profilenav ul .item3 a, #pun-messages #profilenav ul:last-child .item1 a {
  background-position: 0 -84px;
}
#pun-profile #profilenav ul .item3 a:hover, #pun-profile #profilenav ul .item3.isactive a, #pun-messages #profilenav ul:last-child .item1.isactive a, #pun-messages #profilenav ul:last-child .item1 a:hover {
  background-position: -42px -84px;
}
/* -- */
/* Статус / Аватар */
#pun-profile #profilenav ul .item4 a, #pun-messages #profilenav ul:last-child .item2 a {
  background-position: 0 -126px;
}
#pun-profile #profilenav ul .item4 a:hover, #pun-profile #profilenav ul .item4.isactive a, #pun-messages #profilenav ul:last-child .item2.isactive a, #pun-messages #profilenav ul:last-child .item2 a:hover {
  background-position: -42px -126px;
}
/* -- */
/* Всё прочитано / Подпись */
#pun-profile #profilenav ul .item5 a, #pun-messages #profilenav ul:last-child .item3 a {
  background-position: 0 -168px;
}
#pun-profile #profilenav ul .item5 a:hover, #pun-profile #profilenav ul .item5.isactive a, #pun-messages #profilenav ul:last-child .item3.isactive a, #pun-messages #profilenav ul:last-child .item3 a:hover {
  background-position: -42px -168px;
}
/* -- */
/* Очистить папку / Отображение */
#pun-profile #profilenav ul .item6 a, #pun-messages #profilenav ul:last-child .item4 a {
  background-position: 0 -210px;
}
#pun-profile #profilenav ul .item6 a:hover, #pun-profile #profilenav ul .item6.isactive a, #pun-messages #profilenav ul:last-child .item4.isactive a, #pun-messages #profilenav ul:last-child .item4 a:hover {
  background-position: -42px -210px;
}
/* -- */
/* Приватность */
#pun-profile #profilenav ul .item7 a {
  background-position: 0 -252px;
}
#pun-profile #profilenav ul .item7 a:hover, #pun-profile #profilenav ul .item7.isactive a {
  background-position: -42px -252px;
}
/* -- */
/* Дополнительно */
#pun-profile #profilenav ul .item8 a {
  background-position: 0 -294px;
}
#pun-profile #profilenav ul .item8 a:hover, #pun-profile #profilenav ul .item8.isactive a {
  background-position: -42px -294px;
}
/* -- */
/* Приглашения */
#pun-profile #profilenav ul .item9 a {
  background-position: 0 -336px;
}
#pun-profile #profilenav ul .item9 a:hover, #pun-profile #profilenav ul .item9.isactive a {
  background-position: -42px -336px;
}
/* -- */
/* Загрузки */
#pun-profile #profilenav ul .item10 a {
  background-position: 0 -378px;
}
#pun-profile #profilenav ul .item10 a:hover, #pun-profile #profilenav ul .item10.isactive a {
  background-position: -42px -378px;
}
/* -- */
/* Управление */
#pun-profile #profilenav ul .item11 a {
  background-position: 0 -420px;
}
#pun-profile #profilenav ul .item11 a:hover, #pun-profile #profilenav ul .item11.isactive a {
  background-position: -42px -420px;
}
/* -- */

+9

11

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3418
  • Уважение: +2104
  • Позитив: +675
  • Пол: Мужской
  • Последний визит:
    Пн, 22 Апр 2024 13:50:55

10. Ссылка "Поделиться" в виде иконки в сообщении
После введения ссылки "Поделиться", на некоторых форумах, использующих собственное оформление, можно было увидеть разрыв стиля - это коснулось и моего форума. Я не знал куда девать эту ссылку или вовсе её скрыть. Пришлось заменить ссылку на иконку, сделав её ненавязчивой, ибо не так часто требуется публиковать что-то в соц. сетях.
http://s2.uploads.ru/t/vf4AT.png
По умолчанию иконка скрыта. При наведении курсора на сообщение, иконка появляется. При наведении курсора на иконку, всплывает соответствующая подсказка.
Иконку позиционируете в любом удобном месте сообщения.

Код:
/* Ссылка "Поделиться" иконкой */
.post {
  position: relative;
}
.post a.sharelink {
  top: 20px;     /* Позиция сверху сообщения */
  right: 1em;   /* Позиция справа сообщения */
  background: url(//forumstatic.ru/files/0007/af/57/25552.png) no-repeat center; /* Картинка на иконку */
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  border: 0!important;
  margin: 0!important;
  float: none!important;
  z-index: 5;
  text-indent: -9999px;
  text-decoration: none!important;
  border: none !important;
  outline: none;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
}
.post:hover .sharelink {
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -moz-opacity: 1.0;
  -khtml-opacity: 1.0;
  opacity: 1.0;
}
.post a.sharelink:hover::before {
  content: "Поделиться";
  position: absolute;
  display: block;
  top: -3px;
  right: 24px;
  height: 14px;
  font-size: 90%;
  color: #fff;
  white-space: nowrap;
  line-height: 14px;
  font-style: normal;
  text-indent: 0px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.post a.sharelink:hover::after {
  content: '';
  display: block;
  position: absolute;
  top: 3px;
  right: 14px;
  border: 5px solid;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.7);
}

+6

Страница: 1

Вы здесь » Единый форум поддержки » Каталог стилей » Интересные решения для форумов