CSSing your my.opera site - part 4
Wednesday, 14. May 2008, 11:14:06
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!
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!
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*/








Eddie B # 19. May 2008, 09:19
Nguyễn Bình Minh (Mr The Dawn) # 26. May 2008, 15:43
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
David # 1. June 2008, 09:43
Right now I'm thinking about new ideas for CSSing the my.opera website.
Nguyễn Bình Minh (Mr The Dawn) # 1. June 2008, 12:06
thobi # 29. August 2008, 15:12
DANKE!
David # 29. August 2008, 15:20
thobi # 29. August 2008, 15:28
David # 29. August 2008, 15:32
thobi # 29. August 2008, 15:37
http://my.opera.com/community/blog/2008/08/29/member-of-the-week
David # 29. August 2008, 15:46
dinhvynguyen # 2. September 2008, 19:30
David # 3. September 2008, 07:35
Nguyễn Bình Minh (Mr The Dawn) # 4. September 2008, 00:42
dinhvynguyen # 4. September 2008, 02:57