Внимание!
Не все расширения для phpBB 3.2 совместимы с phpBB 3.3, главным образом из-за неверного синтаксиса в определениях сервисов (отсутствия обрамляющих кавычек - '...').
Перед обновлением необходимо убедиться в совместимости всех расширений.
Рекомендуется предварительно тестировать обновление на копии конференции (локально или на сервере).

[FAQ] Как перекрасить prosilver

Есть любые вопросы, связанные со стилями/темами для phpBB 3.0.x? Задайте их здесь!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
rxu
phpBB Guru
phpBB Guru
Сообщения: 14744
Зарегистрирован: 12.05.2006 18:16
Откуда: Красноярск
Благодарил (а): 354 раза
Поблагодарили: 1623 раза

[FAQ] Как перекрасить prosilver

Сообщение rxu »

Данная статья является переводом статьи [How to] colorize prosilver с официального сайта phpbb.com.
Итак: перед тем, как начать, имеет смысл отключить кэширование. Это может быть сделано через администраторский раздел: Нагрузка на сервер - Перекомпилировать старые шаблоны: Да.

Начнём.

Прежде всего, необходимо найти файлы, которые нужно править. Они находятся в соответствующей папке нужного вам стиля.
В нашем случае, это папка /styles/prosilver/theme/ в которой вы найдёте следующие файлы:
  • bidi.css
  • buttons.css
  • colours.css
  • common.css
  • content.css
  • cp.css
  • forms.css
  • index.htm
  • large.css
  • links.css
  • medium.css
  • normal.css
  • print.css
  • stylesheet.css
  • theme.cfg
  • tweaks.css
1) Меняем белый цвет фона.
В файле styles/prosilver/theme/colours.css найти

Код: Выделить всё

html, body {
   color: #536482;
   background-color: #FFFFFF;
}               
и заменить FFFFFF на нужный вам цвет.

2) Меняем фон шапки.
В файле styles/prosilver/theme/colours.css найти

Код: Выделить всё

.headerbar {
    background-color: #12A3EB;
    background-image: url("{T_THEME_PATH}/images/bg_header.gif");
    color: #FFFFFF;
}        
Здесь есть несколько возможностей.
Можно изменить цвет фонового изображения bg_header.gif , которое находится в папке /styles/prosilver/theme/images/, но учтите, что при этом изменится и цвет фона на страницах при просмотре тем (viewtopic.php), который также зависит от указанного изображения.

Можно создать собственное фоновое изображение, загрузить его с папку /styles/prosilver/theme/images/, затем изменить имя файла фонового рисунка в приведенной выше части кода (меняем имя bg_header.gif на имя загруженного собственного рисунка).

После внесенных изменений вы увидите, что в нижней части цвет всё еще остался синим. Измените цвет фона (background-color) в css файле (замените цветовой код #12A3EB; на нужный).

Сохраните файлы и загрузите их на сервер. В некоторых случаях необходимо обновить кэш браузера нажатием сочетания клавиш CTRL + F5.

3) Меняем цвет страниц форумов.
И снова файле styles/prosilver/theme/colours.css найти

Код: Выделить всё

.forabg {
    background-color: #0076b1;
    background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}     
Данный код задает стиль списка форумов, и для изменения цвета необходимо поменять цвет фонового рисунка bg_list.gif, который находится в папке /styles/prosilver/theme/images/, или заменить его на свой рисунок, как это было описано выше. После этого не забудьте изменить цвет фона ("background-color: #0076b1;") на тот же, который имеет фоновый рисунок.

На странице просмотра форумов вы также видите синие линии, которые также можно изменить в файле colours.css:

Код: Выделить всё

.forumbg {
    background-color: #12A3EB;
    background-image: url("{T_THEME_PATH}/images/bg_header.gif");
}     
меняем только параметр background-color.

Теперь вы можете заметить голубой и светло-голубой цвет фона сообщений на страницах просмотра тем.
Он задается следующим кодом в файле colours.css:

Код: Выделить всё

.bg1   { background-color: #ECF3F7; }
.bg2   { background-color: #e1ebf2;  }
.bg3   { background-color: #cadceb; }     
Изменяйте указанные цвета по своему усмотрению.
Небольшое замечание: при изменении цвета в селекторе bg3, вы должны изменить цвет фоновых рисунков в папке /styles/prosilver/theme/images/, в противном случае вы получите неверное сочетание цветов заголовков (имена файлов: bg_menu.gif , bg_tabs1.gif, bg_tabs2.gif).
Затем вы должны изменить слежующие значения для Личного раздела в файле colours.css:

Код: Выделить всё

    #navigation a {
       color: #333;
       background-color: #B2C2CF;
       background-image: url("{T_THEME_PATH}/images/bg_menu.gif");
    }   
Меняете цвет фона background-color: #B2C2CF;

4) Меняем цвет списка форумов на главной странице.
На главной странице присутстует градиентный синий цвет, также задаваемый фоновым рисунком - gradient.gif, расположенном в папке /styles/prosilver/theme/images/
В файле colours.css за это отвечает код

Код: Выделить всё

ul.forums {
    background-color: #eef5f9;
    background-image: url("{T_THEME_PATH}/images/gradient.gif");
}   
Изменяя указанный фоновый рисунок, не забывайте соответственно изменять цвет фона, как и раньше.

После изменения фоновых рисунков и цвета фона, вы замените синюю границы внизу. Чтобы изменить ее цвет, в файле /styles/prosilver/theme/сolours.css найдите код

Код: Выделить всё

li.row {
   border-top-color:  #FFFFFF;
   border-bottom-color: #00608F;
}  
и измените цвет border-bottom-color: #00608F; на нужный.
После этого вам может не понравиться желтый цвет фона при наведении мыши. Снова в файле /styles/prosilver/theme/colours.css находим код:

Код: Выделить всё

li.row:hover {
   background-color: #F6F4D0;
} 
и изменяем значение F6F4D0 на код понравившегося цвета.
Также возможно изменить его с помощью фонового рисунка, загрузив его в папку /styles/prosilver/theme/images/ и заменив следующий код:

Код: Выделить всё

background-color: #F6F4D0;        
на код

Код: Выделить всё

background-image: url("{T_THEME_PATH}/images/yourimage.gif");  
5) Меняем цвет ссылок.
При этом не изменится цвет ссылок форумов!
В файле /styles/prosilver/theme/colours.css находим код

Код: Выделить всё

    a:link   { color: #105289; }
    a:visited   { color: #105289; }
    a:hover   { color: #D31141; }
    a:active   { color: #368AD2; }       
и меняем цвета на нужные.

6) Меняем цвет ссылок форумов.
В файле /styles/prosilver/theme/colours.css находим код

Код: Выделить всё

a.forumtitle {
   color: #105289;
}   
и меняем значение 105289 на нужное. Находим код

Код: Выделить всё

a.forumtitle:hover {
   color: #BC2A4D;
}   
и меняем значение BC2A4D на нужное.
Находим код

Код: Выделить всё

a.topictitle {
   color: #105289;
}

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

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

a.topictitle:active {
   color: #105289;
}                 
и меняем цвета по своему усмотрению.

7) Меняем цвет панели навигации.
В файле /styles/prosilver/theme/colours.css находим код

Код: Выделить всё

.navbar {
   background-color: #cadceb; /*narbar background color*/
}  
и меняем цвет на подходящий.

И помните: phpBB - это просто.
Изображение

Аватара пользователя
Garret_Dark
phpBB 2.0.16
Сообщения: 1091
Зарегистрирован: 11.01.2009 15:18
Откуда: root/world/russia/
Благодарил (а): 126 раз
Поблагодарили: 204 раза

Re: [FAQ] Как перекрасить prosilver

Сообщение Garret_Dark »

fanatic писал(а):Извините, а где взять таблицу цветов?
Я для такого использую отличную, маленькую программу pixie (Легко ищется через яндекс).
Висит в трее и при наведении мышки на необходимый цвет (Будь то рабочий стол или любая веб-страница ) просто нажимаем Ctrl+Alt+C и имеем в буфере обмена необходимый цвет, после чего достаточно нажать ctrl+v на месте старого цвета.
У проги есть еще несколько полезный фичей.

P.S. Я использовал эту прогу при переезде форума на движок phpbb меняя сабсильвер под старый стиль, благодаря этой проге пропала необходимость рыться в коде старого движка, что ускорило работу в разы!

DizzyG
phpBB 1.0.0
Сообщения: 1
Зарегистрирован: 05.03.2010 15:17

Re: [FAQ] Как перекрасить prosilver

Сообщение DizzyG »

Здравствуйте!Помогите плиз . я цвета изменил все нормально кроме 3х пунктов.
1)Вот линия синим цветом не как не меняется((.Цвет менял по инструкции вашей , и картинку заменял.
2)Углы белые corners.Хотя я менял цвет их на розовый и заменял в тмп.они всеровно остались белыми. может гдето еще нужно править?
3)А вот еще как поменять цвет Ladanza.kz вверху в хедере
Заранее спасибо)
Вложения
ladanza.png

Аватара пользователя
Nekstati
Поддержка
Поддержка
Сообщения: 2797
Зарегистрирован: 19.03.2009 17:43
Благодарил (а): 23 раза
Поблагодарили: 1008 раз

Re: [FAQ] Как перекрасить prosilver

Сообщение Nekstati »

1) theme/colours.css — .forabg
2) theme/images — все картинки со словом "corners" в названии
3) theme/colours.css — h1

Аватара пользователя
Kostelano
phpBB 1.4.2
Сообщения: 69
Зарегистрирован: 23.02.2010 0:59
Откуда: Dnepr, UA
Благодарил (а): 10 раз
Поблагодарили: 12 раз

Re: [FAQ] Как перекрасить prosilver

Сообщение Kostelano »

Гoраздо удобней пользоваться сервисом Beta.colorizeit.com.

Аватара пользователя
Nekstati
Поддержка
Поддержка
Сообщения: 2797
Зарегистрирован: 19.03.2009 17:43
Благодарил (а): 23 раза
Поблагодарили: 1008 раз

Re: [FAQ] Как перекрасить prosilver

Сообщение Nekstati »

Этот сервис хорош, когда требуется небольшое изменение цвета. При радикальной перекраске многое придётся доделывать руками.

wmnetwork
phpBB 1.0.0
Сообщения: 2
Зарегистрирован: 07.05.2010 20:25
Благодарил (а): 1 раз

Re: [FAQ] Как перекрасить prosilver

Сообщение wmnetwork »

Спасибо rxu. Тема очень помогла, разжёвано всё.
знания, которыми должен владеть диабетик

NORD_JR
phpBB 1.0.0
Сообщения: 2
Зарегистрирован: 18.04.2010 0:07

Re: [FAQ] Как перекрасить prosilver

Сообщение NORD_JR »

Изображение
Вопрос:
Пункт 1 на рисунке: где можно изменить данный цвет? не могу найти.
Пункт 2 на рисунке: у меня сообщение сливается с личными данными) там есть полосочка, она такого же цвета оказалась как и цвет фона сообщения. Где найти ту полосочку, чтобы она разделила данные пользователя и сообщение?

Вроде все правильно написал, если что не так написал, спросите)

Аватара пользователя
Rayden
Former team member
Сообщения: 3739
Зарегистрирован: 27.06.2005 1:07
Поблагодарили: 44 раза

Re: [FAQ] Как перекрасить prosilver

Сообщение Rayden »

как искал?
phpBB2 FAQ
phpBB3 FAQ

NORD_JR
phpBB 1.0.0
Сообщения: 2
Зарегистрирован: 18.04.2010 0:07

Re: [FAQ] Как перекрасить prosilver

Сообщение NORD_JR »

colours.css
Искал белый цвет, так как фон сообщений я заливал белым. В поиске набрал код белого цвета, у меня куча мест где оно используется. Хотел бы конкретнее узнать где что править.

Аватара пользователя
Rayden
Former team member
Сообщения: 3739
Зарегистрирован: 27.06.2005 1:07
Поблагодарили: 44 раза

Re: [FAQ] Как перекрасить prosilver

Сообщение Rayden »

Как править или создать стиль.
Совет шестой - используй фаербаг
phpBB2 FAQ
phpBB3 FAQ

azn
phpBB 1.0.0
Сообщения: 1
Зарегистрирован: 05.06.2010 12:05

Re: [FAQ] Как перекрасить prosilver

Сообщение azn »

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

Аватара пользователя
Палыч
Former team member
Сообщения: 9683
Зарегистрирован: 24.05.2006 23:20
Откуда: Питер
Благодарил (а): 3 раза
Поблагодарили: 453 раза

Re: [FAQ] Как перекрасить prosilver

Сообщение Палыч »

Код: Выделить всё

.navbar { 
background-color:
}
Не все то WINDOWS, что висит... phpBB только учусь.
ICQ, email, ЛС - только для личных сообщений. Вопросы по phpbb только на форумах. По найму не работаю.

Аватара пользователя
goodwin
phpBB 1.0.0
Сообщения: 1
Зарегистрирован: 20.06.2010 20:42
Откуда: Kiev

Re: [FAQ] Как перекрасить prosilver

Сообщение goodwin »

navbar font color навбар цвет шрифта
в colours.css:

Код: Выделить всё

.navbar {
  background-color: #000000;
  color: #ffffff;
}
.navbar a:link	{ color: #ffffff; }

association
phpBB 1.0.0
Сообщения: 3
Зарегистрирован: 27.06.2010 20:23

Re: [FAQ] Как перекрасить prosilver

Сообщение association »

Kostelano писал(а):Гoраздо удобней пользоваться сервисом Beta.colorizeit.com.
Кстати, я вчера и воспользовался, перекрасил сайт Европейской Ассоциации Этического Бизнеса в зелёный цвет. Правда, получилось слишком ярко :)

Однако у меня возник вопрос - не повлияет ли это на процесс автоматического обновления с phpBB 3.0.7 до 3.0.8. Тем более, что хочу снова перекрашивать, т.к. ярко-зелёный цвет нам не очень идёт.

Опишу пошагово, как я перекрашивал prosilver. На сайте до этого установлено несколько модов, затрагивающих стили (портал, галерея, рекламные места и т.д.):

1. Зашёл на http://beta.colorizeit.com/ , установил нужные цвета и скачал перекрашенный prosilver себе на комп;
2. Залил со своего компа перекрашенный prosilver на FTP в одноимённую папку, с заменой совпадающих по имени файлов;
3. Восстановил из бекапа за прошлый день (с помощью соответствующего инструмента на хостинге) такие стилевые файлы, которые не влияют на цвет, но в которых вносились изменения при установке модов:
styles/prosilver/template/overall_footer.html,
styles/prosilver/template/overall_header.html,
styles/prosilver/theme/stylesheet.css,
styles/prosilver/imageset/en/imageset.cfg,
styles/prosilver/template/index_body.html,
styles/prosilver/template/memberlist_view.html,
styles/prosilver/template/viewtopic_body.html,
styles/prosilver/theme/bidi.css,
и ещё несколько файлов, связанных со стилем prosilver, в которые вносились изменения при установке модов.

После этого и prosilver стал отображаться перекрашенный, и моды все работают.

Вернуться в «Стили для phpBB 3.0.x»