Инструкция Делаем стиль - оформление шапки и фона и прочего.

SOUL

Создатель
Сообщения
7 914
Репутация
11 216
Баллы
266
Иногда заходишь на форум и как-будто попадаешь в сказку. Как правило, такое оформление используется для игровых форумов.

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

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

Естественно, первое, на что обращаешь внимание - это шапка. Как правило, на игровых форумах шапка и фон идут заодно, Поэтому первое, что мы рассмотрим в этой теме, как это правильно реализовать.

Будем использовать дефолтный стиль. Возможно, из этой задумки выйдет что-то стоящее, и мы общими усилиями сделаем игровой стиль [by XenforoTest.ru].

Но пока начнём по порядку. :)
 

witcherivan

Местный
Сообщения
158
Репутация
146
Баллы
43
Вот один не хитрый способ немного приукрасить шапку форума на стандартном стиле xenForo:

  • Для начала нам потребуется изменить высоту логотипа.
В стандартном стиле она составляет 50 пикселей: logo-50.png
  • Для этого идём: Внешний вид> Стили> Default Style> Группы настроек стиля> "Шапка" (header) и навигация.
Вкладка 'Настройки'> пункт 'Высота логотипа': logo-50px.png
И меняем это значение (к примеру) на 355 пикселей: logo-355px.png
Получили требуемый результат logo-355.png. Далее прикрутим фоновое изображение к шапке.
  • Для этого идём: Внешний вид> Стили> Default Style> Группы настроек стиля> "Шапка" (header) и навигация.
Вкладка 'Настройки'> пункт 'Фон': header-bg.png
В поле 'Изображение' указываем путь до загруженной нами (за ранее) картинки фона styles/default/xenforo/bg.jpg.
В поле 'Repeat' в выпадающем меню выбираем 'No-Repeat'.
В поле 'Позиция' указываем значение 'top'.
Проверим изменения header-bgd.png. Движемся дальше - заменим логотип.
  • Для этого идём: Внешний вид> Стили> Default Style> Группы настроек стиля> "Шапка" (header) и навигация.
Вкладка 'Настройки'> пункт 'Путь к основному логотипу': header-logow.png
В поле значения указываем путь до загруженного нами (за ранее) логотипа styles/default/xenforo/logow.png
Видим результатheader-logo.png. Осталось подкорректировать цветовую палитру.
  • Для этого идём: Внешний вид> Стили> Default Style> Группы настроек стиля> Цветовая палитра.
color-pics.png Далее правим цветовую палитру на свой вкус и цвет. color-pic.png
  • Для этого идём: Внешний вид> Стили> Default Style> Группы настроек стиля> Основное.
Вкладка 'Настройки'> пункт 'Фон': color-html.png
В поле 'Цвет' выбираем требуемый оттенок цвета фона.
  • Если в стиле нет прозрачных элементов, то данных настроек вполне достаточно для достижения поставленной задачи.
  • Вот что получилось в итоге наших манипуляций: resultate.png
 

Вложения

Последнее редактирование:

A_DayS

Пользователь
Сообщения
3
Репутация
0
Баллы
1
Очень красиво и полезно,спасибо огромное))
 

aligon

Проверенный
Сообщения
169
Репутация
40
Баллы
28
Вот это я и искал, полезная вещь. А так же можно и с подвалом сделать или нет?
 

amax

Забаненный
Сообщения
5
Репутация
0
Баллы
1
Сделал себе оформления благодаря это статье спасибо))
 

SOUL

Создатель
Сообщения
7 914
Репутация
11 216
Баллы
266
Вот это я и искал, полезная вещь. А так же можно и с подвалом сделать или нет?
Можно, здесь Внешний вид => Стили => Default Style => Группы настроек стиля => Настройки стиля: "Подвал" (footer)
 

mygedz

Местный
Сообщения
233
Репутация
155
Баллы
43
Внесу мое "достижение":
Нужно было вообще убрать заливку (шапку).
Решается таким образом:
1. Стиль (дефолтный) - Шапка" (header) и навигация - "Шапка" (header) - Фон
2. Заходим в палитру и ставим галочку: Очистить значение.
Вышло так:
Screenshot_1.png

А еще б хотелось узнать, как ROOT убрал скругление форм в дефолтном стиле.
 

ROOT

Пользователь
Сообщения
0
Репутация
52
Баллы
12
А еще б хотелось узнать, как ROOT убрал скругление форм в дефолтном стиле.
Так просто в настройках убираешь радиус, где не доступно из настроек в шаблонах. :) Есть способ одним разом сделать радиус, ну в принципе не только его:
Код:
* {
   border-radius: 0;
}
Но это не удобно, так как уберутся все радиусы (скругления), где надо и не надо.
 

mygedz

Местный
Сообщения
233
Репутация
155
Баллы
43
ROOT, пытаюсь изучать. Не могу понять в настройках, где пункт отвечающий за скругление основных форм:
Screenshot_1.png
По логике, если не ошибаюсь, это пункт Формы.

Пока искал нашел вот что. Чтобы убрать скругления в
Screenshot_2.png
Стиль- Список разделов/узлов
убираем Радиус-5px

Так же, чтоб убрать скругления вот тут:
Screenshot_3.png
Стиль-Список разделов/узлов
убираем Радиус-3px

P.S. ув. админы, если не надо это писать сюда, скажите. А так вроде как мне кажется полезная инфа.

Скругления у объявлений
Screenshot_4.png
Стиль-Объявления
убираем Радиус

Вообщем все как и сказал ROOT

Скругления:
Screenshot_5.png
Стиль-Секции-Основная часть секции
убираем радиус

Скругления:
Screenshot_6.png
Стиль-Шапка" (header) и навигация-Контейнер закладок навигации
убираем радиусы

Screenshot_2.png
Стиль-Подвал" (footer)-Основной контейнер
убираем радиусы (снизу, слева)

Возникло два вопроса:
1. Я создал свой стиль, наследуемый от дефолтного. Как этот стиль с моими правками, потом перенести на другой форум или выложить?
2. Как изменить баннер
Screenshot_1.png
на Screenshot_2.png, чтоб потом можно было экспортировать стиль, и это все сохранилось.

Скругление кнопки:
Screenshot_1.png
Стиль-Кнопки-Кнопки действия: контейнер
убираем радиус.

Вроде с убиранием скруглений все понятно. Ничего сложного.

Выравниваем ни по середине:
Screenshot_1.png
Стиль-Элементы сообщений-Имя пользователя
В Прочее добавить:
HTML:
text-align: center;
И приподнимаем ник над баннером группы:
Стиль-Элементы сообщений-Имя пользователя
Внешний отступ-Снизу-3px

Используя код с xenforo.com, изменяем внешний вид закреплённых тем, прописывая его в EXTRA.css
Screenshot_2.png
HTML:
/*Закрепленные темы*/

.discussionList .sticky {
    background-color: #f7caca !important;
    border: 1px solid #d88585 !important;
}

.discussionList .sticky .posterAvatar, .discussionList .sticky .stats {
    background-color: #f7caca !important;
}

.discussionListItem .iconKey .sticky{
    border: 0px solid #d88585  !important;
}

.discussionList .sticky .avatar img,
.discussionList .sticky .avatar .img, .avatarCropper {
    border: 1px solid #d88585 !important;
}

.discussionList .sticky .title a, .discussionList .sticky .DateTime, .discussionList .sticky .EditControl {
    color: #8F080A !important;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #fbe8e8;
}

.discussionList .sticky .username, .discussionList .sticky .pairsJustified dt  {
    color: #373737 !important;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #fbe8e8;
}
.discussionList .sticky .stats dl  {
    border-left: 1px solid #d48f8f !important;
    border-right: 1px solid #d48f8f !important;
}

.discussionList .sticky .itemPageNav a  {
    background-color: #fee6e6 !important;
    border-color: #dfa4a4 !important;
    color: #c57c7c !important;

}
.discussionList .sticky .itemPageNav a:hover  {
    background-color: #fee6e6 !important;
    border-color: #dfa4a4 !important;
    color: #c57c7c !important;
    opacity: 0.4;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}
.discussionList .sticky .itemPageNav span {
    color: #c28686 !important;
}
.discussionList .sticky .muted {
    color: #373737 !important;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #FBE8E8;
}

/*Закрепленные темы*/
 
Последнее редактирование модератором:
  • Мне нравится
Реакции: ROOT

ROOT

Пользователь
Сообщения
0
Репутация
52
Баллы
12
Как этот стиль с моими правками, потом перенести на другой форум или выложить?
Надо дать название стилю, создать одноименную папку в styles, скопировать все содержимое папки default, в Настройках стиля: Основное, указать путь styles/ваш_стиль, в Настройки стиля: "Шапка" (header) и навигация, указать путь к основному логотипу styles/ваш_стиль/xenforo/logo.png и путь к Логотип Facebook Open Graph.
И можно тогда экспортировать.
 

ROOT

Пользователь
Сообщения
0
Репутация
52
Баллы
12
Как изменить баннер
Открываешь шаблон user_banners.css и изменяешь стили баннеров на свои. За поворот ленты отвечает класс .wrapped, его надо убрать и остальное сделать по принципу:
Код:
/* Баннеры групп */

/* Общий стиль для всех баннеров */

[class*="style_"] {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    display: block;
    font-size: 11px;
    margin: 4px 0 5px;
    padding: 2px 6px 3px;
    position: relative;
    text-align: center;
    color: white;
    text-shadow: 0 0 0 transparent, 1px 1px 1px black;
    width: 98px;
}

/* Баннер администратора */

.style_admin {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.3);
}

/* Баннер модератора */

.style_moder {
    background-color: rgba(0, 155, 4, 0.5);
    border: 1px solid rgba(0, 155, 4, 0.7);
}

/* Баннер пользователя */

.style_lamer {
    background-color: rgba(22, 171, 227, 0.6);
    border: 1px solid rgba(22, 171, 227, 0.7);
}

/* Баннер проверенного */

.style_user {
    background-color: rgba(0, 51, 155, 0.5);
    border: 1px solid rgba(0, 51, 155, 0.7);
}

/* Баннер местного */

.style_local {
    background-color: rgba(0, 62, 170, 0.6);
    border: 1px solid rgba(0, 62, 170, 0.7);
}

/* Баннеры групп */
 

ROOT

Пользователь
Сообщения
0
Репутация
52
Баллы
12
Пробуем так, сам не пробовал :) заменяем содержимое шаблона user_banners.css на это:
Код:
.userBanner
{
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    display: block;
    font-size: 11px;
    border: 1px solid transparent;
    margin: 4px 0 5px;
    padding: 2px 6px 3px;
    position: relative;
    text-align: center;
    text-shadow: 0 0 0 transparent, 1px 1px 1px black;
    width: 98px;  
}

.userBanner.bannerHidden { background: none; box-shadow: none; border: none; }

.userBanner.bannerStaff { color: @primaryMedium; background-color: @primaryLighterStill; border-color: @primaryLighter; }

.userBanner.bannerPrimary { color: @primaryMedium; background-color: @primaryLighterStill; border-color: @primaryLighter; }

.userBanner.bannerSecondary { color: @secondaryDark; background-color: @secondaryLighter; border-color: @secondaryLighter; }

.userBanner.bannerRed        { color: white; background-color: red; border-color: #F88; }

.userBanner.bannerGreen      { color: white; background-color: green; border-color: green; }

.userBanner.bannerOlive      { color: black; background-color: olive; border-color: olive; }

.userBanner.bannerLightGreen { color: black; background-color: lightgreen; border-color: lightgreen; }

.userBanner.bannerBlue       { color: white; background-color: blue; border-color: #88F; }

.userBanner.bannerRoyalBlue  { color: white; background-color: royalblue; border-color: #81A9E1;  }

.userBanner.bannerSkyBlue    { color: black; background-color: skyblue; border-color: skyblue; }

.userBanner.bannerGray       { color: black; background-color: gray; border-color: #AAA; }

.userBanner.bannerSilver     { color: black; background-color: silver; border-color: silver; }

.userBanner.bannerYellow     { color: black; background-color: yellow; border-color: #E0E000; }

.userBanner.bannerOrange     { color: black; background-color: orange; border-color: #FFC520; }
 
Последнее редактирование:

mygedz

Местный
Сообщения
233
Репутация
155
Баллы
43
ROOT, сам так же сделал)). Но баннер съезжает. Ща разбираюсь почему
Screenshot_1.png
 

ROOT

Пользователь
Сообщения
0
Репутация
52
Баллы
12
Исправил там немного, класс бордюра добавил.
 

mygedz

Местный
Сообщения
233
Репутация
155
Баллы
43
сейчас исправим
 

ROOT

Пользователь
Сообщения
0
Репутация
52
Баллы
12
Попробуй display: block; и margin: 4px auto 5px;
 
  • Мне нравится
Реакции: SOUL

SOUL

Создатель
Сообщения
7 914
Репутация
11 216
Баллы
266

ROOT

Пользователь
Сообщения
0
Репутация
52
Баллы
12
Короче так надо:
Код:
.userBanner
{
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    display: block;
    font-size: 11px;
    border: 1px solid transparent;
    margin: 0 auto!important;
    padding: 2px 6px 3px;
    text-align: center;
    text-shadow: 0 0 0 transparent, 1px 1px 1px black;
    width: 98px; 
}
Остальное так же
 

mygedz

Местный
Сообщения
233
Репутация
155
Баллы
43
убрал
HTML:
width: 98px;
стало все ок:
Screenshot_3.png
 
Сверху Снизу