Создаем свой стиль на основе встроенного phphbbEx 2.0 (phpbb 3.1.*)

Board index phpBBex 2.x Мастерская

Description: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 2.x и phpBB 3.1.x.
Moderator: Поддержка

Post #1by NO SWEAR » 15.08.2015, 13:22

Приветствую всех. Решил поделится небольшим опытом по переделке стиля нового phphbbex. По стопам JoteRuso(Ему отдельное спасибо за ту тему). По итогу можно решить достойно ли моя тема мастерской. :toothless:

Итак, как известно новый стиль адаптивный и имеет способность сжиматься и растягиваться в зависимости от размера экрана. В связи с этим есть изменения которые уже нельзя сделать так как со старым стилем. Например в админке уже нет возможности управлять стилем - имею ввиду изменить код и картинки. В основном места где меняется цвет форума схожи со старым стилем.Ну и конечно firebug вам в помощь. Всё что найду еще размещу здесь в теме.
Тестовая наработка общий вид
Image
Логотип в новом стиле можно изменить в файле imageset.css
Code: Select all
/* Global imageset items */
.imageset.site_logo {
   background-image: url("./images/site_logo.png");
   padding-left: 240px;
   padding-top: 67px;
}
Так же в этом файле можно изменить картинки отвечающие за отображение - прочитан форум или нет - на свои.
Зебра меняется в файле colours.css
Image
Цвет полосок при наведении:
Code: Select all
li.row:hover {
   background-color: #444b52;
}
Цвет самих полосок зебры
Code: Select all
.bg1 {
   background-color: #b5b5b5;
}

table.zebra-list tr:nth-child(odd) td, ul.zebra-list li:nth-child(odd) {
   background-color: #000;
}

.bg2 {
   background-color: #b5b5b5;
}

table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) {
   background-color: #000;
}

.bg3 {
   background-color: #000;
}
Белое тело форума #wrap так же как и было в строке файла colours.css
Code: Select all
#wrap {
   background-color: #828282;
   box-shadow: 0 0 15px #CCC;
}
Изменение выпадающей менюшки в файле colors.css
Code: Select all
.dropdown .dropdown-contents {
   background: #b5b5b5;
   border-color: #b9b9b9;
   box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
полоска меню меняется в файле common.css
Code: Select all
/* Main menu
--------------------------------------------- */
#main-menu {
   background-color: #f0f0f0;
   border: 1px solid #ccc;
   padding: 0 10px;
Панель ответа в файле colours.css
Code: Select all
.panel {
   background-color: #ECF1F3;
   color: #28313F;
}
Область вводе текста в ответе. Файл colours.css
Code: Select all
.inputbox {
   background-color: #f5f5f5;
   border-color: #B4BAC0;
   color: #333333;
}
Цвет текста под форумами и в нижнем навбаре. Фон форума(обои) здесь же Файл commom.css
Code: Select all
body {
   font-family: Verdana, Helvetica, Arial, sans-serif;
   font-size: 10px;
   line-height: normal;
   color: #536482; / цвет текста /
   background-color: #EEEEE7;
   height: 100%;
   word-wrap: break-word;
   -webkit-print-color-adjust: exact;
В этом же месте можно вставить обои позади форума. Свой файл обоев кидать в theme/images/ Нужно добавить внизу
Code: Select all
background-image: url("./images/fv3.jpg");
   background-attachment:fixed, fixed;
    background-size: 100%;
    background-repeat: no-repeat;
Цвет блоков форума
Code: Select all
.forabg, .forumbg {
   background-color: #092146;
   background-image: url("./images/bg_list.png"); <!-- Картинка как в старом стиле -->
   background-image: -webkit-linear-gradient(#5B7FB2 0%,#0A3E89 2px,#092146 92px); <!-- Градиенты что нужно менять -->
   background-image: linear-gradient(#5B7FB2 0%,#0A3E89 2px,#092146 92px); <!-- Градиенты что нужно менять -->
   background-repeat: repeat-x;
Цвет блоков здесь выполнен в виде градиента. Поэтому изменять нужно в нужную вам цветовую гамму 3 параметра
Нижний #navbar так же меняется в файле colours.css
Code: Select all
.navbar {
   background-color: #474747;
}
Цвет ссылок
Code: Select all
a { color: #105289; }
a:hover   { color: #D31141; }
Где a { color: #105289; } /* цвет ссылки */
a:hover { color: #D31141; } /* Цвет ссылки при наведении */
Полоски и текст внизу где статистика. файл colours.css
Code: Select all
h3 {
   border-bottom-color: #000;  <!-- цвет полосок  -->
   color: #000; <!-- цвет текста около них  -->
}

Тема JoteRuso с изменением предыдущего стиля
Как установить свой стиль
Last edited by NO SWEAR on 15.08.2015, 19:52, edited 3 times in total.
NO SWEAR M
Topic author, Гуру
Avatar
Age: 40
Reputation: 98
With us: 5 years

Post #2by Трислав » 15.08.2015, 13:30

Замена шапки и заднего фона?
Трислав M
Мастер
Avatar
Age: 41
Reputation: 37
With us: 2 yaers 5 months

Post #3by NO SWEAR » 15.08.2015, 13:40

Трислав wrote:Замена заднего фона?
Читайте полностью пожалуйста. Задний фон там же где и текст под форумами.

Added after 2 minutes 19 seconds:
добавил в название спойлера где меняется фон

Added after 2 minutes 59 seconds:
Трислав wrote:Замена шапки
принцип примерно тот же как и был. но учитывая что это адаптивный стиль, корректно не работает. я пока не стал морочится.
NO SWEAR M
Topic author, Гуру
Avatar
Age: 40
Reputation: 98
With us: 5 years

Post #4by rbooze » 15.08.2015, 13:52

NO SWEAR wrote:Например в админке уже нет возможности управлять стилем - имею ввиду изменить код и картинки.

Очень рад, что это произошло. Создавало проблемы.
rbooze
Гуру
Avatar
Reputation: 96
With us: 4 yaers 1 month

Post #5by Трислав » 17.08.2015, 23:12

Вот так вот можно сделать шапку форума))) Файл colours.css
Code: Select all
.headerbar {
   color: #FFF;
   background-image: url("./images/head.jpg");
   background-repeat: repeat-x 50% 0;
Высота шапки зависит, ну или точнее в моём случае зависит от логотипа (смотрим выше в инструкции, думаем) Ширина при смене размера обрезается с двух сторон равномерно, как сделать по другому смотрим в инструкции JoteRuso.
Трислав M
Мастер
Avatar
Age: 41
Reputation: 37
With us: 2 yaers 5 months

Post #6by NO SWEAR » 18.08.2015, 20:22

Для смены логотипа нашёл расширение. Можно ставить своё лого через админку. И задавать размер и расположение. Слева,справа, центр. Либо вообще убрать.
NO SWEAR M
Topic author, Гуру
Avatar
Age: 40
Reputation: 98
With us: 5 years

Post #7by ЖЪРЧИК » 18.08.2015, 22:21

NO SWEAR, покеж
плешивый кот
ЖЪРЧИК
Гуру
Avatar
Reputation: 174
With us: 3 yaers 1 month

Post #8by NO SWEAR » 18.08.2015, 22:44

Буду у компа скину
NO SWEAR M
Topic author, Гуру
Avatar
Age: 40
Reputation: 98
With us: 5 years

Post #9by Sumanai » 18.08.2015, 22:45

ЖЪРЧИК, поиск же есть. Custom header logo, Site Logo
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M Online
Гуру
Avatar
Reputation: 1589
With us: 4 yaers 7 months

Post #10by vbnm » 19.08.2015, 00:00

rbooze wrote:Очень рад, что это произошло. Создавало проблемы.
ну, кодинг и разработка расширений вынесена в СТК "Средства разработки", так шо оч удобно
много полезностей
vbnm
Гуру
Reputation: 95
With us: 4 yaers 6 months

Post #11by vbnm » 19.08.2015, 10:18

Sumanai wrote:ЖЪРЧИК, поиск же есть. Custom header logo, Site Logo
отличная штука
NO SWEAR wrote:Для смены логотипа нашёл расширение. Можно ставить своё лого через админку. И задавать размер и расположение. Слева,справа, центр. Либо вообще убрать.
+
можно так же округлять углы
можно убирать название и описание сайта, оставляя только лого
vbnm
Гуру
Reputation: 95
With us: 4 yaers 6 months

Post #12by Sumanai » 19.08.2015, 14:47

vbnm wrote:можно убирать название и описание сайта
Встроенная возможность ещё с 1.х
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M Online
Гуру
Avatar
Reputation: 1589
With us: 4 yaers 7 months

Post #13by sag-sag » 21.08.2015, 23:08

Переношу свой стиль. Где в colours.css меняется цвет текста. Подскажите плиз! :pray:
Screenshot_2.png
Screenshot_2.png (30.89 KiB) Viewed 5244 times
Онлайн-сообщество администраторов [TEHADM.RU]
sag-sag M
Гуру
Age: 31
Reputation: 358
With us: 4 yaers 1 month

Post #14by vbnm » 22.08.2015, 01:02

sag-sag wrote:Где в colours.css меняется цвет текста.
везде
конкретней спроси
vbnm
Гуру
Reputation: 95
With us: 4 yaers 6 months

Post #15by ЖЪРЧИК » 22.08.2015, 06:15

vbnm, sag-sag, links 55 colours 236
А описание не знаю где.
плешивый кот
ЖЪРЧИК
Гуру
Avatar
Reputation: 174
With us: 3 yaers 1 month

Post #16by nightpatrol » 26.08.2015, 12:39

Создание рисунка в шапке независимо от логотипа. Рисунок масштабируемый.
В файле common.css пишем:
Code: Select all
.headerbar {
background: #ebebeb none repeat-x 50% 0; /* масштабируемость для планшетов, картинка будет симметрично обрезаться с краёв (не моё, подсказали) */
color: #FFFFFF;
padding: 0 5px;
height: 178px; /*высота шапки*/
В файле color.css пишем:
Code: Select all
.headerbar {
color: #FFFFFF;
background-color: #fff;
background-image: url("./images/bg_header.png"); /* здесь картинка для шапки */
nightpatrol
Бывалый
Reputation: 16
With us: 3 yaers

Post #17by Dr.Death » 26.08.2015, 14:05

Самое простое создать свой файл и подтягивать его после стандартных и в нем писать все изменения, чем рыться в куче стандартных где то да потому по 50 раз
Моды не пишу, программированию не обучаю. Ваше незнание и нежелание знать, ваши проблемы, а не повод меня оскорблять. Минусите на здоровье, вдруг поможет.
Dr.Death M
Гуру
Avatar
Reputation: 69
With us: 3 yaers 2 months

Post #18by ЖЪРЧИК » 26.08.2015, 14:27

overwrite.css переписывать под стиль
плешивый кот
ЖЪРЧИК
Гуру
Avatar
Reputation: 174
With us: 3 yaers 1 month

Post #19by Sumanai » 26.08.2015, 14:54

Dr.Death wrote:чем рыться в куче стандартных где то да потому по 50 раз
И обновляться проще, если не используются системы контроля версий.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M Online
Гуру
Avatar
Reputation: 1589
With us: 4 yaers 7 months

Post #20by Dr.Death » 26.08.2015, 15:11

Sumanai, ну это надо по дефолту создать пустой файл в сборке и тыкать народ носом туда
Моды не пишу, программированию не обучаю. Ваше незнание и нежелание знать, ваши проблемы, а не повод меня оскорблять. Минусите на здоровье, вдруг поможет.
Dr.Death M
Гуру
Avatar
Reputation: 69
With us: 3 yaers 2 months

Next

Return to Мастерская



Who is online (over the past 10 minutes)

Users browsing this forum: 1 guest