| The Style subfolder has only one important file, named style.css. Let's start there. The contents of the file are as follows (ignore the funny way the lines wrap because PHP-Nuke ignores it, too): [View full width] FONT {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px} TD {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px} BODY {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px} P {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px} DIV {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px} INPUT {BORDER-TOP-COLOR: #000000; BORDER-LEFT-COLOR: #000000; BORDER-RIGHT-COLOR:  #000000; BORDER-BOTTOM-COLOR: #000000; BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 10px; BORDER-BOTTOM-WIDTH: 1px; FONT-FAMILY: Verdana,Helvetica; BORDER-RIGHT-WIDTH: 1px} TEXTAREA {BORDER-TOP-COLOR: #000000; BORDER-LEFT-COLOR: #000000; BORDER-RIGHT-COLOR: #000000; BORDER-BOTTOM-COLOR: #000000; BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 10px; BORDER-BOTTOM-WIDTH: 1px; FONT-FAMILY: Verdana,Helvetica; BORDER-RIGHT-WIDTH: 1px} SELECT {BORDER-TOP-COLOR: #000000; BORDER-LEFT-COLOR: #000000; BORDER-RIGHT-COLOR: #000000; BORDER-BOTTOM-COLOR: #000000; BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 10px; BORDER-BOTTOM-WIDTH: 1px; FONT-FAMILY: Verdana,Helvetica; BORDER-RIGHT-WIDTH: 1px} FORM {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px} A:link {BACKGROUND: none; COLOR: #004080; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline} A:active {BACKGROUND: none; COLOR: #004080; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline} A:visited {BACKGROUND: none; COLOR: #004080; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline} A:hover {BACKGROUND: none; COLOR: #004080; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline} .title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 14px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none} .content {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica} .block-title {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica} .storytitle {BACKGROUND: none; COLOR: #363636; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none} .storycat {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline} .boxtitle {BACKGROUND: none; COLOR: #363636; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none} .boxcontent {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica} .option {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none} .tiny {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
Gobbledygook, right? Not so! First you have to learn how to pick this thing apart. Each style element consists of a name and then several style properties enclosed in curly braces. So the following is a single style element: [View full width] INPUT {BORDER-TOP-COLOR: #000000; BORDER-LEFT-COLOR: #000000; BORDER-RIGHT-COLOR: #000000; BORDER-BOTTOM-COLOR: #000000; BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 10px; BORDER-BOTTOM-WIDTH: 1px; FONT-FAMILY: Verdana,Helvetica; BORDER-RIGHT-WIDTH: 1px}
The stuff in the braces is pretty easy to figure out: The top border will be black (#000000). The left, right, and bottom borders will also be black. The borders will be 1 pixel thick. The font will be 10 pixels high. The font family, or name, is Verdana, by preference. Users who don't have that font can use the more generic Helvetica, which is a standard sans-serif font.
Easy, right? All of those style properties apply to an element named INPUT, which means the <INPUT> HTML tag. In other words, all input fieldstext boxes, buttons, and whatnotwill be displayed using these style parameters. You'll notice additional elements for TD, which covers table cells; BODY, which is the main body text for a page; and so forth. You don't need to mess with these beyond changing the colors (the #000000 means black) and, if you like, the font sizes. You can also add a style property, FONT-COLOR=#00000, to specify a font color of black (or whatever color you prefer). Just remember to keep each style property separated by semicolons, as shown in the previous example. How can you make colors? Well, all color, as you learned in school, is composed of red, green, and blue, which is sometimes called RGB (we're referring to additive, or light-based, color, as produced by a computer monitor). So in #000000, you're getting zero parts red, zero parts green, and zero parts blue, for black. It's hexadecimal, so the numbers go from the usual 0 to 9 and then A to F, with A representing 10, B 11, and so forth. #FFFFFF represents full-on red, green, and blue, which makes white. #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue. What do you get when you mix #FF0000 and #0000FF? Red and blue make purple, or #FF00FF. You get the idea. Play around. You'll also see elements in style.css that start with a period, such as this one: [View full width] .boxtitle {BACKGROUND: none; COLOR: #363636; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
This is a special type of element called a class. You modify it in exactly the same way, so you don't really even need to worry about the different. But if you're interested, here it is: Most of PHP-Nuke's pages are made up of HTML tables. The <TD> tag is the basic unit of a table and specifies a single table cell. You'll notice that the style.css file has only one TD element (and it can have only one), but PHP-Nuke displays many different types of tables. Text in a block, for example, is different than the text in the middle of the page, yet both are made up of <TD> tags. What gives? The trick is that PHP-Nuke (well, each theme, really) draws tables with classes attached. So a tag named <TD class="boxtitle"> won't display using the normal TD style from style.css; it displays with the style specified for .boxtitle, shown earlier. So, as you can see, you need to do a bit of experimentation. Simply modify style.css, upload it over the existing one, and view your Web site. Decide which of your changes worked and which didn't, and repeat the process until you're happy with the final result. By modifying the style.css file, you can control the appearance of textual elements, such as (obviously) text, form controls, buttons, and so forth. Modifying graphics takes a slightly different approach. |
