Skip navigation.

v.plonk!

Can't wait to get my hands on the Dragon Age Toolset...

CSSing your my.opera site - part 4

,

Some things came up the last two patches that you might want to hide or use in your very own way.

The GoogleSearch in the topbar can be changed and the social networking icons too. So let's stop talking and get into the CSS-magic! :wizard:

GoogleSearch
The GoogleSearch looks quite disturbing to some people and they want to get rid of it. I think the search is pretty useful for searching within my.opera.com so I just changed some minor things: I hide the possibility to select where to search and the text connected to it, while I leave the search itself completely visible:

/* GOOGLE SEARCH */
#myo2 p { display: block; } /*display:none for ALL OFF*/
#myo2 #ss0 { display: none; }
#myo2 #ss1 { display: none; }
#myo2 label { display: none; }

As you can see, the selection is gone (#ss0 and #ss1), furthermore the text isn't visible either (label).

So now we can now style the search box if we like to. Be aware, that the search button itself will get invisible on InternetExplorer if you use/change the #gsearch-submit lines:
#top-searchbox { color: #ffffff; font-size: 12px; border: 1px solid black; background: #181818 url('INPUT_BACKGROUND_IMAGE'); margin: 0px 0px 5px 5px; width: 162px !important; height: 18px !important; }
#top-searchbox:hover { background: #181818 url('INPUT_BACKGROUND_HOVERIMAGE'); }
#top-searchbox:focus { background: #181818 url('INPUT_BACKGROUND_FOCUSIMAGE') !important; }
#gsearch-submit { width: 0px !important; height: 20px !important; border-right: 44px solid transparent; background: #303030 url('BUTTON_IMAGE') no-repeat; }
#gsearch-submit:hover { background: #303030 url('BUTTON_HOVERIMAGE') no-repeat; }



Social Networking
This is a great feature, but when you have many short topics and use the "Read more..." option very copious the small icons and links look disturbing. So let's see how we can use them in a more selective way

In my example I want to show the digg and the slashdot link, while hiding the rest. Therefor I define every single link of the icons as invisible and later comment the ones I want to see by adding two slashes in front of the corresponding line ( // div.shareth... ). You can use the following lines directly in your user style sheet and decide yourself what you want to see or not:
/* SOCIAL NETWORKING */
// .sharethis { display: none; } /*all off*/
.facebook { display: none !important; } /*facebook off*/
div.sharethis ul li a.delicious { display: none; } /*delicious off*/
div.sharethis ul li a.magnolia { display: none; } /*magnolia off*/
// div.sharethis ul li a.digg { display: none; } /*digg off*/
div.sharethis ul li a.reddit { display: none; } /*reddit off*/
// div.sharethis ul li a.slashdot { display: none; } /*slashdot off*/
div.sharethis ul li a.technorati { display: none; } /*technorati off*/

Kaltes, klares Wasser - Cold, clear waterA good beer after the meeting!

Comments

Eddie B 19. May 2008, 09:19

Thanks for the Social Networking bit. They were starting to annoy me.
:happy: Thanks again

Nguyễn Bình Minh (Mr The Dawn) 26. May 2008, 15:43

Nice theme(^_^). if you want the music that start then you can use code:


in your post.
Note:http://ekavietnam.com/chanh/topmusic1/Tuyetyeuthuong.mp3: link to music.
Please edit my post to see Code

Nguyễn Bình Minh (Mr The Dawn) 26. May 2008, 15:45

Thanks for visit! :D

David 1. June 2008, 09:43

You are welcome.
Right now I'm thinking about new ideas for CSSing the my.opera website. :up:

Nguyễn Bình Minh (Mr The Dawn) 1. June 2008, 12:06

(^_^)

thobi 29. August 2008, 15:12

ah, endlich mal ein weg, wie sogar ich es kapier :smile:

DANKE!

David 29. August 2008, 15:20

Jederzeit willkommen. :coffee:

thobi 29. August 2008, 15:28

OT: uh, online und noch gar kein "ich bin member of the week"-jubel-thread? ;-)

David 29. August 2008, 15:32

:eyes: Ich bin WAS?!

thobi 29. August 2008, 15:37

uh, da hat wohl jemand seine mails nicht gelesen ;-)

http://my.opera.com/community/blog/2008/08/29/member-of-the-week

David 29. August 2008, 15:46

Ich lese die immer am Abend... aber meinen Blog habe ich immer mal zwischendurch unter Beobachtung. :lol:

dinhvynguyen 2. September 2008, 19:30

Anybuddy know today is vietnam's national day

David 3. September 2008, 07:35

I wasn't aware of that. Happy National Day then. :smile:

Nguyễn Bình Minh (Mr The Dawn) 4. September 2008, 00:42

Beautiful theme(^_^)

dinhvynguyen 4. September 2008, 02:57

I couldn't activated account of mine.Anybody tell me how to get that.Thank you

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies

Download Opera, the fastest and most secure browser