» » » Как перекрасить prosilver phpbb

Как перекрасить prosilver phpbb

0
Как перекрасить prosilver phpbb

Итак: перед тем, как начать, имеет смысл отключить кэширование. Это может быть сделано через администраторский раздел: Нагрузка на сервер - Перекомпилировать старые шаблоны: Да.

Начнём.

Прежде всего, необходимо найти файлы, которые нужно править. Они находятся в соответствующей папке нужного вам стиля.
В нашем случае, это папка /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 - это просто.
Внимание!
Для просмотра скрытого текста, Вам необходимо Войти или Зарегистрироваться.
  • Полезные статьи
  • 25-01-2011, 17:34
  • 8305
Вернуться назад
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.