Scribd
Upload
2K views

PHPFox CSS Guide

This document provides instructions for customizing the colors of various elements on the PHPFox CSS template. It lists over 30 CSS selectors and properties that can be modified to change colors like backgrounds, text, borders, and hovers. Examples include changing the main page background, top menu colors, forum strips, boxes, and footer colors. Users are advised to make a copy of the original CSS file before making any modifications.

Uploaded by

beaneroo
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
2K views

PHPFox CSS Guide

This document provides instructions for customizing the colors of various elements on the PHPFox CSS template. It lists over 30 CSS selectors and properties that can be modified to change colors like backgrounds, text, borders, and hovers. Examples include changing the main page background, top menu colors, forum strips, boxes, and footer colors. Users are advised to make a copy of the original CSS file before making any modifications.

Uploaded by

beaneroo
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 32

PHPFox CSS Guide

This is a basic guide for changing the colors of the


standard Konsort theme.
Find your CSS file here: /file/style/
Please make a copy of your original css file. Use at
your own risk.
I use coordinated color combo sets, find it here
http://www.colorcombos.com

Scooty
Changes the main background color

• body {
background:#7F5417;
color:#000;
text-align:center;
margin-left:auto;
margin-right:auto;
font-size:9pt;
font-family:verdana, arial, helvetica,
sans-serif;
margin-bottom:20px;
margin-top:0px;
‘Welcome Guest’ ‘or’ ‘|’ ‘language’ colors’

}
#top td {
color:#32FA0B;
}
Changes top color strip of logo background

.top2 {
background:#32FA0B;
Changes color of left/right sides of BROWSE HOME GALLERY
menu links

#outer2 {
background:#32FA0B;
text-align:center;
Changes background color of

BROWSE HOME GALLERY ETC

.menu {
border-bottom:2px #54A4DE solid;
background:#FF3333;
height:30px;
padding-left:5px;
padding-right:5px;
cursor:pointer;
color:#fff;
font-size:7pt;
font-weight:bold;
Changes color of logo background

.top2 {
background:#32FA0B;
Changes color of comment background

/* COMMENT BOX */
.comment {
border:1px #BDBDBD solid;
background:#FF3333;
color:#000;
Changes color of Not yet a member?
.mainmenu4 {
background:#FF3333;
font-size:7pt;
color:#fff;
Changes color of comment text
.comment-text {
color:#FF3333;
font-size:8pt;
Changes background mouse over color of BROWSE HOME
GALLERY

menu2 {
background:#FFCC33;
height:30px;
padding-left:5px;
padding-right:5px;
cursor:pointer;
Changes language dropdown box background upper right corner

#top input,select {
font-size:8pt;
background:#32FA0B;
color:#000;
Changes color of bottom menu

#bottom3 {
background:#FF3333;
width:100%;
font-size:7pt;
font-weight:bold;
text-align:center;
color:#fff;
Changes footer text color

#bottom3 a {
color:#FF3333;
Changes text color of footer on mouseover

#bottom3 a:hover {
color:#FF3333;
text-decoration:underline;
Changes color strip of footer

#bottom4 {
background:#FF3333;
width:100%;
color:#fff;
Changes the color of this symbol | bottom page

#bottom3 {
background:#195B85;
width:100%;
font-size:7pt;
font-weight:bold;
text-align:center;
color:#FF3333;
Changes the colors of LIVE CHAT- IM -BOOKMARK

#top a {
font-size:7pt;
color:#32FA0B;
Changes background color of all pages

#main {
background:#FF3333;
font-size:8pt;
color:#000;
border-left:1px #D9D9D9 solid;
border-right:1px #D9D9D9
solid;
Changes font color on forum, and new pages
#main {
background:#fff;
font-size:8pt;
color:#FF3333;
border-left:1px #D9D9D9 solid;

border-right:1px #D9D9D9 solid ;


Changes color of login background
.border {
border:1px #332F2F solid;
background:#FF3333;
Changes mouse over color of LIVE CHAT- FLASH CHAT- IM - BOOKMARK

#top a:hover {
font-size:7pt;
color:#32FA0B;
text-decoration:underline;
Changes color of little squares on visitor page

.sqr1
{
background:#FF3333;
vertical-align:middle;
margin-left: 4px;
margin-right: 3px;
}
Changes color of boxes on pages
.border2 { border:1px #BDBDBD solid; color:#000;

background:#FF3333; }
Changes color of member login box and recent login on visitor page

.mainmenu3 {
background:#FF3333;
font-size:7pt;
color:#fff;
Changes color of some title boxes and comment header box

.mainmenu5 {

background:#FF3333
;
font-size:7pt;
color:#fff;
Changes background color of Main, My Account, Settings etc
.item2 {
border-top:2px #000 solid;
border-left:1px #ccc solid;
border-right:1px #ccc solid;
border-bottom:1px #fff solid;
padding-top:9px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
cursor:pointer;
font-size:7pt;
font-weight:bold;
background:#FF3333;
color:#195B85;
Changes Forum strips
.forum-1 {
background:#FF3333;
color: #fff; You can change the font color here.
font-size:8pt;
Changes forum background & icon background
.forum-2 {
background:#FF3333;
color:#000;
font-size:8pt;
Changes forum links colors

.forum-2 a { color:#FF3333; }
Changes forum links mouseover color

.forum-2 a:hover { color:#FF3333; text-decoration:underline; }


Changes forum message background color
.forum-4 {
border:1px #000 solid;
background:#FF3333;
color:#000;
font-size:8pt;

You might also like