Skip navigation.

exploreopera

| Help

Sign up | Help

My 0.02$ on Opera Community development

published by Ivan Minic

avatar

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 :wink:[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 :wink:

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 :wink:[img]http://tinypic.com/i269ls.png

Ivan Minic :: http://www.Burek.co.yu/ :: http://forum.Burek.co.yu/

Redesigning My.Opera space, blog and photo gallery in X easy steps 3 simple Opera Screensavers

Comments

avatar
Nice work.
Thanks.
Keep going.

By yasiula, # 27. November 2005, 01:43:26

avatar
Excellent job

By shaolinac, # 27. November 2005, 08:28:17

avatar
Magic! Don't stop there! Can't wait to get at it! Thanks..

By electric_del, # 28. November 2005, 14:46:44

avatar
Great! The exact information I need to forget all the other blog hostings...

By sonoman_x, # 28. November 2005, 15:42:52

avatar
Yes, you are my friend, but thank you for tutorials...
Those tuts are exellent for beginners. I redesign my blog even I don't know what css is... :D

By tratincica, # 30. November 2005, 23:52:09

avatar
holyman3 writes:

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

avatar
holyman3 writes:

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

avatar
Well... Most of the people like to make their blog / gallery / or profile customised, different from the others... This tutorial and grpahic will allow them to do it as easy as possible.

By SerbianFighter, # 1. December 2005, 16:04:03

avatar
Wow... That helped me a lot!

I loved the graphic banners!

10/10!

By WhiteLotus, # 3. December 2005, 09:19:54

avatar
How do I remove the photo album and intrests section from my sidebar since there are links to those.

By froggy420, # 4. December 2005, 17:01:14

avatar
Well, with links you can easily select something to or not to show in sidebar, and for the album slideshow, you have here elements you need to tweak

By SerbianFighter, # 4. December 2005, 17:18:20

avatar
Good job. thanks for your hard work.

By chanstudio, # 18. December 2005, 04:50:29

avatar
sonoman_x writes:

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

avatar
Hello everybody. Excellent info here but I wonder if it's possible to change the titles in the sidebar. For example I want to read "CALENDARIO" (in spanish) instead of CALENDAR. I would like to put also "3 dias para" instead of "3 days to" in the COUNTDOWN section.

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

avatar
I thought I'd give you a heads up, SF, that I created some 852x146 headers that people can drop into an existing theme or use as a starting point for a new design. The images were created using Jasc Paint Shop Pro tubes. They are in my Opera Headers photo album, free for the taking. You have inspired me to start whipping up some designs specifically for Opera. (And he is to blame!) ;-)

By jonimueller, # 24. December 2005, 19:23:01

avatar
tq..but can we put shoutbox?? at our blog

By tamingsari, # 29. December 2005, 04:06:55

avatar
No.

By SerbianFighter, # 29. December 2005, 04:30:14

avatar
nice!thanks you ! 谢谢！

By spaces, # 31. December 2005, 09:07:46

avatar
How can I find out the css of the other themes (not only default one's,which you gave out) if I want to customize it? That would help a lot,because I want to keep my current them except for the main picture...and thank you very much indeed for your work.

By cat^, # 3. January 2006, 13:19:09

avatar
take a look at html source of that page... with that template css source is here:
http://my.opera.com/community/css/users/6/main.css

By SerbianFighter, # 3. January 2006, 13:47:53

avatar
how do i add images to my /home/files/ path

By vtr, # 5. January 2006, 09:45:12

avatar
Preferences - My Files

By SerbianFighter, # 5. January 2006, 10:31:38

avatar
Very nice. Can't such things as all this eye candy also be achieved with SVG in my.opera.com?

By rdm, # 5. January 2006, 12:44:47

avatar
wow, I love it, can't wait to have a try! Thanks!

By ~DarkAngel~, # 16. January 2006, 04:21:16

avatar
We want more corner images :smile:

By dan1el, # 18. January 2006, 17:25:19

avatar
I'll see people who made heavy modifications 2...

By TRILINGUAL-TRANSLATOR, # 26. January 2006, 16:46:09

avatar
thats great man!
I wish i had the time to read all the links...i saved them all :smile:

By brightestvega, # 4. February 2006, 03:50:16

avatar
Hallo,

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

avatar
Change colors here:
/* :: TAGS :: */

#content .tags a:link, #content .tags a:visited, #content .tags a:active, .tag {
color:#080;
}

#content .tags a:hover {
color:#0c0;
}

.tagged {
font-weight:bold;
}

By SerbianFighter, # 14. February 2006, 08:28:07

avatar
Hello SerbianFighter,

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

avatar
Hello,

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

avatar
Well.. for all I know it should work ok, but then again I'm not too good with css :frown:

By SerbianFighter, # 14. February 2006, 18:37:15

avatar
SerbianFighter,

You're The CSS :star::star::star::star::star: in the Opera World...

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" :rolleyes:

Please, keep on helping those guys (like myself !) who realy are "worst than you are" :cheers:

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

avatar
:D

By Gothic Lady, # 21. February 2006, 16:20:04

avatar
@cornebarrieu
This looks very interesting :smile:

By SerbianFighter, # 21. February 2006, 16:29:30

avatar
Nice work. Great appreciate :smile:

By wangzhijun, # 7. March 2006, 07:49:44

avatar
excuse please. how'd i change order of photo albums?
mira

By Oswego, # 8. March 2006, 01:04:46

avatar
No way.

By SerbianFighter, # 8. March 2006, 05:31:54

avatar
thx 4 sharing

By kaka327, # 29. March 2006, 08:41:36

avatar
I'm totally confused... Not really one for CSS... I'm still living in the HTML world. Can you tell me how I can make the side bars and the background colours all dark?

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

avatar
header links are wondeful, but i wonder if these are copyrighted images. anyways ur site is a briliant redesign, very creative, although little mess, cheeful mess, i mean:)

By adamli, # 25. April 2006, 07:39:22

avatar
man, after checking some of these header images it tells me it was made to fit a header size by cutting some selected wallpapers - some of these wallpapers are copyrighted.

By adamli, # 25. April 2006, 07:44:27

avatar
For all I know I got them on some cd with free stock photos.

By SerbianFighter, # 25. April 2006, 08:24:12

May 2008
SMTWTFS
April 2008June 2008
123
45678910
11121314151617
18192021222324
25262728293031

Important links