Osetin
12.12.2013, 15:36
Данная статья является переводом статьи [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*/
}
и меняем цвет на подходящий.
Итак: перед тем, как начать, имеет смысл отключить кэширование. Это может быть сделано через администраторский раздел: Нагрузка на сервер - Перекомпилировать старые шаблоны: Да.
Начнём.
Прежде всего, необходимо найти файлы, которые нужно править. Они находятся в соответствующей папке нужного вам стиля.
В нашем случае, это папка /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*/
}
и меняем цвет на подходящий.