Using 'browser.css' and 'user.css' in Opera 7.5 for non-geeks

, , , ,

Quick tutorial on using 'browser.css' and 'user.css' in Opera 7.5. This is meant as an introduction for people not well versed in CSS.

  • A file stored as 'browser.css' in the directory \Profile\styles will be used to override browser default styling (and also author styling if you add '!important' to a rule); it will always be applied. Changes in browser.css need a restart before becoming effective.
  • You can also create a 'user.css' file. You can control when to apply it with the settings under 'Tools > Preferences > Page Style > Configure modes' and Ctrl+G (Shift+G in Opera 8 and higher).
  • See 'Help > About Opera' to locate you Profile directory.
  • CSS files are rulesets stored as plain text files, easily created with, for example, Notepad.
  • CSS rules consists of 'selectors', which select a piece of the HTML document to work on, and 'declarations' that say how to style that piece. Declarations consist of one or more 'property:value' pairs.
  • * is the universal selector.


Here are some examples of a css rules to put in either browser.css or user.css files. You just put them after each other in the css file.

Rule to fix the font face

 * {font-family: "Trebuchet MS", Arial !important;}
 pre, code, tt, kbd {font-family: "Andale Mono", "Courier New" !important;}


Or leveraging your settings for 'Generic CSS font families':

 * {font-family: sans-serif !important;}
 pre, code, tt, kbd {font-family: monospace !important;}


Rules that fix font size
With some inflexible pages, this can lead to uglier display as text overflows too narrow boxes.

 * {font-size: 16px !important;}
 big {font-size: 18px !important;}
 small {font-size: 14px !important;}
 h1 {font-size: 26px !important;}
 h2 {font-size: 22px !important;}
 h3 {font-size: 20px !important;}
 h4 {font-size: 18px !important;}
 h5, h6 {font-size: 16px !important;}


Rules that fix colors

 * {color: black !important; background: white !important;}
 a:link {color: blue !important; background: white !important;}
 a:visited {color: purple !important; background: white !important;}
 a:active, a:hover {color: red !important; background: white !important;}


More info can be found at <http://nontroppo.org/wiki/OperaUserCSS>

Updated setups (toolbars, menus and shortcuts) for 7.5Opera Dictionary tool 'ODict'

Comments

dapxin Wednesday, February 11, 2009 9:29:46 AM

Is there a way to make a specific rule for a specific site? +

make the site autoload the rule all the time ?

Rijk Friday, February 13, 2009 2:06:49 PM

@daxpin: sure, this post is old, but in Opera 9 you set a specific user style sheet for each site. Right-click on a page, pick 'Edit Site Preferences', go to the 'Display' tab and enter the css file you've made for that site.

Write a comment

New comments have been disabled for this post.