My 0.02$ on Opera Community development

published by Ivan Minic

Redesigning My.Opera space tutorial - Index Page

By Ivan MinicSerbianFighter. Saturday, November 19, 2005 7:42:56 AM

, ,

[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

Jan Wójcikyasiula Sunday, November 27, 2005 1:43:26 AM

Nice work.
Thanks.
Keep going.

shaolinac Sunday, November 27, 2005 8:28:17 AM

Excellent job

lectricdericelectric_del Monday, November 28, 2005 2:46:44 PM

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

SONOMAN.Xsonoman_x Monday, November 28, 2005 3:42:52 PM

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

tratincica Wednesday, November 30, 2005 11:52:09 PM

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... bigsmile

Anonymous Thursday, December 1, 2005 3:56:09 PM

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 Thursday, December 1, 2005 3:56:54 PM

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.

Ivan MinicSerbianFighter Thursday, December 1, 2005 4:04:03 PM

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 Saturday, December 3, 2005 9:19:54 AM

Wow... That helped me a lot!

I loved the graphic banners!

10/10!

Tadfroggy420 Sunday, December 4, 2005 5:01:14 PM

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

Ivan MinicSerbianFighter Sunday, December 4, 2005 5:18:20 PM

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

Ninjamschanstudio Sunday, December 18, 2005 4:50:29 AM

Good job. thanks for your hard work.

Anonymous Wednesday, December 21, 2005 1:58:21 AM

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.Xsonoman_x Wednesday, December 21, 2005 2:03:37 AM

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!

Jonijonimueller Saturday, December 24, 2005 7:23:01 PM

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 Thursday, December 29, 2005 4:06:55 AM

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

Ivan MinicSerbianFighter Thursday, December 29, 2005 4:30:14 AM

No.

Sunshinespaces Saturday, December 31, 2005 9:07:46 AM

nice!thanks you ! 谢谢！

Martacat^ Tuesday, January 3, 2006 1:19:09 PM

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.

Ivan MinicSerbianFighter Tuesday, January 3, 2006 1:47:53 PM

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

V.T.R. Ravi Kumarvtr Thursday, January 5, 2006 9:45:12 AM

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

Ivan MinicSerbianFighter Thursday, January 5, 2006 10:31:38 AM

Preferences - My Files

Robert Moorerdm Thursday, January 5, 2006 12:44:47 PM

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

DarkAngel~DarkAngel~ Monday, January 16, 2006 4:21:16 AM

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

Danieldan1el Wednesday, January 18, 2006 5:25:19 PM

We want more corner images smile

CHRISTIAN LUPOVICITRILINGUAL-TRANSLATOR Thursday, January 26, 2006 4:46:09 PM

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

VegAbrightestvega Saturday, February 4, 2006 3:50:16 AM

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

ThomasThomas0 Tuesday, February 14, 2006 8:17:10 AM

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

Ivan MinicSerbianFighter Tuesday, February 14, 2006 8:28:07 AM

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

ThomasThomas0 Tuesday, February 14, 2006 9:10:29 AM

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

ThomasThomas0 Tuesday, February 14, 2006 6:26:42 PM

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

Ivan MinicSerbianFighter Tuesday, February 14, 2006 6:37:15 PM

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

Philippecornebarrieu Monday, February 20, 2006 7:48:01 PM

SerbianFighter,

You're The CSS starstarstarstarstar 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 Tuesday, February 21, 2006 4:20:04 PM

bigsmile

Ivan MinicSerbianFighter Tuesday, February 21, 2006 4:29:30 PM

@cornebarrieu
This looks very interesting smile

王志军wangzhijun Tuesday, March 7, 2006 7:49:44 AM

Nice work. Great appreciate smile

brian p. o'kaneOswego Wednesday, March 8, 2006 1:04:46 AM

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

Ivan MinicSerbianFighter Wednesday, March 8, 2006 5:31:54 AM

No way.

kakakaka327 Wednesday, March 29, 2006 8:41:36 AM

thx 4 sharing

JaisenIMHO Monday, April 3, 2006 8:41:53 AM

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!

Adam Liadamli Tuesday, April 25, 2006 7:39:22 AM

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

Adam Liadamli Tuesday, April 25, 2006 7:44:27 AM

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.

Ivan MinicSerbianFighter Tuesday, April 25, 2006 8:24:12 AM

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

História de Iguape (SP)perfeito Saturday, September 13, 2008 9:01:55 PM

My blog with Random Header Images

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

chaitanya krishnanchaitanyak Wednesday, November 19, 2008 6:24:15 PM

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
February 2012
S M T W T F S
January 2012March 2012
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

Important links