There are two steps involved in setting up your custom style sheets. The first involves customizing “The Enclosure.” The second involves stylizing “The Portal Components.”

With Enclosures, content is usually sandwiched between a header and the footer, but you can also frame it on all sides by using two "L" shaped frames. This approach has only one major risk: What happens when the enclosed content is designed for a wider width than what the enclosure allows? There are several options;    

1.  Make the enclosure wide enough for the content.     
2.  Simply crop and hide the overflowing content.    
3.  Use CSS to style the content so that it doesn't overflow.     
4.  Enable horizontal scrolling.

We recommend using option c because it is the most usable and aesthetic option. You can also implement d or b as a backup option. Most of the color customization for the internal bits can be done from the well-supported portal customization interface. For example, removing the boxy borders in the sidebar is done by changing the border color to white. Here are some other things that CSS can be used for;    

1.  Hiding Elements     
2.  Moving Elements     
3.  Forcing a Narrower Width     
4.  Forcing the Correct Font

Once you are done stylizing the page you will want to make sure that all the pages look good on all your supported browsers. This might take some additional tweaks to get things to look right.

• Salesforce officially supports ID 6 and 7, Firefox 2.x, and Safari 3.0 on Mac OSX.
• The customer portal limits header and footer customization to just 10 kb of data so you will have to reference CSS that lives elsewhere.
• We also recommend inserting your style sheet in both the header and footer to prevent jiggling when the page loads.
• We should note that we only recommend this approach if you have a CSS expert on-call. Because Salesforce doesn't have control over your CSS code, the products and support team can not test, troubleshoot, or rollback when issues arise.

Visualforce for Ideas

With the Winter '09 release customers have the option of using Visualforce to achieve pixel-level control over the ideas application so that you can match the exact look and feel of your website, whether that be an intranet site or a public customer facing website.

Using Visualforce to customize your UI will give you cleaner page loads and since you can customize the markup it is easier to move elements around or add new elements. You still use CSS to stylize the page, but you have more flexibility with the underlying skeleton. Click here to read more about Visualforce for Ideas.

Questions
If you have a question about customizing Salesforce you can post it below and we'll see if a member of the community has an answer for you. If there are Salesforce.com consulting partners with CSS expertise, feel free to leave your contact information below.