How do I debug the look and feel (CSS) of the end user pages?
Environment:
All end user pages using Customer Portal
Resolution:
End user page formatting is controlled by page Cascading Style Sheets (CSS) files. The development (editable) version of CSS files are in the directory of the template that you are using. Usually the main file is "/assets/themes/standard/site.css".
End user page look and feel issues can be easily debugged with a web development tool such as the Firebug plugin for Firefox. https://getfirebug.com/
Note that there are also CSS debuggers available for other browsers such as Chrome. If you have a browser specific problem you may have to use a tool in a different browser. Note that although the instructions below are for Firebug, there is equivalent functionality in other tools.
1. Before proceeding install the latest version of Firefox and the Firebug plugin. Refer to the documentation of Firebug to find how to enable and use the plugin.
2. In Firefox with Firebug enabled, select the text with incorrect formatting, right click and select Inspect Element with Firebug.
3. The firebug console will appear with the HTML of the selection highlighted, a list of the CSS tags and the files that they reside. The files are usually contained in the "/assets/themes/<theme name>/" folder.
4. Note the file that the CSS tags is contained and make changes to that file.
Note that you can click on a CSS file name and make changes directly to the CSS in Firebug for troubleshooting. However, these changes are not stored in the CSS files and are therefore temporary.
Please note that Technical Support does not assist with CSS customization questions. If you need further assistance with CSS customization please refer to the Oracle Cloud Customer Connect Community, or you can work with Oracle Consulting Services.
Cause:
Often times there are many formatting tags from different files applied to one piece of text.
For help with CSS please refer to a CSS reference such as http://www.w3schools.com/cssref/.
