Playing around with CSS on My Opera
Friday, 19. December 2008, 14:49:08
Multilingual Opera Banner*NEW*
An alternative option to the English-onl banner which is displayed in the sidebar. It contains English, Japanese and Korean. Of course you could just replace the image with whichever you choose.
#getopera {background: url(http://files.myopera.com/cameron_en/blog/dop.png);}
#getopera img {visibility: hidden;}
Search Bar in the menu bar script
This kind of pushes the search bar out of the way by sticking it next to the menu buttons rather than in your side panel. You should be able to see it on my page.
#blogsearch form {position: absolute; top: -25px; right: 0px;}
#blogsearch h2 {display: none;}
Compact friends section script
This will save some more space at the top of your sidebar by making the images a tiny bit smaller and compact and by removing borders and names. These can still be viewed on a mouse hover.
#friendz li, #friendz a:link, #friendz a:visited, #friendz a:active {
background: url(none);}
#friendz li {
float:left;
width:80;
height:60;
margin:0 0 0px 0px;}
#friendz a:link, #friendz a:visited, #friendz a:active {
display:block;
padding:0px;}
#friendz img {
margin:0 0 0px 0px;}
.block {display: none;}
Comic book style chat messages
Here's a script to make the chat messages in the sidebar look like comic book lettering:
blockquote {font-family:"Comic Sans Ms"; text-transform: uppercase; font-weight: bold;}
Image resizer on hover script
This one was just a bit of fun I guess, it enlarges certain images when you hover oven them so you can see them better. The following code should be placed in your custom CSS sheet:
#el:hover {width: 610;}
...and whenever you insert an image into your blog, add the ID of "el" to the ones you wish to apply the effect to:<img id="el" src="http://files.myopera.com/cameron_en/blog/gogo.jpg" width="25%">and it should work something like this:













