My OperaRedesigning My.Opera space, blog and photo gallery in X easy steps [Part 5]
By Ivan MinicSerbianFighter. Saturday, November 19, 2005 7:17:03 AM
[Repeating the usual stuff]
Important: All tweaks and changes here are made on default template. Should work ok with any other, but will work 100% ok with default theme.
Definitions: All definitions used here are from W3schools CSS guide
Examples: All I show here is there just to represent variety of possible options. It is not intended to look good, just too look as different from the other ones as possible.
Where do I start?
1. Go to Preferences (http://my.opera.com/Username/account/)
2. Then go to Web page layout (http://my.opera.com/Username/account/layout.dml)
3. Then go to custom style sheet (http://my.opera.com/Username/account/usercss.dml)
Ok, I'm there... Now?
In Enter CSS: field enter some of the values I will explain below, and make sure you select Use my custom style sheet together with the current theme before clicking Save
[Repeating ends here]
Few last bits and pieces
Opera community top block, Footer, Tags, etc.
A list..
If you have already read all stuff I wrote on this topic, it really should not be too hard for you to track down and edit css stuff you want... so again.. without explanations, there is a list of elements you might want to check out and maybe edit...
Footer
#footer , #footer p , #footer a:link, #footer a:visited, #footer a:active , #footer img , #footer #get , #footer #get:hover
Page background and wraps on each side
body, #wrap1 , #wrap2, #wrap3, #content (blog posts background)
Top menu and Opera community link
#topbar, #topbar p , #topbar a , #topbar a:hover , a.toplink , a.toplink:hover , #meta , #meta a , #oc , #oc span , #top
Links on any page
a:link, a:active , a:visited , a:hover , a.username:link, a.username:visited, a.username:active
Comments
.comments h2 , .comments , .comment1 , .comment1 .bot , .comment2 , .comment2 .bot , .comments .c-avatar , .c-avatar img , .comments .text , .comment-by .edited , .comment-by , .editcomment , .editcomment a:link, .editcomment a:visited, .editcomment a:active , .del , #addcomment , #description, #writecomment , #message , #msubject
Quick profile
#qp dl , #qp dt , #qp dd , #myphoto , #myphoto img
Tags
#content .tags a:link, #content .tags a:visited, #content .tags a:active, .tag , #content .tags a:hover , .tagged
End of Part 5
Useful links
Important: All tweaks and changes here are made on default template. Should work ok with any other, but will work 100% ok with default theme.
Definitions: All definitions used here are from W3schools CSS guide
Examples: All I show here is there just to represent variety of possible options. It is not intended to look good, just too look as different from the other ones as possible.
Where do I start?
1. Go to Preferences (http://my.opera.com/Username/account/)
2. Then go to Web page layout (http://my.opera.com/Username/account/layout.dml)
3. Then go to custom style sheet (http://my.opera.com/Username/account/usercss.dml)
Ok, I'm there... Now?
In Enter CSS: field enter some of the values I will explain below, and make sure you select Use my custom style sheet together with the current theme before clicking Save
[Repeating ends here]
Few last bits and pieces
Opera community top block, Footer, Tags, etc.
A list..
If you have already read all stuff I wrote on this topic, it really should not be too hard for you to track down and edit css stuff you want... so again.. without explanations, there is a list of elements you might want to check out and maybe edit...
Footer
#footer , #footer p , #footer a:link, #footer a:visited, #footer a:active , #footer img , #footer #get , #footer #get:hover
Page background and wraps on each side
body, #wrap1 , #wrap2, #wrap3, #content (blog posts background)
Top menu and Opera community link
#topbar, #topbar p , #topbar a , #topbar a:hover , a.toplink , a.toplink:hover , #meta , #meta a , #oc , #oc span , #top
Links on any page
a:link, a:active , a:visited , a:hover , a.username:link, a.username:visited, a.username:active
Comments
.comments h2 , .comments , .comment1 , .comment1 .bot , .comment2 , .comment2 .bot , .comments .c-avatar , .c-avatar img , .comments .text , .comment-by .edited , .comment-by , .editcomment , .editcomment a:link, .editcomment a:visited, .editcomment a:active , .del , #addcomment , #description, #writecomment , #message , #msubject
Quick profile
#qp dl , #qp dt , #qp dd , #myphoto , #myphoto img
Tags
#content .tags a:link, #content .tags a:visited, #content .tags a:active, .tag , #content .tags a:hover , .tagged
End of Part 5
Useful links
- Styling My Opera profile pages by Jere Purmonen
- W3schools CSS guide
- CSS is not hard to learn – if you recognise it for what it is
- CSS Toolshed
- CSS Beauty
- CSS Creator
- CSS Discuss Wiki
- CSS Zen Garden
- Andy Budd's CSS Links
liziliziko24 # Sunday, December 25, 2005 2:16:39 PM
王志军wangzhijun # Tuesday, March 7, 2006 9:22:21 AM
If not, could you please add a blog search box (Google Blog Search) into top menu? I think it is useful to us bloggers.
Greatly appreciate!
Ivan MinicSerbianFighter # Tuesday, March 7, 2006 9:31:25 AM
王志军wangzhijun # Tuesday, March 7, 2006 9:33:26 AM
I am wondering if you guys can add this feature into Opera blog.
Here is the code I have employed in my post. Hope it will help. The "USER_NAME" should be replaced to the specific username.
<form ACTION="http://search.blogger.com" METHOD="GET"> <table border="0" cellspacing="0" cellpadding="2" bgcolor="white" id="smallsearch" class="search" style="width:auto; "> <tr valign="top" align="left"> <th width="60"><div id="flabl" style="display:none;align=left;">Find</div></th> <td><input type="text" name="q" id="q" size="40" maxlength="256" title="Search" tabindex="1"></td> <td width="15"><input type="submit" id="btnG" name="btnG" value="Search My Blog" tabindex="2"></td> <td style="vertical-align: middle;font-size:82%" nowrap><a href="http://search.blogger.com/advanced_blog_search?q=&bl_fpy=t&bl_name=http%3A%2F%2Fmy.opera.com%2FUSER_NAME%2F&ie=UTF-8&ui=blg">Advanced Search</a></td> <input type=hidden id="hl" name="hl" value="en"> <input type=hidden name="bl_fpy" value="t" /> <input type=hidden name="bl_name" value="http://my.opera.com/USER_NAME/" /> <input type=hidden name="ie" value="UTF-8" /> <input type=hidden name="ui" value="blg" /></tr> </table> </form>Ivan MinicSerbianFighter # Tuesday, March 7, 2006 9:58:01 AM
I'm not My.Opera developer, I just like this place
My suggestion would be to make a topic about it in this forum.
王志军wangzhijun # Tuesday, March 7, 2006 10:39:12 AM
I thought you were one of the team members of My Opera community.
Tjeerd Peelenpeelen # Saturday, March 18, 2006 5:47:46 PM
Can give some one of you the CSS for chanching the Top menu color?
I cant find it.
Tjeerd
Benlapisdragon # Sunday, March 26, 2006 12:01:36 PM
Yeah, it's
#topbar{ background: }if you want to change anything else up there,
#topbar a.toplink{}
will controll the links, their individual colors
#topbar a.toplink.hover{}
will controll the links when you hover the mouse over them
#topbar a{}
will controll the link for the comunity with the globe in it
#topbar p{}
will controll the p element that all of the links are encased in.
JaisenIMHO # Thursday, April 20, 2006 7:49:48 AM
Can anyone give the code to change the page background to black. Not the content of the blog itself, but the actual page bacgkground behind the blog and the sidebars?
Thanks
Louisvolkuro # Friday, April 21, 2006 11:48:13 PM
I have two things left to change, and I really don't find them:
1-The background of the message block
2-the backgroung on the album page of each album description (1,3,5,..)
Tanks
Nandita Adelia Putrinandits # Monday, January 31, 2011 11:41:56 PM