• 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

Other Pages

You have to now test out all the other pages of the forum to determine which other styles needs fixing. For example, we see that the Check Messages page still have some styling work in the siteScheme.css file.

As you tweak the rules, make sure you don't break the styling of any other pages. If it does, you have to make the CSS rules more specific so that the rule applies only to very narrow specific context.

Do the same for the other pages.

Add Extra CSS Scoping

In the below picture, we have two sets of text that are classed gensmall. However, we want gensmall text outside the box to be black. But the gensmall text inside the box should be white.

We need to add additional scoping to the CSS to say that gensmall text inside table of class forumline should be white.

Now we got the text colors we want...

Need a New CSS Rule

Sometime you may run into a conflict where a text of say class gensmall needs to be black in the main forum page. But it needs to be white in the viewforum page.

For example, gensmall is set for color white and that is what I want in the main forum page. However, when I look at the viewforum page, that text needs to be black. And when I change the style for gensmall to be black, the causes the gensmall text on the main page to be black as well. That is because both pages are using the same CSS file.

What I then need to do is to not touch gensmall CSS rule and leave that as set to white. I create another rule in the CSS file called gensmallblack which is set to black

and have the viewforum page (viewforum_body.tpl) use gensmallblack style instead of the gensmall style.

Next Lesson:

Go to Next Lesson learn how to replacing the icons.