Tuesday, 17. October 2006, 16:26:42
opera, customize, userstyle, screenshot
Electoral Vote is an great site that aggregates all the known polls in the US Presidential and Senate elections (made by a well known American geek, who happens to live in The Netherlands). The result: a nice red-and-blue map of the States. Unfortunately, the alignment, fonts and heavy HRs make it look rather unappealing. As I intend to follow the site for quite a while again (also did this during the Bush/Kerry battle), it was worthwhile to invest some time in making a userstylesheet to improve the looks.
Before:
After:
I've modified a copy of the site stylesheet. The changes are not very extensive, but that's OK because the site layout isn't very fancy anyway :-) Couldn't change the background color, because it is ugly if this doesn't match the background color in the automatically generated images. But I prefer to read text in
Cambria. I've also made the fat horizontal rules invisible, and added some thin borders instead.
Here's the stylesheet:
electoral-vote.cssOh, and this is the current polling result:
Wednesday, 17. August 2005, 15:07:11
feed, customization, opera, screenshot
...
Here are a few lines I've added to my mime.css, to make newsfeeds look a little nicer:
/* for feed content in general */
div.feedContent {font-family: serif;}
/* 'tags' in Tantek's feed as a small inline list
http://tantek.com/log/posts.atom
*/
h4.tags {display: run-in; font: bold smaller sans-serif;
margin: 0; padding: 0 .5em 0 0;}
ul.tags {display: block; font: smaller sans-serif;
margin: 0; padding: 0;}
ul.tags li {display: inline; margin: 0; padding: 0;}
ul.tags li a {text-decoration: none;}
/* permalink links bold red small */
div.feedContent + p > a {text-decoration: none;
color: red; font: bold smaller sans-serif;}
This should work well with the default mime.css stylesheet. I've also got a completely restyled mime.css which tries to use the system colors more, and is a bit 'classier'. That's the one you see in the
screenshot.
Get the stylesheet here.
Edit: For Opera 9 beta, add this to the 'browser.css' file instead.
Monday, 17. January 2005, 12:42:22
opera, customization, css, tweak
...
A commom question in the newsgroups is: "Why is the link/visited link color in I set in 'My Link Style...' (see the Page Style preferences) ignored on most pages?" The same question can be asked about your choice for 'strike through' and/or 'underline'.
The link style is the base style you choose for links, always to be overriden by author styling when you allow author styling. So if the page sets a color for links and visited links (using a stylesheet or html attributes), Opera's settings will be ignored. And if the page stylesheet sets a value for 'text-decoration' (underline, no underline, strike-through, blink), Opera's setting for undeline and strike-though will be ignored.
If you want your preferred link style to be applied all the time, you need to use a 'User style sheet' and use the '!important' marker in it to make your styles override all author styles.
Example of such an user style sheet, just copy to a plain text file:
a:link {
color: #0000ff !important;
background-color: #ffffff !important;
text-decoration: underline !important;
}
a:visited {
color: #ff00ff !important;
background-color: #ffffff !important;
text-decoration: line-through !important;
}
To see your user stylesheet applied on top of author styling, enable it in the 'Author' presentation mode, like this:
But having you own link colors applied all the time is usually very ugly when visiting sites with a dark background.
Personally I'd use only this in my user stylesheet:
a:visited {
text-decoration: line-through !important;
}
... because it never interferes with the color scheme of sites.
Saturday, 27. November 2004, 01:22:19
opera, userstyle, css, customization
...
Edit 2007-04-21: outdated, doesn't work in Opera 9. Use this userscript instead.Entrepid Opera user Fabian has created this very cool Flash-blocker. In involves nothing more than adding a few lines to your user stylesheet:
embed[type="application/x-shockwave-flash"] {content:"Flash"; outline: 1px dotted gray; color: gray; background: black}
embed[type="application/x-shockwave-flash"].zichtbaar {content: normal; outline: none}
body:before {
position: absolute; visibility: hidden;
background-image: url("javascript:(function(){window.onclick=function(){var srcElem=window.event.srcElement;var tag=srcElem.tagName;if(tag=='EMBED') srcElem.className='zichtbaar'};})()");
content:""}
This will replace Flash movies with a black area with the word Flash on it, and clicking on the area will play the Flash movie. Depending on the HTML code of the page, the replacement block might collapse dimensions. This blocker will only block display, it wil not block loading the Flash, so on clicking the Flash immediately starts playing.
Get the code from this zip to be sure you are not fooled by linebreaks:
<
http://my.opera.com/forums/attachment.php?postid=744450>
Maybe I should write something about the easiest way to work with custom stylesheets. Later!
Wednesday, 22. September 2004, 10:15:19
opera, userstyle, tweak
Arve has a nice tweak: using browser.css to read nicely formatted plain text documents in Opera's Full screen mode. Read about it in his blog:
<
http://www.virtuelvis.com/archives/203.html>
Tuesday, 25. May 2004, 11:25:30
css, customization, userstyle, configuration
...
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 sizeWith 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>
WIDGETIZE
