How to improve the look of websites like Wikipedia, 'Antiwar' or 'Drudge Report' on widescreen monitors in Opera

Sunday, August 7, 2011 12:14:15 AM

widescreen, UserJS, CSS

...and how to disable automatic reload on "Drudge Report".

There are a number of websites that don't take under consideration that many people are forced to use widescreen monitors (16:9), as normal monitors with 4:3 aspect ratio are hardly available anymore. Some of them are spread from right to left which makes them difficult to read, other are floating to the left leaving the right side of the screen empty like Antiwar.com (see image below).

1.The easiest way to improve the website's look on widescreen displays is to make the website align itself in the center and to limit the maximum width to 1024px .
A custom .css file for a particular website can be made, since Opera allows using a different custom css profile for different websites.
How to do it?
You have to right click on empty space of the website, choose "Edit Site Preferences", then "Display" and under "My Style Sheet" choose the path to your custom .css file (e.g. C:\Users\your user name\AppData\Roaming\Opera\Opera\styles\website-style-1.css).
In order to quickly make a .css file open Notepad, choose "New" and save the file with a .css extension after choosing "All files (*.*)" at "Save as type" dropdown menu. Or go to %appdata%\Opera\Opera\styles\user, copy one of the .css files, change the name (e.g. 'website-style-1') and delete all the text inside. Then write the code provided below. Save the file in C:\Users\your user name\AppData\Roaming\Opera\Opera\styles\user

'My Style sheet' must be selected under 'Author Mode' in 'Style Options'.



Examples:

To align Antiwar.com in the center I choose this code (a single line in the .css file)

body{max-width:1024px; margin:auto !important;}

or this one which sets the website 300px from the left.

body{max-width:1024px; margin:auto; position:absolute; left:300px;}

I also make the fonts bigger, so ultimately my css change looks like this:

body{max-width:1000px ; margin:auto ;position:absolute; left:300px;font-family: Tahoma,arial, helvetica, sans-serif !important; color:black ; font-size:17px !important; line-height: 1.35em !important;}
.entry{font-family: Tahoma,arial, helvetica, sans-serif !important; color:black ; font-size:17px !important; line-height: 1.35em !important;}

Wikipedia can be improved with this code that changes the width of the main article body:

body{max-width:1100px !important; margin:auto !important;}

or with fonts

body{max-width:1100px !important; margin:auto !important; }
div#bodyContent{ font-size:16px !important; line-height: 1.35em !important;}
#mw-panel.collapsible-nav div.portal div.body ul li{font-size:15px !important; line-height: 1.3em !important;}

this can be added to change links' colors: a{color:#002989 !important}

To make "Drudge Report" appear in the center of the screen and not spread out from left to right, you can use this code:

body{max-width:1000px; margin:auto}

or with fonts

body {max-width:1000px;margin:auto;}
tt{font-family: arial, helvetica, sans-serif !important;font-size:17px !important}

this can be added, too: a:link {color:#000000 ;text-decoration: none;}


You can also disable automatic refresh on "Drudge Report" by choosing "Edit Site Preferences", then"Scripting" and uncheck "Enable JavaScript".

Another way is to use a User JavaScript:

window.opera.addEventListener('BeforeExternalScript', function (e){
if(window.location.host=='www.drudgereport.com')
e.preventDefault();
e.stopPropagation();
}, false);

window.opera.addEventListener('BeforeScript', function (e){
if (window.location.host=='www.drudgereport.com')
e.preventDefault();
e.stopPropagation();
}, false);

2. Instead of a custom user.css file, a specific JavaScript code can be made for each individual site.

Right click on the website's empty space, choose "Edit Site Preferences", "Scripting", then choose the path of your JavaScript folder under "User JavaScript folder".

These codes can be used:

(function(){var newSS, styles='body{max-width:1024px !important;margin:auto !important;}';if(document.createStyleSheet){document.createStyleSheet('javascript:'+styles);}else{newSS=document.createElement('link');newSS.rel='stylesheet';newSS.href='data:text/css,'+escape(styles); document.getElementsByTagName('head')[0].appendChild(newSS);}})()

or

(function(){window.document.body.style.maxWidth='1000px'; window.document.body.style.position='absolute'; window.document.body.style.left='250px';})()

If you want the css change work for all websites:

• Go to %appdata%\Opera\Opera\ and create folder "Userjs" (or C:\Program Files\Opera\profile\userjs).

• To make a .js file, open Notepad, choose "New", paste the code and save the file with a .js extension after choosing "All files (*.*)" at "Save as type" dropdown menu.
  Save the file in %appdata%\Opera\Opera\userjs

• Go to Preferences/Content/JavaScript Options and choose the path of your JavaScript folder under "User JavaScript folder":
  C:\Users\ <name> \AppData\Roaming\Opera\Opera\userjs\

3. Center "See all comments" section on YouTube with User JavaScript

The 'See all comments" section on YouTube is annoyingly aligned to the left. That's how one can center it automatically.

window.addEventListener('load',function()
{if ((window.location.host=='www.youtube.com') && (window.location.pathname.match('all_comments')))
{
{var newSS, styles='#watch-discussion{margin:auto !important;}';
if(document.createStyleSheet)
{document.createStyleSheet('javascript:'+styles);}else
{newSS=document.createElement('link');newSS.rel='stylesheet';newSS.href='data:text/css,'+escape(styles);  document.getElementsByTagName('head')[0].appendChild(newSS)}}
}
}
,false)

The css code #watch-discussion{margin:auto !important;} may be changed to #watch-discussion{position:absolute !important; left:300px !important} to manually determine the left margin in pixels.

If you change 'load' in the code to 'click', the change of css will happen when you click the page instead of "on load" (right after the page has been loaded).