Joined: 28 Jul 2005
|Posted: Mon Aug 20, 2007 3:14 pm Post subject: How to: Edit Styles and Font Colors
|Got a style you love, but the font color is wrong? Want to make a basic tweak to your favorite style?
If so, you may be interested in learning how to edit your styles.
Quick Guide to Style Editing
Go to Styles Admin -> Management.
Locate the Style to be edited and click the Edit link. Pick a single value to change. First, you might want to copy the original value of the field to a local file on your computer in case you want to revert to the old value. Then change the value and click Save Changes at the bottom of the page, and then try out your changes.
Detailed Style Editing Example
Go to Styles Admin -> Management.
Locate the Style to be edited and click Edit.
Then locate the line labeled Background Color on the page.
- There is a form field on this line containing the text E5E5E5, or other HTML color code. Delete that text.
- Type CC0000 in the form field. Use the number zero, not the capital letter O.
- Scroll down to the bottom of the page and press the Save Settings button.
- On the next page, click the word Here in the text Click Here to return to Style Administration. This returns you to the Styles Administration page.
- Reload your forum to see the results
What Just Happened? As the name suggests, the style edit allows you to alter some aspects of the forum's theme. Each aspect that can be altered has a matching form field, such as Background Color for the background color of forum pages. By replacing E5E5E5 with CC0000, you altered the page background color from a light gray to red. If you replace CC0000 with E5E5E5 and Save Settings again, the change will be reversed.
Editing Other Theme Components
You can change more than just the background color of pages.
The remaining options are presented in a three-column format. The first column, Theme Element, describes the individual settings while the second column holds the current values. When you install a new style, some values may or may not be provided automatically; it varies from style to style. These two columns are the most relevant to your needs.
The third column, Simple Name, can hold some extra descriptive information about the use of these settings. If you look at the Edit Style page for subSilver, you can see this in action. You can enter short descriptions of your own.
Since there are so many options on this page, let us concentrate on the types of values that can be entered, the settings used most often, and the ones you would most likely want to change. Many settings are alternative versions of others, so looking at every single one in detail is not necessary. All of the options are listed in a table at the end of this section.
Not all templates will use every setting in the same way. Some templates also do not use all of the settings provided. You should consider the descriptions provided here as a general guide to the ways the settings can be used, but not how they must be used. There is a fair amount of flexibility here, and some templates make use of that.
There are several types of values that can be entered and most settings accept only one type. Those restricted to one kind of value can be grouped under filename, color, font size, and font face settings. Only one kind of value can be used in each group of these settings.
Color settings require a hexadecimal color code. Hexadecimal color codes, sometimes called HTML color codes, are combinations of six letters and numbers that represent a color, usually prefaced with a pound symbol (#). Many websites provide charts and lists that show examples of these codes. When entering a hexadecimal color code into the color settings of this page, you must not include the pound symbol. The color settings will accept only six character values, so including the pound will cause the last character of the code to be cut off! That can lead to some weird color effects. You may be tempted to enter a color name, such as red or green, for the color settings. If you do so, however, you will get some strange results. Lists of the different hexadecimal codes are available on many websites. Two good lists can be found at http://html-color-codes.com/ and http://www.2createawebsite.com/build/hex-colors.html .
Font fields accept comma-separated lists of typeface names. An example of a good value is Verdana, Arial, Helvetica, sans-serif. If you want to include a name that consists of more than one word in the list, place it inside single or double quotes: for example, 'Verdana', 'Trebuchet MS'. You can also use a single name, but it is a better idea to use a list. When a list is provided, the first font that is installed on the viewer's computer will be used.
Commonly Used and Altered Elements
You have already learned about a few settings, such as font sizes and faces, in the previous section. Now let us examine some more useful options in the Edit Style page.
Table Cell Colors
The Table Cell Color 1 and Table Cell Color 2 are interesting because they are perhaps the most commonly used. Any aspect of phpBB that displays data in table rows, such as the member list, forums, and topics, can use these elements to achieve an alternating row color effect.
Two options that many forum administrators like to change, but often cannot locate without help, are Font Color 2 and Font Color 3. All font color settings are used to color a variety of text, but these two are used for the special colors given to administrator and moderator usernames on the forum in several locations like online user lists. Font Color 3 assigns the administrator names' color, and Font Color 2 details moderator name color.
Again, these colors are used in other places as well, so be sure to look around the forum if you change them. It is very easy to change the name colors to something nice only to find your table headers or code BBCodes have become unreadable.
Once you have edited the elements to your preferences, you should click the Save Settings button at the bottom of the Edit Style page to store the new values in the database. You will be shown a confirmation message that the settings have been updated, and the new settings should be reflected on any page loaded after that message.
Editable Values Overview
Style Element Name Description
Background Color: Color of page backgrounds.
Text Color: Default text color of all pages.
Link Color: Default color of all unvisited links.
Visited Link Color: Color for all links that have been visited.
Active Link Color: When clicking a link, it switches color. Not used in some styles.
Hover Link Color: When moving the mouse pointer over a link it changes to this color.
Table Row Color 1: Background color for table rows, often very light.
Table Row Color 2: Another, usually medium, table row background color.
Table Row Color 3: Third row background color, rarely used and is often the darkest.
Table Header Color 1: Color for table headings. Also used for page borders in some styles.
Table Header Color 2: Second heading color. Also used for table borders in some styles.
Table Header Color 3: Third heading color. Also used for inner table borders in some styles.
Table Cell Color 1: Background color of various common table cells.
Table Cell Color 2: Alternative table cell background color.
Table Cell Color 3: Another table cell background color. Not used in some styles.
Font Face 1: Default type face for most text.
Font Face 2: Second type face, sometimes for topic titles.
Font Face 3: Third type face. Often used for code BBCode tags.
Font Size 1: Smallest font size.
Font Size 2: Medium font size.
Font Size 3: Largest font size, used for most text, including posts.
Font Color 1: Quote BBCode text color.
Font Color 2: Code BBCode text color. Also moderator username color.
Font Color 3: Table header cell text color. Also administrator user name color.
Some styles also contain editable values like "Table Header Class 1", etc. These are often image names. We recommend that you leave these values alone as documenting these is a bit more complex, but for the adventurous admin, these values are editable.
Please be very careful when editing Styles. We've tried to make this feature as safe as possible to use, but it is powerful and you could wind-up with a problem if you aren't careful. But don't worry if you mess-up your style, you can remove it and reinstall it to get a fresh copy of the original style.
Some styles may not use some of the editable values, in which case changing these values would have no effect. Also some styles may hardcode certain values which can not be overridden thru the style editor and and not be changed.
Thank you for choosing ForumWise.
Please don't private message me for support or chit-chat, use the forums.
Last edited by forumwise on Sat Jul 26, 2008 12:27 pm; edited 2 times in total