Redesigning My.Opera space tutorial - Index Page
By SerbianFighter. Saturday, 19. November 2005, 07:42:56
[img]http://tinypic.com/i22ivk.jpgI wrote 5 (IMHO) logical parts of modifying any Opera community space to meet your needs and desires...
It is my personal recommendation that you read this parts one by one, and not to jump from one to another, at least if you are not experienced with CSS and you are reading it for the first time.
In the first parts all the elements are explained, documented and 4 examples are added (code + screenshots), and in later parts you will only be directed to specific parts of main.css for your template to search and modify it yourself since all elements you might want to change have been briefly explained before.
If you like this spotlight it
[img]http://tinypic.com/i23t5z.jpg
Part 1: Header part of your My.Opera Space
Title text, Subtitle text, Header image and menu background [Link]
Part 2: Blog on My.Opera
Post title, Sticky post mark, Post date and tags [Link]
Part 3: Sidebar on My.Opera Blog
Sidebar width, Sidebar captions, Calendar, Album slideshow, Coundowns [Link]
Part 4: Other My.Opera Pages
Profile, Friends, Links [Link]
Part 5: Few last bits and pieces
Footer, Page background and wraps on each side, Top menu and Opera community link, Links on any page, Comments, Quick profile, Tags [Link]
Updates: - You really want to check these
Headers:
- 12/02/2005 - 10 Headers - Farm - dark colors - Link
- 12/02/2005 - 10 Headers - Natural - dark colors - Link
- 12/02/2005 - 10 Headers - Sport - dark colors - Link
- 12/01/2005 - 10 Headers - Children - dark colors - Link
- 12/01/2005 - 10 Headers - Exotic nature - dark colors - Link
- 12/01/2005 - 10 Headers - Oceans and seas - dark colors - Link
- 12/01/2005 - 10 Headers - Mixed elements - Dark colors [2] - Link
- 11/30/2005 - 10 Headers - Mixed elements - Dark colors - Link
- 11/30/2005 - 6 Headers - Rabbit related - Light colors - Link
- 11/30/2005 - 10 Headers - Winter related - Light colors - Link
- 11/30/2005 - 10 Headers - Sunset related - Dark colors - Link
- 11/30/2005 - 10 Headers - Food related - Mixed colors - Link
- 11/30/2005 - 10 Headers - Cat related - Mixed colors - Link
- 11/30/2005 - 10 Headers - Dog related - Mixed colors - Link
- 11/29/2005 - 10 Headers - 10 Dark Colors - Plain but nice - Link
- 11/29/2005 - 10 Headers - 10 Colors - Plain but nice - Link
- 11/29/2005 - 10 Headers - mixed collection - check it out - Link
- 11/29/2005 - 5 Headers for those who love wildlife - dark headers - Link
- 11/29/2005 - 5 Headers for those who love babies - light headers - Link
- 11/29/2005 - 5 Headers for those who like birds - dark headers - Link
- 11/28/2005 - 6 Headers for those who like dark styles - Link
- 11/28/2005 - 6 Headers for those who like light - natural styles - Link
Menu images:
- 12/03/2005 - 6 Light colors - yellow - blue - pink - orange - green - rose - Link
- 12/03/2005 - 7 Dark colors - red - blue - orange - green - violet - rose - etc Link
Opera Community Icon:
- 12/04/2005 - 18 transparent icons - Link
Others contribution
- 12/25/2005 - 36 headers by Joni Mueller - Link
People who made heavy modifications to their blogs:
Scipio - http://my.opera.com/scipio/
Jere Purmonen - http://my.opera.com/Jere/
trollop - http://my.opera.com/trollop/
Post-Scriptum
This post, and this list will be updated with interesting ideas, possibly interesting font / color / graphics combinations for your personal space, so keep checking it
[img]http://tinypic.com/i269ls.png
Ivan Minic :: http://www.Burek.co.yu/ :: http://forum.Burek.co.yu/
It is my personal recommendation that you read this parts one by one, and not to jump from one to another, at least if you are not experienced with CSS and you are reading it for the first time.
In the first parts all the elements are explained, documented and 4 examples are added (code + screenshots), and in later parts you will only be directed to specific parts of main.css for your template to search and modify it yourself since all elements you might want to change have been briefly explained before.
If you like this spotlight it
Part 1: Header part of your My.Opera Space
Title text, Subtitle text, Header image and menu background [Link]
Part 2: Blog on My.Opera
Post title, Sticky post mark, Post date and tags [Link]
Part 3: Sidebar on My.Opera Blog
Sidebar width, Sidebar captions, Calendar, Album slideshow, Coundowns [Link]
Part 4: Other My.Opera Pages
Profile, Friends, Links [Link]
Part 5: Few last bits and pieces
Footer, Page background and wraps on each side, Top menu and Opera community link, Links on any page, Comments, Quick profile, Tags [Link]
Updates: - You really want to check these
Headers:
- 12/02/2005 - 10 Headers - Farm - dark colors - Link
- 12/02/2005 - 10 Headers - Natural - dark colors - Link
- 12/02/2005 - 10 Headers - Sport - dark colors - Link
- 12/01/2005 - 10 Headers - Children - dark colors - Link
- 12/01/2005 - 10 Headers - Exotic nature - dark colors - Link
- 12/01/2005 - 10 Headers - Oceans and seas - dark colors - Link
- 12/01/2005 - 10 Headers - Mixed elements - Dark colors [2] - Link
- 11/30/2005 - 10 Headers - Mixed elements - Dark colors - Link
- 11/30/2005 - 6 Headers - Rabbit related - Light colors - Link
- 11/30/2005 - 10 Headers - Winter related - Light colors - Link
- 11/30/2005 - 10 Headers - Sunset related - Dark colors - Link
- 11/30/2005 - 10 Headers - Food related - Mixed colors - Link
- 11/30/2005 - 10 Headers - Cat related - Mixed colors - Link
- 11/30/2005 - 10 Headers - Dog related - Mixed colors - Link
- 11/29/2005 - 10 Headers - 10 Dark Colors - Plain but nice - Link
- 11/29/2005 - 10 Headers - 10 Colors - Plain but nice - Link
- 11/29/2005 - 10 Headers - mixed collection - check it out - Link
- 11/29/2005 - 5 Headers for those who love wildlife - dark headers - Link
- 11/29/2005 - 5 Headers for those who love babies - light headers - Link
- 11/29/2005 - 5 Headers for those who like birds - dark headers - Link
- 11/28/2005 - 6 Headers for those who like dark styles - Link
- 11/28/2005 - 6 Headers for those who like light - natural styles - Link
Menu images:
- 12/03/2005 - 6 Light colors - yellow - blue - pink - orange - green - rose - Link
- 12/03/2005 - 7 Dark colors - red - blue - orange - green - violet - rose - etc Link
Opera Community Icon:
- 12/04/2005 - 18 transparent icons - Link
Others contribution
- 12/25/2005 - 36 headers by Joni Mueller - Link
People who made heavy modifications to their blogs:
Scipio - http://my.opera.com/scipio/
Jere Purmonen - http://my.opera.com/Jere/
trollop - http://my.opera.com/trollop/
Post-Scriptum
This post, and this list will be updated with interesting ideas, possibly interesting font / color / graphics combinations for your personal space, so keep checking it
Ivan Minic :: http://www.Burek.co.yu/ :: http://forum.Burek.co.yu/

Thanks.
Keep going.
By yasiula, # 27. November 2005, 01:43:26
By shaolinac, # 27. November 2005, 08:28:17
By electric_del, # 28. November 2005, 14:46:44
By sonoman_x, # 28. November 2005, 15:42:52
Those tuts are exellent for beginners. I redesign my blog even I don't know what css is...
By tratincica, # 30. November 2005, 23:52:09
I hate to burst the bubble, -- and you can tell right away that I am a true novice, -- but why do I need a blog to be pimped? Is your design intended for me to "host" my own blog? Aren't blogs for those who hold very firm opinions pro and con on various subjects? Since I am none of the above, should I study your design and establish/host a blog? Your thoughts would be appreciated.
By anonymous user, # 1. December 2005, 15:56:09
I hate to burst the bubble, -- and you can tell right away that I am a true novice, -- but why do I need a blog to be pimped? Is your design intended for me to "host" my own blog? Aren't blogs for those who hold very firm opinions pro and con on various subjects? Since I am none of the above, should I study your design and establish/host a blog? Your thoughts would be appreciated.
By anonymous user, # 1. December 2005, 15:56:54
By SerbianFighter, # 1. December 2005, 16:04:03
I loved the graphic banners!
10/10!
By WhiteLotus, # 3. December 2005, 09:19:54
By froggy420, # 4. December 2005, 17:01:14
By SerbianFighter, # 4. December 2005, 17:18:20
By chanstudio, # 18. December 2005, 04:50:29
Hello everybody. Excellent info here but I would like to know if there is a way to change the titles of the sidebar for example I would like to put "CALENDARIO" (in spanish) instead of CALENDAR and "3 dias hasta" instead of "3 days to"...
I think that this is not possible but I'm asking anyway, may be I see a Christmas Miracle!!!
Thanks a lot... and love Opera forever.
By anonymous user, # 21. December 2005, 01:58:21
Is that possible? May be I see a Christmas Miracle here!!!
Thanks a lot and USE OPERA FOREVER!
By sonoman_x, # 21. December 2005, 02:03:37
By jonimueller, # 24. December 2005, 19:23:01
By tamingsari, # 29. December 2005, 04:06:55
By SerbianFighter, # 29. December 2005, 04:30:14
By spaces, # 31. December 2005, 09:07:46
By cat^, # 3. January 2006, 13:19:09
http://my.opera.com/community/css/users/6/main.css
By SerbianFighter, # 3. January 2006, 13:47:53
By vtr, # 5. January 2006, 09:45:12
By SerbianFighter, # 5. January 2006, 10:31:38
By rdm, # 5. January 2006, 12:44:47
By ~DarkAngel~, # 16. January 2006, 04:21:16
By dan1el, # 18. January 2006, 17:25:19
By TRILINGUAL-TRANSLATOR, # 26. January 2006, 16:46:09
I wish i had the time to read all the links...i saved them all
By brightestvega, # 4. February 2006, 03:50:16
hm, a very good tutorial. But I can't get some things to work. One is the color of the tag-links, they are alway green at my side. I would be glad for a hint, but might have you are very busy.
have a good day! Thomas
By Thomas0, # 14. February 2006, 08:17:10
By SerbianFighter, # 14. February 2006, 08:28:07
thank you very much. I found another posting from you just about these links after posting this here.
let you say thank again, Thomas
By Thomas0, # 14. February 2006, 09:10:29
and sorry for posting again. At this time I have got nearly every point I did wish me. But there are some little things leaving. Or ist this here a not so googd place to ask? Should I go in a specific forum for my questions?
One thing is I can't get the lists right as I wish them. I put the code:
ol, ul { list-style-position:outside; }
but they don't do right. At the break they begin in front of the most left point under the bulet or number. They don't leave space at the left.
The other is a little bit trickier I think. If you are logged in and on your blog, then you have under the posting two points
edit and comments. I would set them in one line one after the other. This doesn't work. I have the code snippet here. But I do not understand, why this is not working. May be you look only once and have an hint for me. This would be great.
thanks and greetings, Thomas
p.editthis {
text-transform: lowercase;
font-size: 10pt;
float: left;
display: block;
max-width: 130 px;
clear: both;
}
p.editthis a {
font-size: 10pt;
}p
.postinfo {
text-transform: lowercase;
font-size: 10pt;
display: block;
margin-left: 135 px;
}
p.postinfo:after {
display: block;
content: " ";
clear: both;
}
.postcomments {
display: inline;
}
By Thomas0, # 14. February 2006, 18:26:42
By SerbianFighter, # 14. February 2006, 18:37:15
You're The CSS
Many thanks for your help even if you think... "Well.. for all I know it should work ok, but then again I'm not too good with css"
Please, keep on helping those guys (like myself !) who realy are "worst than you are"
Here is my Blog (in French, sorry I will try to translate asap !) that I would like you give me your opinion :
http://my.opera.com/cornebarrieu/blog/
Ciao
By cornebarrieu, # 20. February 2006, 19:48:01
By Gothic Lady, # 21. February 2006, 16:20:04
This looks very interesting
By SerbianFighter, # 21. February 2006, 16:29:30
By wangzhijun, # 7. March 2006, 07:49:44
mira
By Oswego, # 8. March 2006, 01:04:46
By SerbianFighter, # 8. March 2006, 05:31:54
By kaka327, # 29. March 2006, 08:41:36
I'm trying to tie my blog theme in with my Opera and Windows Blinds skins... I like all my gear to look somewhat uniform on my laptop.
I'm a big fan of the all-black looking pages, with highlights.
Can you help? I managed to change the banner, but that is as far as I got in comprehending the CSS instructions.
Cheers!
By IMHO, # 3. April 2006, 08:41:53
By adamli, # 25. April 2006, 07:39:22
By adamli, # 25. April 2006, 07:44:27
By SerbianFighter, # 25. April 2006, 08:24:12