Chapter 2 — Hacking Around Manually Figure 2-5 shows Firefox with throbber and search-bar customizations.
FIGURE 2-5: Throbber with border, spacing, and margin customizations, and wider search bar
What you should notice is a blue 1-pixel border around the throbber, with 5 pixels of padding space to the left and right inside the border, and 20 pixels of margin spacing outside the border. Additionally, the search bar is now wider and will resize dynamically if the window becomes smaller. The properties that are included here are standard Cascading Style Sheet properties. For full CSS Level 1 standards and documentation, visit http://www.w3.org/TR/REC-CSS1/. Additionally, for CSS Level 2 standards, visit http://www.w3.org/TR/REC-CSS2/.
Hacking the userContent.css File Much like userChrome.css, the userContent.css file uses CSS standards to allow you to manipulate properties. The key difference is that userContent.css alters the style or layout of the web page content instead of user interface elements. The userChrome.css file is also located in the chrome subdirectory of the profile, and a sample userChrome-example.css file is included with new profiles. To test the examples in this section, you can edit the userContent-example.css file and copy it into the chrome directory in your profile folder as userContent.css. Later in the book, you see how to use the userContent.css file to block unwanted advertisements. This section includes a basic example of how to manipulate the browser’s content to show a red dashed border around links that target a new window. The changes applied in this example modify web page links with targets of _new and _blank. These targets tell the browser to open a new window with the content from the link when clicked. The syntax for this customization is much like that of the previous userChrome.css example: /* Put dashed red border around links that open a new window */ :link[target=”_blank”], :link[target=”_new”], :visited[target=”_blank”], :visited[target=”_new”] { border: thin dashed red; padding: 2px !important; }
25