All Mozilla-based browsers allow users to customize the display of web pages via a configuration file named userContent.css. To customize Pearl Comments, you add CSS rules to that same file. The first step is to find your profile folder. Inside the profile folder, you will find a folder named chrome. Inside the chrome folder you will need to create a text file named userContent.css (if that file already exists you can simply add more CSS rules to it). There is detailed information available on mozilla.org’s site. Remember to restart your web browser after changing the userContent.css file.

Here is a diagram that shows the classes you can use to customize the sidebar display:

Additional notes: the comment text is contained within an iframe, and the body of that iframe has the class PearlCommentSBBody. Also, if a comment has a status such as “In Progress” an additional class is assigned to its PearlComment element. The additional classes are:

* PearlCommentStatusInProgress
* PearlCommentStatusCompleted
* PearlCommentStatusClosed

Here are some examples that demonstrate how to customize the display of comments in the sidebar:

To hide the comment text, add this rule to your userContent.css file:
.PearlCommentsSidebar .PearlCommentFrame { display: none; }

To hide the topics, add this rule:
.PearlCommentsSidebar .PearlCommentsTopic { display: none !important; }

To display all text using a 9pt font, add these two rules:
.PearlCommentsSidebar * { font-size: 9pt !important; }
.PearlCommentSBBody { font-size: 9pt !important; }


If you want to use black text for the date and author (instead of the medium gray color used by default), add a rule like this one:
.PearlCommentsSidebar .PearlCommentsDateAndAuthor { color: black !important; }

To show “In Progress” comments on a light blue background, use:
.PearlCommentsSidebar .PearlCommentStatusInProgress { background-color: rgb(0,255,255) !important; }

Similar techniques are used to customize the display of comments that are shown on web pages. Here is a diagram that shows the classes you can use:

Additional notes: the comment text is contained within an iframe, and the body of that iframe has the class PearlCommentNoteBody. Also, if a comment has a status such as “In Progress” one of the status classes mentioned earlier is added to the PearlCommentNote elements as an additional class.

For example, if you’d like “Completed” comments shown on web pages to have a white background instead of a green one, add this rule to your userContent.css file:
.PearlCommentNote.PearlCommentStatusCompleted { background-color: white !important; }

To display topics in blue, add:
.PearlCommentNote .PearlCommentsTopic { color: blue !important; }

You can also control the appearance of the icons that shown on web pages. By default, they are somewhat transparent (opacity: 0.3). To remove the transparency entirely, add this rule to your userContent.css file:
.PearlCommentIcon { opacity: 1.0 !important; }

We plan to provide more extensive documentation soon, but this should get you started. If you want to tweak something and cannot figure out how, do not hesitate to ask us.

Andy King from Web Site Optimization has a neat online tool called the Web Page Analyzer that looks at a live site and provides advice to help you reduce page load time and increase usability. Definitely recommended. Andy also is the author of the book Speed Up Your Site.

We always check our pages by running them through the W3C’s Markup Validation Service (works for HTML, XHTML, CSS, and probably more document types). For Atom and RSS feeds, try FEED Validator. Another great informative site is The Web Standards Project. Thankfully most end users have left the older “4.x” browsers behind and are using modern browsers that provide good support for web standards.

Which brings us to CSS (cascading style sheets). Like most people today, we use CSS extensively for page layout, rollover effects, and so on. We often go to the W3C CSS standards site (the horses mouth, so to speak). Eric Meyer is a CSS guru who has an informative site (he is also the author of the books Eric Meyer on CSS and More Eric Meyer on CSS). And when we need inspiration we click on some of the appealing designs over at the css Zen Garden.

CSS-centric sites tend to be treated well by the search engines too. Search engine marketing is a huge, evolving area that is very important for a lot of web sites. Some of the resources we like are SEO Today and Search Engine Watch. One of the leading search engine marketing companies, Oneupweb, also has a lot of good information on their site.

What resources do you rely on to help you create or improve web sites?