Создаём свой собственный стиль для phpBBex на основе встроенного Prosilver

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

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

Post #1by JoteRuso » 24.04.2013, 00:29

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

Вот, собственно, и удочка! :smile:
Начинаем учиться самостоятельно превращать свой форум во что-нибудь не похожее на стандартную тему Просильвера...
И делаем из вот этого стандартного встроенного шаблона
Image

что-нибудь более жизнерадостное и наполненное красками (яркими или не очень - это уже Вам решать).
Примеры разных цветовых решений
Image Image
Первые два "дизайна" выполнены с минимальными правками. Только замена шапки, фона за форумом, фона блоков и набора иконок.

Image Image

Image Image

Будем считать, что Вы уже знаете,
КАК ДОБАВИТЬ ЗАДНИЙ ФОН своему форуму,
КАК ЗАМЕНИТЬ ШАПКУ ФОРУМА НА СВОЙ РИСУНОК и
КАК ЗМЕНИТЬ ФОН БЛОКОВ ФОРУМА (при условии, что Вам всё это вообще нужно).

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

Ниже я буду приводить кусочки файлов CSS (все эти файлы собраны в папке styles\prosilver\theme), отвечающих за внешний вид phpBBex. Чтобы слегка изменить цветовое решение, достаточно внести изменения в 5-6 параметров. Чтобы сделать продуманный и хорошо скомпонованный из сочетающихся цветов дизайн, придётся уделить внимание примерно 20 параметрам (и, естественно, потратить на это гораздо больше времени). Но оно того стОит, можете мне поверить. Что может быть лучше своего собственного дизайна, не похожего на другие... Это Ваше самовыражение, это визитная карточка Вашего форума, это то, что будут видеть десятки, сотни, а, может, и сотни тысяч людей. У Вас ведь большие планы? )))
Убедил? :wink:
Тогда приступаем!

Если Вы хотите видоизменить установленный по умолчанию стиль, то Вам надо будет скопировать со своего сайта папку "theme" (styles/prosilver/theme) себе на комп. В ней находятся css-файлы, некоторые из которых мы будем использовать.
После окончания всех правок, Вам надо будет заменить старые css-файлы на сервере на свои. После чего обновить темы и очистить хэш на главной странице Админки.
Если же Вы хотите использовать свой только что созданный стиль отдельно от установленного по умолчанию, то Вам надо будет скопировать со своего сайта всю папку "prosilver" (styles/prosilver) и переименовать её (например - MyStyle_01). В ней вы найдёте конфигурационный файл .cfg и три папки (в каждой из которых тоже будет свой конфигурационный файл .cfg . Так вот, в каждом из этих четырёх конфигурационных файлов вам надо будет найти три строчки:
Code: Select all
name = prosilver
copyright = © phpBB Group, 2007
version = 3.0.11
и заменить в них старые данные на свои. Например:
Code: Select all
name = MyStyle_01
copyright = © MyName
version = 1.0.0
и сохранить внесённые изменения.
После проведения всех правок в файлах css и их сохранения, Вы архивируете папку в формате .ZIP, заливаете её на свой сервер в папку /styles и там разархивируете. После чего из Админки форума (Админка >> Стили ) устанавливаете Ваш появившийся среди доступных новый стиль и делаете его основным.
Уфф... Вроде всё.

Теперь - Рекомендации, облегчающие жизнь в этом деле, но не являющиеся обязательными:

* Перед началом экспериментов вооружимся "правильным" текстовым редактором Notepad++, в котором мы и будем открывать и сохранять css-файлы.
* Для облегчения подбора цвета, порекомендую Вам воспользоваться вот этим сервисом. Поизучайте его возможности - там всё достаточно просто.
* Также я постоянно пользуюсь крохотной программулькой, которая называется Pixie. Она очень облегчает жизнь любому начинающему дизайнеру-любителю.
* Ну и последнее пожелание - научитесь пользоваться средствами разработки, встроенными во все современные браузеры. Это позволит Вам видеть в режиме "он-лайн", все производимые Вами изменения прямо на Вашем форуме (конечно же, виртуально). Но это очень и очень удобно. И может помочь Вам не только "в живую" посмотреть, как будет выглядеть изменяемая Вами часть оформления форума ещё до внесения правок в код, но и определять названия других нужных элементов, чтобы потом по этим названиям легко найти их в файлах.

Что нам ещё осталось принять во внимание? Наверное, только то, что во всех css-файлах используется шестизначная HTML-кодировка цветов, в которой за основу взяты 16 знаков - от 0 до 9 и первые 6 букв латинского алфавита (ЗАГЛАВНЫХ или прописных - без разницы). Но иногда, если все шесть знаков обозначения цвета являются одинаковыми (или идут попарно), то их сокращают до трёх знаков. Например обозначение белого цвета #FFFFFF Вы можете встретить в виде #FFF или #fff, а розовый цвет #DDFFAA может встретиться Вам как #DFA, #ddffaa или #dfa :wink:
Абсолютно чёрный цвет - #000000, абсолютно белый - #FFFFFF. Всё остальное - вариации этих и других 14 знаков.

Итак, из чего состоит основная часть внешнего вида стандартного стиля Prosilver в phpBBex? Давайте разбираться и творить!

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

ВАЖНО: Перед началом экспериментов, скопируйте куда-нибудь папку "theme" (styles/prosilver/theme).
Пусть будет в запасе на случай ядерной войны )) Если что, всегда сможем из неё восстановиться.

Белое "тело" форума - #wrap
Image
файл - common.css
Code: Select all
#wrap {
   padding: 0 20px;
   min-height: 100%;
   margin: 0 auto;
   background-color: #FFFFFF;
   box-shadow: 0 0 15px #CCCCCC;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
, где:
background-color: #FFFFFF; /* 1 - Собственно само белое «тело» форума*/
padding: 0px 20px; /* 2 - ширина правой и левой окантовки */
box-shadow: 0px 0px 15px #CCCCCC; /* 3 - Серый цвет и толщина тени справа и слева от «тела» форума*/
Окошко поиска - #search-box
Image
файл - colours.css
Code: Select all
#search-box {
   color: #FFFFFF;
}

#search-box #keywords {
   background-color: #FFF;
}

#search-box input {
   border-color: #0075B0;
}
,где:
#search-box {
color: #FFFFFF; /* - Цвет поля блока поиска*/

#search-box input {
border-color: #0075B0; /* - цвет окантовки поля Поиска*/
Задний фон, Шапка и текст на "теле" форума - body
Image Image
Файл - common.css
Code: Select all
body {
   background-image:url("{T_THEME_PATH}/images/fondo.jpg");
   background-attachment:fixed;   
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #536482;
   background-color: #EEEEE7;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   height: 100%;
, где:
background-image:url("{T_THEME_PATH}/images/fondo.jpg"); /*фон за форумом (если Вы его поставили) */
background-attachment:fixed; /*фиксация фона за форумом (если Вы его поставили) */
color: #536482; /*цвет текста на «теле» форума*/
Главная панель меню - #main-menu
Image
файл mainmenu.css
Code: Select all
/* главное меню */
#main-menu
{
   height:25px;
   border: 1px solid #ccc;
   background-color: #f0f0f0;
   font-weight: bold;
}
, где:
height:25px; - /* (1) высота панельки главного меню*/
border: 1px solid #ccc; - /* (2) серая окантовка панельки главного меню */
background-color: #F0F0F0; - /* (3) цвет самой панельки главного меню*/
font-weight: bold; - /* (4) выбран жирный шрифт */

Code: Select all
/* пункты меню */
#main-menu li > a
{
   background: none;
   border-color: transparent;
   text-decoration:none;
   color:#000;
}
, где:
color:#000; - /* (4) Черный цвет шрифта пунктов Главного меню*/
Главная панель меню - #main-menu
Image
файл - mainmenu.css
Code: Select all
/* выделенные пункты меню */
#main-menu li:hover > a
{
   border-color: #4282b5;      /*цвет окантовки при наведении мышки*/
   background-color: #F7F7FF;      /*цвет поля при наведении мышки*/
   text-decoration:none;
   color: #000;  /*Черный цвет шрифта пунктов Главного меню при наведении мышки*/
}

Code: Select all
#main-menu li
{
   border-left: 1px solid #ffffff;       /*Левый кант (белый) */
   border-right: 1px solid #d8d8d8;      /*Правый кант (серый) */
}
Названия тем - a.topictitle
Image
файл - colours.css
Code: Select all
a.topictitle {
   color: #105289;
}

/* a.topictitle:visited { color: #368AD2; } */

a.topictitle:hover {
   color: #BC2A4D;
}
, где:
color: #105289; /* (1) Синий цвет шрифта в названиях активных тем*/
color: #BC2A4D /* (2) Красный цвет шрифта в названиях активных тем при наведении мышки*/

Code: Select all
ul.topiclist li {
   color: #4C5D77;
}
, где:
color: #4C5D77; /* (3) цвет шрифта даты и времени последнего поста */
Этот же мелкий шрифт используется почти по всему форуму
Для наглядности я поменял цвет этого шрифта на ярко-фиолетовый:
Image
Ссылки на форумы - a.link
Image
файл - colours.css
Code: Select all
/*     
--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- */

a:link   { color: #105289; }
a:visited   { color: #105289; }
a:hover   { color: #D31141; }
a:active   { color: #368AD2; }
, где:

a:link { color: #105289; } /* (1) Синий цвет шрифта ссылки на форумы*/
a:visited { color: #105289; } /* (1) Синий цвет шрифта ссылки на посещённые форумы*/
a:hover { color: #D31141; } /* (2) Красный цвет шрифта ссылки на форумы при наведении мышки*/
a:active { color: #368AD2; }[/code]
Названия форумов в списке форумов - a.forumtitle
Image
файл - colours.css
Code: Select all
/* Links for forum/topic lists */
a.forumtitle {
   color: #105289;
}

/* a.forumtitle:visited { color: #105289; } */

a.forumtitle:hover {
   color: #BC2A4D;
}

a.forumtitle:active {
   color: #105289;
}
, где:
a.forumtitle {
color: #105289; /* (1) Синий цвет шрифта ссылки на форумы в списке форумов*/
a.forumtitle:hover {
color: #BC2A4D; /* (2) Красный цвет шрифта ссылки на форумы в списке форумов при наведении*/
a.forumtitle:active {
color: #105289; /* (1) Синий цвет шрифта ссылки на активные форумы в списке форумов*/
СТАТИСТИКА и две полоски
Image
файл - colours.css
Code: Select all
h3 {
   border-bottom-color: #CCCCCC;
   color: #115098;
}
, где:
border-bottom-color: #CCCCCC; /*серый цвет двух полосок */
color: #115098; /*Синий цвет слова СТАТИСТИКА*/
Нижняя панель - .navbar
Image
файл - colours.css
Code: Select all
.navbar {
   background-color: #cadceb;
}
, где:
background-color: #cadceb; /*Цвет Нижней навигационной панельки*/
Разделительная линия - li.row
Image Image
файл - colours.css
Code: Select all
li.row {
   border-top-color:  #FFFFFF;
   border-bottom-color: #00608F;
}
, где:
border-top-color: #FFFFFF; /*Верхняя (белая) часть разделительной линии*/
border-bottom-color: #00608F; /*Нижняя (синяя) часть разделительной линии*/
Фоновая "зебра" - .bg1 и .bg2
Image
файл - colours.css
Code: Select all
.bg1   { background-color: #ECF3F7; }
.bg2   { background-color: #e1ebf2;  }
.bg3   { background-color: #cadceb; }
, где:
.bg1 { background-color: #ECF3F7; } /*Светлая часть «зебры»*/
.bg2 { background-color: #e1ebf2; } /*Чуть более тёмная часть «зебры» */
Фон списка форумов - ul.forums
Image
файл - colours.css
Code: Select all
ul.forums {
   background-color: #eef5f9;
   /* background-image: url("{T_THEME_PATH}/images/gradient.gif"); */
}
, где:
background-color: #eef5f9; - /*Фон списка форумов*/
Цвет надписи "по активности..." - h3 span.extra
Image
файл - common.css
Code: Select all
h3 span.extra {
   color: #ccc;
   font-size: 0.9em;
   text-transform: lowercase;
   margin-top: 2px;
   float: right;
, где:
color: #ccc; - /*Цвет надписи «(по активности за 10 минут)» */

Собственно, освоив только эти нехитрые "премудрости", Вы сможете без особых проблем менять основную часть внешнего вида Вашего форума.
И примите во внимание, что этот обзор - весьма поверхностный.
Более глубокие изменения потребуют от Вас не только умения менять цвета и подменять одни файлы другими, но и знания hlml, css и php.
Last edited by JoteRuso on 24.04.2013, 23:34, edited 4 times in total.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 535
With us: 5 years 7 months

Post #2by hobot-bobot » 24.04.2013, 11:45

Плюсанул, вечером буду пробовать, а то с ночной смены голова вообще не варит, пойду спать.
ОАО "РЖД" - Редко Живу Дома
hobot-bobot M
Бывалый
Avatar
Location: Череповец
Reputation: 23
With us: 4 yaers 7 months

Post #3by Zetiko » 24.04.2013, 14:26

Сейчас сам буду делать свой первый шаблон. Потом покажу что получилось.
Zetiko
Новичок
Reputation: 1
With us: 4 yaers 7 months

Post #4by Coldi » 24.04.2013, 17:46

JoteRuso, потратил минут 5-7 по твоей статье, спс за хороший пост))) (Вот что вышло) - не реклама.
Все строят планы, и никто не знает,проживёт ли он до вечера.
Coldi M
Новичок
Age: 30
Location: Судак
Reputation: 2
With us: 4 yaers 8 months

Post #5by JoteRuso » 24.04.2013, 17:51

Coldi, приятно видеть первые результаты )) Думаю, что Вы и сами довольны, что теперь не похожи на других :smile:

******************************
Дополнил статью.
Передохну немного и добавлю ещё одну часть, где будет рассказано, как легко поменять фон блоков, которые до сих пор остаются тёмно-синими )))
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 535
With us: 5 years 7 months

Post #6by dim6461 » 24.04.2013, 18:31

Что значит назрело,давненько нужна была подобная тема.Очень рад,что наконец то она состоялась.Спасибо
dim6461 M
Новичок
Age: 43
Location: Вологда
Reputation: 3
With us: 4 yaers 8 months

Post #7by Coldi » 24.04.2013, 18:50

Вот чего не хватает этому форуму так цитирование!! JoteRuso, буду ждать)
Все строят планы, и никто не знает,проживёт ли он до вечера.
Coldi M
Новичок
Age: 30
Location: Судак
Reputation: 2
With us: 4 yaers 8 months

Post #8by JoteRuso » 24.04.2013, 19:10

Coldi wrote:Вот чего не хватает этому форуму так цитирование!!
Просто выделите нужный текст, а кнопка цитаты у вас сама появится.
Это же, всё-таки, phpBBex! :smile: Сплошная автоматика =)
Image
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 535
With us: 5 years 7 months

Post #9by Coldi » 24.04.2013, 19:44

JoteRuso wrote:Просто выделите нужный текст, а кнопка цитаты у вас сама появится.Это же, всё-таки, phpBBex! Сплошная автоматика =)
я приятно удивлен ))) Но есть но, вот я, например не понял, что такая возможность есть, думаю нужно внести предложение, чтобы была постоянная кнопка) Прошу прошение за флуд.
Все строят планы, и никто не знает,проживёт ли он до вечера.
Coldi M
Новичок
Age: 30
Location: Судак
Reputation: 2
With us: 4 yaers 8 months

Post #10by JoteRuso » 24.04.2013, 20:01

Так. В связи с ограничением количества ссылок в одном сообщении, создал новую тему. Ссылка на неё указана в первом сообщении.
Дерзайте, творите!
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 535
With us: 5 years 7 months

Post #11by Sumanai » 24.04.2013, 23:12

Coldi wrote:думаю нужно внести предложение, чтобы была постоянная кнопка)

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

Post #12by nurgaf » 26.04.2013, 10:12

Вообще это все правильно! Если хочешь сделать что то стоящее - Делай это Сам! :smile:
nurgaf M
Гуру
Avatar
Age: 21
Location: г.Челябинск
Reputation: 65
With us: 4 yaers 8 months

Post #13by hobot-bobot » 26.04.2013, 19:58

2 дня мучений и ничего! А надо было всего навсего 1,5 литра пенного светлого :beer: допинга для творчества и дело пошло :biggrin: .
Spoiler
Image
Еще шапку доработать осталось.
ОАО "РЖД" - Редко Живу Дома
hobot-bobot M
Бывалый
Avatar
Location: Череповец
Reputation: 23
With us: 4 yaers 7 months

Post #14by JoteRuso » 26.04.2013, 21:17

hobot-bobot wrote:Еще шапку доработать осталось.
Я думаю, что очередные 1,5 литра допинга помогут довести задумку до победоносного финала. :wink:
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 535
With us: 5 years 7 months

Post #15by nurgaf » 26.04.2013, 21:47

Отлично получилось!
nurgaf M
Гуру
Avatar
Age: 21
Location: г.Челябинск
Reputation: 65
With us: 4 yaers 8 months

Post #16by Scrypto » 28.04.2013, 12:17

Как изменить цвет вводимого текста?
Image
Заранее спасибо
Scrypto
Гость

Post #17by hobot-bobot » 28.04.2013, 12:45

Помощь по BBCode
Spoiler
Как изменить цвет или размер текста
Для изменения цвета или размера шрифта могут быть использованы следующие теги (окончательный вид будет зависеть от системы и браузера пользователя):
Цвет текста можно изменить, окружив его [color=][/color]. Вы можете указать либо известное имя цвета (red, blue, yellow и т. п.), или шестнадцатеричное представление, например #FFFFFF, #000000. Таким образом, для создания красного текста вы можете использовать:

Привет!

или

Привет!

оба способа дадут в результате Привет!
Attachments
Безымянный.png
Безымянный.png (7.86 KiB) Viewed 32076 times
ОАО "РЖД" - Редко Живу Дома
hobot-bobot M
Бывалый
Avatar
Location: Череповец
Reputation: 23
With us: 4 yaers 7 months

Post #18by Scrypto » 28.04.2013, 13:13

Не угарай на до мной. Я знаю, что такое BB код.
Скажите где, в ксс поменять цвет вводимого текста. Я изменил фон. И теперь сливаеться.

Added after 23 minutes 12 seconds:
И еще вопрос, как поменять цвет нумерации страниц. Чтобы не так сильно в глаза бросался.
Image
Scrypto
Гость

Post #19by JoteRuso » 28.04.2013, 13:55

Scrypto wrote:Скажите где, в ксс поменять цвет вводимого текста. Я изменил фон. И теперь сливаеться.

colours.css
853 строка
Code: Select all
/* Posting page styles
----------------------------------------*/

#message-box textarea {
   color: #333333;
}

Added after 3 minutes 6 seconds:
Scrypto wrote:И еще вопрос, как поменять цвет нумерации страниц. Чтобы не так сильно в глаза бросался.
Не понятно, о чём именно идёт речь, так как Ваше добавленное изображение не хочет являть себя миру :wink:
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 535
With us: 5 years 7 months

Post #20by Scrypto » 28.04.2013, 15:49

Спасибо за помощь. а так видно http://i46.fastpic.ru/big/2013/0428/2b/d503f85ae1fd34f786946c3a0404152b.png
Scrypto
Гость

Next

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