Для управления внешним видом страницы, кроме файла theme.php, PHP-Fusion использует файл style.css. Если первый файл управляет структурой, как бы "чертами лица" страницы, то второй отвечает за "макияж" - цвета фона, текста, заголовков, ссылок, размер шрифта и все такое прочее.
В файле style.css располагаются описания различных стилей используемых на страницах сайта. Большинство из них имеют стандартные, общие для всех тем названия. Самы простой и эффективный способ разобраться с тем какой стиль за что отвечает, это открыьт страничку сайта в браузере и посмотреть в ее исходный HTML-код. Оттуда и можно заключить следующее:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->body {...}<!--c2--></div><!--ec2-->
- определяет общий вид темы (шрифт по умолчанию, размер, отступы и т.д.)
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->a {...}
a:hover {...}
a.side {...}
a:hover.side {...}
a.white {...}
a:hover.white {...}<!--c2--></div><!--ec2-->
- от этих стилей зависит облик и поведение ссылок на Вашем сайте
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->hr {...}
hr.side-hr {...}<!--c2--></div><!--ec2-->
- устанавливает размеры и цвет линй выводимых тэгом by <hr>
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.button {...}<!--c2--></div><!--ec2-->
- фон, шрифт, окантовка кнопок.
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.textbox {...}<!--c2--></div><!--ec2-->
- внешний вид полей ввода (пароля, например)
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.main-bg {...}
.side-border-left {...}
.side-border-right {...}<!--c2--></div><!--ec2-->
- здесь задаем отступы от границ (в пикселах) от верха, низа, левой и правой границ
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.tbl-border {...}
.tbl {...}
.tbl1 {...}
.tbl2 {...}<!--c2--></div><!--ec2-->
- тут определяется облик таблиц сайта, какие, например, используются на страницах форума
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.quote {...}<!--c2--></div><!--ec2-->
- внешний вид процитированного (на форуме) текста
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.poll {...}<!--c2--></div><!--ec2-->
- это часть относится к голосованиям
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.comment-name {...}<!--c2--></div><!--ec2-->
- внешний вид в котором будут представлени ники авторов комментариев
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.shoutboxname {...}
.shoutbox {...}
.shoutboxdate {...}<!--c2--></div><!--ec2-->
- определяет шрифт, цвета ников и даты в мини-чате
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.small {...}
.small2 {...}<!--c2--></div><!--ec2-->
- облик текста отмеченного, как small или small2
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.gallery {...}
.gallery img {...}
.gallery:hover img {...}
img.activegallery {...}<!--c2--></div><!--ec2-->
- определеяет цвета рамок, и границы фотоальбома.
Вот основные используемые стили.
В принципе тема может использовать и свои собсвенные, которые в этом случае слудет добавить в тот же файл style.css.
Внешний вид элементов дизайна определяется не только стилевыми таблицами, часто необходима еще и графика.
В файле style.css располагаются описания различных стилей используемых на страницах сайта. Большинство из них имеют стандартные, общие для всех тем названия. Самы простой и эффективный способ разобраться с тем какой стиль за что отвечает, это открыьт страничку сайта в браузере и посмотреть в ее исходный HTML-код. Оттуда и можно заключить следующее:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->body {...}<!--c2--></div><!--ec2-->
- определяет общий вид темы (шрифт по умолчанию, размер, отступы и т.д.)
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->a {...}
a:hover {...}
a.side {...}
a:hover.side {...}
a.white {...}
a:hover.white {...}<!--c2--></div><!--ec2-->
- от этих стилей зависит облик и поведение ссылок на Вашем сайте
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->hr {...}
hr.side-hr {...}<!--c2--></div><!--ec2-->
- устанавливает размеры и цвет линй выводимых тэгом by <hr>
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.button {...}<!--c2--></div><!--ec2-->
- фон, шрифт, окантовка кнопок.
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.textbox {...}<!--c2--></div><!--ec2-->
- внешний вид полей ввода (пароля, например)
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.main-bg {...}
.side-border-left {...}
.side-border-right {...}<!--c2--></div><!--ec2-->
- здесь задаем отступы от границ (в пикселах) от верха, низа, левой и правой границ
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.tbl-border {...}
.tbl {...}
.tbl1 {...}
.tbl2 {...}<!--c2--></div><!--ec2-->
- тут определяется облик таблиц сайта, какие, например, используются на страницах форума
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.quote {...}<!--c2--></div><!--ec2-->
- внешний вид процитированного (на форуме) текста
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.poll {...}<!--c2--></div><!--ec2-->
- это часть относится к голосованиям
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.comment-name {...}<!--c2--></div><!--ec2-->
- внешний вид в котором будут представлени ники авторов комментариев
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.shoutboxname {...}
.shoutbox {...}
.shoutboxdate {...}<!--c2--></div><!--ec2-->
- определяет шрифт, цвета ников и даты в мини-чате
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.small {...}
.small2 {...}<!--c2--></div><!--ec2-->
- облик текста отмеченного, как small или small2
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.gallery {...}
.gallery img {...}
.gallery:hover img {...}
img.activegallery {...}<!--c2--></div><!--ec2-->
- определеяет цвета рамок, и границы фотоальбома.
Вот основные используемые стили.
В принципе тема может использовать и свои собсвенные, которые в этом случае слудет добавить в тот же файл style.css.
Внешний вид элементов дизайна определяется не только стилевыми таблицами, часто необходима еще и графика.
