Monday, July 18, 2011 3:34:09 PM
Changing CSS (fonts, background, maximum width) with JavaScript buttons.
Many websites are not properly formatted to be displayed on widescreen monitors with 16:9 or 16:10 aspect ratio. Some of them have the text spread from left to right, other are not aligned in the center and leave the right half of the screen empty while squatting at the left side (like antiwar.com, see a screenshot here). They show properly on a 4x3 monitor, but fail on a widescreen monitor.
In such case, these buttons can be useful to limit the width to 1024px and align the website in the center (optimized for 1600x900 monitor, so some of the buttons should be tweaked for other monitors).
BUTTON 1: maxWidth 1024px or version 2
Many websites are not properly formatted to be displayed on widescreen monitors with 16:9 or 16:10 aspect ratio. Some of them have the text spread from left to right, other are not aligned in the center and leave the right half of the screen empty while squatting at the left side (like antiwar.com, see a screenshot here). They show properly on a 4x3 monitor, but fail on a widescreen monitor.
In such case, these buttons can be useful to limit the width to 1024px and align the website in the center (optimized for 1600x900 monitor, so some of the buttons should be tweaked for other monitors).
BUTTON 1: maxWidth 1024px or version 2
Go to page, "javascript:(function(){var newSS, styles='*{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);}})()", , "Maxwidth1000px", "Enable mediumscreen mode"
BUTTON 2: maxWidth 1024px with font Georgia 16px
Button1, "Width1024px, Georgia 16"=Go to page, "javascript:(function(){var newSS, styles='*{max-width:1024px !important;margin:auto !important; font-family: georgia,times new roman, times, serif !important; color:black; font-size:16px !important; line-height: 1.38em !important;}:link, :link *{color:\x23002989 !important;}:visited,:visited *{color:\x230E2461 !important;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1 {font-size: 32px !important;line-height: 1.0em !important;}h2{font-size: 22px !important;line-height: 1.2em !important;}h3 {font-size: 20px !important;line-height:1.4em !important;}h4 {font-size: 18px !important;line-height: 1.4em !important;}h5 {font-size: 16px !important;line-height: 1.2em !important;}h6 {font-size: 15px !important;line-height: 1.2em !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);}})()", , "Maxwidth1024px+fontGeorgia16px", "Select Author Mode"
BUTTON 3: maxWidth 1024px with font Arial, Helvetica 17px
Button1, "Width1024px, Arial 17"=Go to page, "javascript:(function(){var newSS, styles='*{max-width:1024px !important;margin:auto !important; font-family: arial, helvetica, sans-serif !important; color:black; font-size:17px !important;line-height: 1.38em !important;}:link, :link *{color:\x23002989 !important;;}:visited,:visited *{color:\x230E2461 !important;;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1{font-size: 32px !important;line-height: 1.0em !important;}h2{font-size: 22px !important;line-height: 1.2em !important;}h3 {font-size: 20px !important;line-height:1.4em !important;}h4 {font-size: 18px !important;line-height: 1.4em !important;}h5 {font-size: 16px !important;line-height: 1.2em !important;}h6 {font-size: 15px !important;line-height: 1.2em !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);}})()", , "Maxwidth1024px+fontArial17px", "Select Author Mode"
BUTTON 4: maxWidth 1000px with font Arial, Helvetica 17px, version 2 (links black)
Button1, "Width1000px, Arial 17"=Go to page, "javascript:(function(){window.document.body.style.maxWidth='1000px'; window.document.body.style.position='absolute'; window.document.body.style.left = '250px';window.document.body.style.top = '0px';void 0})()", , "Maxwidth1000px+fontArial17px", "Select Author Mode" & Go to page, "javascript:(function(){var newSS, styles='*{font-family: arial, helvetica, sans-serif !important; color:black !important; font-size:17px !important;line-height: 1.35em !important;}:link, :link *{color:\x23000000 !important;}:visited,:visited *{color:\x23000000 !important;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1{font-size: 30px !important;line-height: 1.0em !important;}h2{font-size: 22px !important;line-height: 1.2em !important;}h3 {font-size: 20px !important;line-height:1.4em !important;}h4 {font-size: 18px !important;line-height: 1.4em !important;}h5 {font-size: 16px !important;line-height: 1.2em !important;}h6 {font-size: 15px !important;line-height: 1.2em !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);}})()"
In order to quickly go back to the original state use "Reload from cache", e.g. a mouse gesture:
GestureUp, GestureDown=Stop | Refresh display
Other issues with some websites are fonts that are too small. So these buttons can help with that.
BUTTON 5: font Tahoma, Arial, Helvetica 17px (full)
Button1, "Arial 17"= Go to page, "javascript:(function(){var newSS, styles='*{font-family: Tahoma, Arial, helvetica, sans-serif !important; color:black; font-size:17px !important;line-height: 1.35em !important;}:link, :link *{color:\x23002989 !important;}:visited,:visited *{color:\x230E2461 !important;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1{font-size: 30px !important;line-height: 1.0em !important;}h2{font-size: 22px !important;line-height: 1.2em !important;}h3 {font-size: 20px !important;line-height:1.4em !important;}h4 {font-size: 18px !important;line-height: 1.4em !important;}h5 {font-size: 16px !important;line-height: 1.2em !important;}h6 {font-size: 15px !important;line-height: 1.2em !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)}})()", , "fontArial17px", "Select Author Mode"
BUTTON 6: font Tahoma, Arial, Helvetica 17px
Button1, "Arial 17"=Go to page, "javascript:(function(){var newSS, styles='*{font-family: Tahoma, arial, helvetica, sans-serif !important; color:black; font-size:17px !important;line-height: 1.35em !important;}:link, :link *{color:\x23002989 !important;}:visited,:visited *{color:\x230E2461 !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);}})()", , "fontArial17px", "Select Author Mode"
BUTTON 7: font Arial, Helvetica 18px
Button1, "Arial 18"=Go to page, "javascript:(function(){var newSS, styles='*{font-family: arial, helvetica, sans-serif !important; color:black ; font-size:18px !important;line-height: 1.45em !important;}:link, :link *{color:\x23002989 !important;}:visited,:visited *{color:\x230E2461 !important;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1 {font-size: 32px !important;line-height: 1.0em !important;}h2{font-size: 26px !important;line-height: 1.2em !important;}h3 {font-size: 23px !important;line-height:1.4em !important;}h4 {font-size: 20px !important;line-height: 1.4em !important;}h5 {font-size: 17px !important;line-height: 1.2em !important;}h6 {font-size: 16px !important;line-height: 1.2em !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);}})()", , "fontArial18px", "Select Author Mode"
BUTTON 8: font Georgia, Times New Roman 16px
Button1, "Georgia 16"=Go to page, "javascript:(function(){var newSS, styles='*{font-family: georgia,times new roman, times, serif !important; color:black; font-size:16px !important; line-height: 1.3em !important;}:link, :link *{color:\x23002989 !important;}:visited,:visited *{color:\x230E2461 !important;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1 {font-size: 32px !important;line-height: 1.0em !important;}h2{font-size: 22px !important;line-height: 1.2em !important;}h3 {font-size: 20px !important;line-height:1.4em !important;}h4 {font-size: 18px !important;line-height: 1.4em !important;}h5 {font-size: 16px !important;line-height: 1.2em !important;}h6 {font-size: 15px !important;line-height: 1.2em !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);}})()", , "fontGeorgia16px", "Select Author Mode"
BUTTON 9: font black, background grey
Button1, "B/W"=Go to page, "javascript:(function(){var newSS, styles='*{background:\x23ECECEC !important; color:black !important;}:link, :link *{color:\x23002989 !important;}:visited,:visited *{color:\x230E2461 !important;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1 {font-size: 32px !important;line-height: 1.0em !important;}h2{font-size: 22px !important;line-height: 1.2em !important;}h3 {font-size: 20px !important;line-height:1.4em !important;}h4 {font-size: 18px !important;line-height: 1.4em !important;}h5 {font-size: 16px !important;line-height: 1.2em !important;}h6 {font-size: 15px !important;line-height: 1.2em !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);}})()", , "B/W", "Select Author Mode"
BUTTON 10: font black, background beige
Button1, "B/W"=Go to page, "javascript:(function(){var newSS, styles='*{background:\x23E3E0D1 !important; color:black !important;}:link, :link *{color:\x23002989 !important;}:visited,:visited *{color:\x230E2461 !important;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1 {font-size: 32px !important;line-height: 1.0em !important;}h2{font-size: 22px !important;line-height: 1.2em !important;}h3 {font-size: 20px !important;line-height:1.4em !important;}h4 {font-size: 18px !important;line-height: 1.4em !important;}h5 {font-size: 16px !important;line-height: 1.2em !important;}h6 {font-size: 15px !important;line-height: 1.2em !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);}})()", , "B/W", "Select Author Mode"
BUTTON 11: Custom colors for links and visited links
Button1, "CSS links"=Go to page, "javascript:(function(){var newSS, styles=':link,:link *{color:\x23002989 !important}:visited,:visited *{color:\x23512C72 !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);}})()", , "CSS links", "Select Author Mode"
Permanent change (without clicking every time) as a UserJS with this code:
(function(){var newSS, styles=':link,:link *{color:\x23002989 !important}:visited,:visited *{color:\x23512C72 !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);}})()
BUTTON 12: Custom color for visited links only
Button1, "CSS links"=Go to page, "javascript:(function(){var newSS, styles=':visited,:visited *{color:\x23512C72 !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);}})()", , "CSS links", "Select Author Mode"
Permanent change (without clicking every time) as a UserJS with this code:
(function(){var newSS, styles=':visited,:visited *{color:\x23512C72 !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);}})()
The buttons can also be used as keyboard shortcuts or mouse gestures.
For instance:
keyboard shortcut
Ctlr 1=Go to page, "javascript:(function(){var newSS, styles='*{max-width:1024px !important;margin:auto !important; font-family: arial, helvetica, sans-serif !important; color:black; font-size:17px !important;line-height: 1.38em !important;}:link, :link *{color:\x23002989 !important;;}:visited,:visited *{color:\x230E2461 !important;;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1{font-size: 32px !important;line-height: 1.0em !important;}h2{font-size: 22px !important;line-height: 1.2em !important;}h3 {font-size: 20px !important;line-height:1.4em !important;}h4 {font-size: 18px !important;line-height: 1.4em !important;}h5 {font-size: 16px !important;line-height: 1.2em !important;}h6 {font-size: 15px !important;line-height: 1.2em !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);}})()"
mouse gesture
GestureRight=Forward | Go to page, "javascript:(function(){var newSS, styles='*{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
GestureDown, GestureLeft=Go to page, "javascript:(function(){var newSS, styles='*{max-width:1024px !important;margin:auto !important; font-family: Tahoma, arial, helvetica, sans-serif !important; color:black; font-size:17px !important;line-height: 1.38em !important;}:link, :link *{color:\x23002989 !important;;}:visited,:visited *{color:\x230E2461 !important;;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1{font-size: 32px !important;line-height: 1.0em !important;}h2{font-size: 22px !important;line-height: 1.2em !important;}h3 {font-size: 20px !important;line-height:1.4em !important;}h4 {font-size: 18px !important;line-height: 1.4em !important;}h5 {font-size: 16px !important;line-height: 1.2em !important;}h6 {font-size: 15px !important;line-height: 1.2em !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);}})()"
A mouse gesture to restore window, resize to 1024x768 and move to the center (on 1600x900 monitor)[/B]
GestureLeft, GestureUp=Maximize page | Restore page & Go to page,"javascript:window.resizeTo(1024,768); window.moveTo(250,250); "
The JavaScript codes can be used as UserJS to execute automatically while loading pages in Opera, e.g.:
(function(){var newSS, styles='*{font-family: Tahoma,arial, helvetica, sans-serif !important; color:black; font-size:17px !important;line-height: 1.35em !important;}:link,:link*{color:\x23002989 !important;}:visited,:visited*{color:\x230E2461 !important;}b, strong, em, h1, h2, h3, h4, h5, h6 {font-weight: bold !important;}h1 {font-size: 30px !important;line-height: 1.0em !important;}h2{font-size: 22px !important;line-height: 1.2em !important;}h3 {font-size: 20px !important;line-height:1.4em !important;}h4 {font-size: 18px !important;line-height: 1.4em !important;}h5 {font-size: 16px !important;line-height: 1.2em !important;}h6 {font-size: 15px !important;line-height: 1.2em !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)}})()
No comments:
Post a Comment