User CSS tips and code for Opera

CSS (Cascading Style-Sheets) control how things look on websites by telling browsers how to display the various HTML tags such as headers and paragraphs. Opera gives you you very fine control about how websites look by using local CSS files. To learn more about CSS, see W3Schools and HTMLDog for tutorials.

There are several ways to apply local CSS in Opera 9:

  1. Browser
  2. browser.css
  3. Site(author) stylesheet
  4. User Stylesheet
  5. Individual user stylesheets

The first method allows the user to control how he wants the browser defaults to work, but it is not designed to be turned on/off. If you want to apply system-wide changes (that apply to all users), you can put a browser.css in the main Opera directory's styles folder instead of in your "personal Opera directory".

The second method can be turned on/off using the author/user toggle, but it is again a single file that will apply to every page.

The third method is the most flexible, allowing several style-sheets to be easily toggled on or off. This is good for general viewing preferences that could be applied to any site.

The fourth method allows you to apply CSS changes only to a certain site. This is best for problems you encounter only on a certain site but don't want to apply to other sites. It can be turned on and off.

Applying CSS to all pages using 'My stylesheet'

In certain cases, you will want styles applied to all pages, and this is where 'My Stylesheet' can be used. If you would like all pages to use larger fonts, then you can apply that here and not have to add it to the styles menu. Another example is shown below, where optimal printing defaults can be applied.

With CSS it is possible to say that the rules should apply only to a specific medium by enclosing the rules in sections like:

@media print {
Rules for how the page should look when you print it go here
}
@media screen {
Rules for how the page should look when you read it on a screen go here
}

Normally authors don't care much for media types and skip using these sections alltogether. When doing that, they will apply everywhere. More on media types

CSS for printing

This makes text small(saves paper), makes sure headers are not at the end of the page, and avoids code-samples and lists being broken onto several pages.

@media print {
html,body {
font-size:9pt;
}
h1,h2,h3,h4,h5,h6 {
page-break-after: avoid;
}
pre,code,samp {
white-space: pre-wrap;
page-break-inside: avoid;
}
ul, ol, li {
page-break-inside: avoid;
}
table table,tr,td {
page-break-before: avoid;
page-break-after: avoid;
}
}

CSS for black/white printing

This turns everything into black foreground on white background. Borders aren't changed. Of course will save lots of ink (they're so expensive on my country)!

@media print {
* {
  background: white !important;
  color: black !important;
}
}

Applying User Stylesheets under the Styles Menu

Several user stylesheets are available by default under the View > Style menu and from the "Author Mode" drop-down on the view toolbar. These files are stored in your profile\styles\user folder. To add your own stylesheets to the menus, simply create a new CSS file in the profile\styles\user folder. You can also customize the existing styleseets.

Normally, Opera will use the file name to decide what to show in the View>style menu, but you can name them as you like by adding a comment in the beginning of each file, as such:

/*Name: My cool stylesheet */

You can choose whether you want to completely replace or add your styles to the pages you visit. This is controlled via the Configure Modes dialog in preferences » Page style » Configure modes...:

a bulb
You see two sections here: If you want to add your styles to the page, you will have have to check the 'My style sheet' checkbox in the Author mode section. By toggling between Author and User mode you can now choose whether or not you want the styles to apply alone or in addition to the page's style sheets. Not that the 'My style sheet' box in Author mode is ticked by default in Opera 9, unlike in previous versions.

Available stylesheets for the Page style menu

  1. Several nice User CSS sheets by DarkElf.
  2. RSS reader by TomAn, including Atom support!

Applying CSS to specific sites using 'My stylesheet'

Preliminary Setup

First you'll need to set Opera to display user stylesheets in author mode. By default they are turned on in user mode and off in author mode. Using the View dropdown (eyeglasses or magnifying glass depending on your skin), choose Display > Manage modes. (You can also access this through Tools > Preferences > Advanced > Content> Style options). Go to the "Presentation modes" tab and check the box next to "My style sheet" under the "Author mode" heading.

Applying the Stylesheets

  1. Create a your CSS file with the changes you want to apply to the site. Save it somewhere on your computer and name it with the title of the site and a .css extension. You'll probably want to create a special folder on your hard drive for all your user stylesheets.
  2. Go to the site you're applying the style to in Opera
  3. Right click on the page or press F12 and choose "Edit Site Preferences"
  4. Go to the "display" tab
  5. From the "My style sheet" box, use the "choose" button to browse you hard drive and find the file you just created.
  6. Press "ok". Your changes should appear immediately.

Reloading your Stylesheet

Note: if you go back and make changes to the css file Opera 9 will not refresh it automatically. You can add a new shortcut to do this. The shortcut is called "Reload stylesheets & Refresh display". To add it, go tools > preferences > advanced > shortcuts > edit. Then select a category and click "new". This will create an empty field. Enter a keyboard shortcut of your choice in the first field (you might want to use the quick search first to make sure it's not already assigned to something else. You can remove that if you want to). Double click in the space next to your new shortcut under "actions" and enter "Reload stylesheets & Refresh display". Click away from the box to set it, and click "okay" to accept your changes.

Sites with pre-made User stylesheets files

My Stylesheet - wiki site with user stylesheets for Opera, Firefox, and Safari
UserStyles.org - made for Firefox, but if you take the mozilla bits out at the top and bottom and copy them into a new file they'll work in Opera

Related on the web:

MooseCSS's tutorial on Opera user stylesheets and Opera Employee Rijk van Geijtenbeek nice'n'simple mini-tutorial on user style sheets: http://my.opera.com/Rijk/journal/18

Categories

CategoryOpera
CategoryTutorial
CategoryTechnical

There are 29 comments on this page. [Display and/or add comments]