FAQ Инструкции для XenForo

Пользователь · Регистрация: 12.09.2010

Тут выкладываем инструкции для XenForo

Изменение стиля ссылок

PHP код:



a {

  display: inline-block;

  padding: 4px;

  outline: 0;

  color: #3a599d;

  -webkit-transition-duration: 0.25s;

  -moz-transition-duration: 0.25s;

  -o-transition-duration: 0.25s;

  transition-duration: 0.25s;

  -webkit-transition-property: -webkit-transform;

  -moz-transition-property: -moz-transform;

  -o-transition-property: -o-transform;

  transition-property: transform;

  -webkit-transform: scale(1) rotate(0);

  -moz-transform: scale(1) rotate(0);

  -o-transform: scale(1) rotate(0);

  transform: scale(1) rotate(0);

}

a:hover {

  background: #3a599d;

  text-decoration: none;

  color: #fff;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  -o-border-radius: 4px;

  border-radius: 4px;

  -webkit-transform: scale(1.05) rotate(-1deg);

  -moz-transform: scale(1.05) rotate(-1deg);

  -o-transform: scale(1.05) rotate(-1deg);

  transform: scale(1.05) rotate(-1deg);

}

a:nth-child(2n):hover {

  -webkit-transform: scale(1.05) rotate(1deg);

  -moz-transform: scale(1.05) rotate(1deg);

  -o-transform: scale(1.05) rotate(1deg);

  transform: scale(1.05) rotate(1deg);

}

Была использована функциональность каждого браузера (так как у каждого есть свой собственный префикс.) Продолжительность перехода установлена в 250 миллисекунд, и масштабирование/вращение установлено по умолчанию. Даже ссылки вращаются в различных сторонах, чтобы добавить немного больше стиля!

Добавлено через 7 минут
Добавляем нестандартные, собственные иконки для разделов

Начиная с версии 1.0.0 Release Candidate 1, процесс добавления собственной иконки стал совсем простым.
Для начала нам нужно узнать ID раздела, для которого мы хотим изменить иконку. Сделать это просто. Наводим курсор на имя раздела и смотрим URL. В конце стоит цифра, которая и есть ID раздела. Например здесь Новости XenForo имеет ID 21.
Создаем 2 иконки с именами:

forum-unread-21.png - есть непрочитанные сообщения в разделе.
forum-read-21.png - нет непрочитанных сообщений.

Заливаем их в папку styles/default/xenforo/widgets/
Открываем шаблон EXTRA.css и дописываем следующий стиль:

/* custom status icons */
 .node .node_21 .forumNodeInfo .nodeIcon, .node .node_21 .categoryForumNodeInfo .nodeIcon {
     background-image: url("@imagePath/xenforo/widgets/forum-read-21.png");
 }
 .node .node_21 .forumNodeInfo.unread .nodeIcon, .node .node_21 .categoryForumNodeInfo.unread .nodeIcon {
     background-image: url("@imagePath/xenforo/widgets/forum-unread-21.png");
 }

Естественно, если ID раздела у вас другое, то и номер в стилях должен отличаться. Например, если хотим добавить иконки для еще одного раздела и он имеет ID 4, то необходимо просто дописать ниже еще CSS:

.node .node_4 .forumNodeInfo .nodeIcon, .node .node_4 .categoryForumNodeInfo .nodeIcon {
     background-image: url("@imagePath/xenforo/widgets/forum-read-4.png");
 }
 .node .node_4 .forumNodeInfo.unread .nodeIcon, .node .node_4 .categoryForumNodeInfo.unread .nodeIcon {
     background-image: url("@imagePath/xenforo/widgets/forum-unread-4.png");
 }

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

Размер иконок лучше всего оставлять стандартный - 40px или же чуть меньше - 32px.

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид