• Lesson Index:
• Overview
• Installation
• Admin Panel
• User Rank
• User Registration
• Admin Email
• COPPA Regulation
• User Admin
• Adding Forums
• Member-Only Forums
• Moderators
• Disable Forum
• Backup Database
• Admin Password
• Upgrades
• phpBB Skins
• Customization
• Change Email Wording
• Registration Screen
• New Style
• Customize Style
• Replace Logo
• Edit Theme Style
• Other Pages
• Replacing Icons
• Converting User Style
• Integrate Website
• Detecting Login
• Implement Search
• phpBB Notes

Customize the New Style

In the last lesson, we created a new style called siteScheme and set that as the default style.

Now we are going to customize the color and fonts of this new siteScheme style.

1. Open the file overall_header.tpl found inside templates/siteScheme folder.

2. You will find that the <link> tag referencing the external css is currently disabled. Enable that by making the changes shown. Delete the embeded css so that you have only the following in the embedded <style>. And replace all instances of subSilver with siteScheme.

This will enable the siteScheme.css rules to take effect.

4. Make similar changes to the simple_header.tpl file. If you want the admin control panel pages to use your forum styling, you need to make the similiar changes to admin/page_header.tpl But since only admin will see those page, it might be easier if you leave them as is.

5. We will now change the siteScheme.css rules to the colors and style of our liking.

6. With the aid of Dreamweaver, I was able to determine which rules corresponds to which element...

7. And make the necessary changes in the siteScheme.css file.

I have showed you only some of the changes. You will need to go through the file and made the necessary change specific to your site.

8. And this is what I have after upload siteScheme.css and overall_header.tpl to webhost...

The table header and forum title cell background did not change because they are background images as shown above.

9. Using our favorite graphical editor, we make the graphical alterations to cellpic1.gif, cellpic2.jpg, and cellpic3.gif found in templates/siteScheme/images and upload. We get the following...

10. We see that our page background colors and border needs styling. So we change them to ...

Add a texture background to body ...

Make sure we drop the bg.gif into the siteScheme/images directory.

and we get...

We are getting there.

Next Lesson:

Go to Next Lesson to learn how to replace the phpBB logo with our own logo.