Skip navigation.

My 0.02$ on Opera Community development

published by Ivan Minic

Redesigning My.Opera space tutorial - Index Page

By Ivan Minic. 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

yasiula 27. November 2005, 01:43

Nice work.
Thanks.
Keep going.

shaolinac 27. November 2005, 08:28

Excellent job

electric_del 28. November 2005, 14:46

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

sonoman_x 28. November 2005, 15:42

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

tratincica 30. November 2005, 23:52

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

Anonymous 1. December 2005, 15:56

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.

Anonymous 1. December 2005, 15:56

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.

SerbianFighter 1. December 2005, 16:04

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.

WhiteLotus 3. December 2005, 09:19

Wow... That helped me a lot!

I loved the graphic banners!

10/10!

froggy420 4. December 2005, 17:01

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

SerbianFighter 4. December 2005, 17:18

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

chanstudio 18. December 2005, 04:50

Good job. thanks for your hard work.

Anonymous 21. December 2005, 01:58

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.

sonoman_x 21. December 2005, 02:03

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!

jonimueller 24. December 2005, 19:23

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!) ;-)

tamingsari 29. December 2005, 04:06

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

SerbianFighter 29. December 2005, 04:30

No.

spaces 31. December 2005, 09:07

nice!thanks you ! 谢谢！

cat^ 3. January 2006, 13:19

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.

SerbianFighter 3. January 2006, 13:47

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

vtr 5. January 2006, 09:45

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

SerbianFighter 5. January 2006, 10:31

Preferences - My Files

rdm 5. January 2006, 12:44

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

~DarkAngel~ 16. January 2006, 04:21

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

dan1el 18. January 2006, 17:25

We want more corner images :smile:

TRILINGUAL-TRANSLATOR 26. January 2006, 16:46

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

brightestvega 4. February 2006, 03:50

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

Thomas0 14. February 2006, 08:17

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

SerbianFighter 14. February 2006, 08:28

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;
}

Thomas0 14. February 2006, 09:10

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

Thomas0 14. February 2006, 18:26

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;
}

SerbianFighter 14. February 2006, 18:37

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

cornebarrieu 20. February 2006, 19:48

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

Gothic Lady 21. February 2006, 16:20

:D

SerbianFighter 21. February 2006, 16:29

@cornebarrieu
This looks very interesting :smile:

wangzhijun 7. March 2006, 07:49

Nice work. Great appreciate :smile:

Oswego 8. March 2006, 01:04

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

SerbianFighter 8. March 2006, 05:31

No way.

kaka327 29. March 2006, 08:41

thx 4 sharing

IMHO 3. April 2006, 08:41

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!

adamli 25. April 2006, 07:39

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:)

adamli 25. April 2006, 07:44

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.

SerbianFighter 25. April 2006, 08:24

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

perfeito 13. September 2008, 21:01

My blog with Random Header Images

http://my.opera.com/perfeito/albums

chaitanyak 19. November 2008, 18:24

hi have been using this as refrence for a while now! thanks!

however as of yesterday my blog's background image isn't showing up!! think its because of the major update that happened to the opera site..anyway heres my css, please take a look and see if you can figure out whats wrong:
http://my.opera.com/chaitanyak/blog/2008/11/19/help-opera-blog-background-missing

thanks in advance
November 2009
S M T W T F S
October 2009December 2009
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

Important links