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

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

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

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

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

Содержание
1. Появление/исчезание ссылок в посте

1. Появление/исчезание ссылок в посте

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

/* Появление/исчезание ссылок в посте */
.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 0;
  -moz-transition: all .2s ease 0;
  -o-transition: all .2s ease 0;
}
.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. Полезность поста
На мой взгляд одно из интереснейших решений. Стилизация рейтинга поста — своего рода ребрединг. Чем хороша такая система? Во-первых, для ресурсов, занимающихся исключительно поддержкой пользователей (как например наш ЕТП).

/* Полезность поста */
.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;
}

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

3. Индикатор активности пользователя
Сколько же картинок было придумано для скрипта. Я сделал немного иначе — скрыл информацию.

.pa-online {
  position: relative;
  display: inline-block !important;
  top: -6px;
  background: #8db13e;
  height: 10px;
  width: 10px;
  margin: 0 0 0 -5px !important;
  padding: 0 !important;
  border: 0 !important;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.pa-online:hover {
  background: #b3d568;
  -webkit-transition: all .2s ease 0;
  -moz-transition: all .2s ease 0;
  -o-transition: all .2s ease 0;
  transition: all .2s ease 0;
}
.pa-online:hover strong {
  opacity: 1.0;
  visibility: visible;
}
.pa-online strong {
  position: absolute;
  top: 23px;
  left: -22px;
  background: rgba(0, 0, 0, 0.7);
  font-weight: 400;
  width: 180px;
  color: #fff;
  font-size: 11px;
  text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
  height: 22px;
  line-height: 22px;
  text-align: center;
  -webkit-transition: all .2s ease 0;
  -moz-transition: all .2s ease 0;
  -o-transition: all .2s ease 0;
  transition: all .2s ease 0;
  opacity: 0;
  visibility: hidden;
}
.pa-online strong:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  top: -10px;
  border-width: 5px 5px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7);
}

Чтобы как можно ближе к имени.

4. Горизонтальный профиль

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

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

5. Оформление страницы профиля

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

#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. Описание категорий
Не помню, публиковал ли кто описание категорий на CSS. На JS есть, собственно, от него и решил отказаться в пользу стиля и легкости редактирования (да-да, именно легкости, по крайней мере для меня, т.к. все скрипты форума у меня расположены в нескольких файлах, тем самым разгружая HTML поля в админке). Если и выложу, думаю, лишним точно не будет.

Красным — меняем цифру на ID категории.
Синим — описание.