View Single Post
Old 2007-08-24, 06:36   Link #5
Join Date: Dec 2005
Location: event horizon
Opera Site-Specific Settings
Opera 9.22 & 9.23
!Warning -- Bad userJs can crash or slow down Opera. Be very careful when using someone else's script.
In Opera you can add site specific Css and site specific Js. I highly recommend that you avoid using these two features for any purpose other then minor tweaks. While it may seem a very cool idea to change the entire style of the site, it is in fact a very very bad and impractical one. By all means if you are bored and want to experiment, nobody's stopping you.
My personal advise: restrict it to only the simple things that take 2-3 lines to do.
Adding your personal Css
From here on I'll be using as an example site.

The Global Settings for this are located under View Style Manage Modes.
I advise you do not touch these settings.

To set up a site specific Css or Js, what you should not do is Right Click (while in the site) "Edit site preferences". From my experience this method is unpredictable at best and totally buged at worst.

The safe way to do it is go to: Tools Preferences Advanced Content Manage Site Preferences.

Let's do a simple example. Somewhere on your computer set up a folder Opera SS Css. Create a file forumsAnimeSuki.css (or whatever other name you want) And copy this little example code:
	a[href="index.php?"] img {
		display: block !important;
	} /* Fix Banner Ad-Blocking Problem */
	.bigusername {
		font-size: 13pt !important; 
	} /* Fix Layout Problem */

	img[alt~="Avatar"] {
		padding: 3px;
		background-color: transparent;
		border: 1px solid black;
	} /* Add border to avatars */
	body > table, .page {
		max-width: 900px; 
	} /* Limit Content to 900px */

/*	=====================================
	Quick Reply Editor
	#vB_Editor_QR {
		width: 850px;

	#vB_Editor_QR textarea {
		width: 100% !important;
		height: 280px !important;

/*	=====================================
	Current Series Discussion Column Format

	#f51 strong {
		clear: right;
	#f51 span {
		float: left;
		width: 210px;
		visibility: visible !important;
	#f51 > div.smallfont + div {
		visibility: hidden;
/*	=====================================
	Hide Old Series Sub-forums

	#f34 > div  + div  + div {
		display: none;
/*	=====================================
	Display Piramid

	#collapseobj_forumbit_5 > tr + tr {		
		display: none;
	} /* Hide "Licensed" & "Unaired" Forum */
		tbody#collapseobj_forumbit_5 > tr + tr + tr + tr {		
			display: table-row;

	#collapseobj_forumbit_1 > tr + tr {
		display: none;
	} /* Hide all but "Fansub Groups", "Fan Creation" & "General Anime" */ 
		#collapseobj_forumbit_1 > tr + tr + tr + tr + tr {
			display: table-row;
		#collapseobj_forumbit_1 > tr + tr + tr + tr + tr + tr {
			display: none;
		#collapseobj_forumbit_1 > tr + tr + tr + tr + tr + tr + tr {
			display: table-row;
	#collapseobj_forumbit_3 > tr + tr {
		display: none;
	} /* Hide all but "Download Help" & "Tech Support" */
		#collapseobj_forumbit_3 > tr + tr + tr {
			display: table-row;
		#collapseobj_forumbit_3 > tr + tr + tr + tr {
			display: none;
	#collapseobj_forumbit_4 > tr + tr {
		display: none;
	} /* Hide Site Feedback */
If you just want to follow along reading (by all means I'm not recommending this as the most useful or a essential Opera feature ) here's what the Css-Snips above do:
  • Fixes a problem that occurs in Animesuki styles displaying banners, where the said banners are being blocked (hidden) by Ad Blocking FiltersetP (see: Guide I)
  • Fixes a problem where user names with underscores would push the user info column out of bounds.
  • Adds a border (outline contour) to all avatars.
  • Limits the width of the forum to 900px. This is meant to achieve a more minimalistic look but also brings the post boxes (taking into account the info column) closer to what is considered the best line width, which is in (classical) typography would be around 45 - 70 characters.
  • The quick reply box is slightly tweaked so it's taller and fills as much of the available space as possible.
  • Subforums of the Current Series forum will display in a table-like two row format instead of a list.
  • Based on a "imaginary" browsing habit, I removed a lot of forums from the main index view. They're still accessible, you just have to click on the parent forum or section header to get the underlining Vb structure where they are. This is to keep with the minimalistic theme I mentioned earlier. Here's how the result looks like:

Back to the guidelines...
After you created your .css file, go to Tools Preferences Advanced Content Manage Site Preferences.

To add your style, first create a rule for the domain by clicking Add and typing in your desired domain name in the Site field. (example:

Still in the Add box go to the Display tab and in the My Stylesheet input browse for the file you created earlier.

Click Ok. Now opera will act a little stupid and won't show you the entry you just added, but it's there! If you really want to see it, close Edit Site Preferences then open it back, you should see it then.
One thing to note, you can go ahead an edit your .css file and it will apply without going through the steps above all over again. But because it is cached (most likely in memory) you'll have to restart Opera to see the effects.
Well that's that, you've successfully added a style to the forum. This style will only be loaded, by Opera, for (in the case of our example)

Adding your personal Js

To make javascript load only a specific site (let's say Opera has a simple conditional comment syntax.

It is pretty much self descriptive. Here's an example:

// ==UserScript==
// @include*
// ==/UserScript==

	alert("Script Test Complete.\n\nTo remove this pop-up just remove or delete the script from your UserJs folder.");
Do not keep Js scripts that don't do anything in your UserJs folder. They won't make some noticeable drop in performance but it's just stupid. You move them to some other folder, alter their extension or just delete them; any one of the three just mentioned will work fine.

Opera will not run UserJs on sites using the https protocol. This can be enabled... but I recommend you leave it disabled.
felix is offline   Reply With Quote