Все для CMS » Вебмастеру » Полезные статьи » Как перекрасить prosilver phpbb

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

  • 0
Данный материал предоставлен сайтом All4Cms.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Как перекрасить 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
  • 10 849
Вернуться назад
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.