Skip navigation.

横浜豪州人

"このブログを見ると気持がよくなる"

Posts tagged with "css"

Playing around with CSS on My Opera

, , , ...

So I recently decided I wanted to make my page look a bit prettier. If you ever look at a Vietnamese person's My Opera page you'll notice it's most likely pimped out to the max, I wouldn't wanna go as far as they do, but I thought I'd share some CSS scripts I've been using. I'm not the best programmer either by the way, my methods are generally pretty sloppy.

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:
Download Opera, the fastest and most secure browser