My 0.02$ on Opera Community development

published by Ivan Minic

Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 1]

By Ivan MinicSerbianFighter. Tuesday, November 15, 2005 5:45:23 AM

, ,

So... Many people liked How to make few basic changes to your Opera Space guide, so I decided to try writing a bit more on this topic, with examples. 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 Header part of your My.Opera Space Title, Subtitle, Header picture, Menu background, etc. Title text If we take a look into main.css of default theme we will spot that there is a part about title. I'm copying it and explaining it:

#top h1 { margin:0; width:100%; overflow:hidden; font-size:30px; font-family:'trebuchet ms',arial,helvetica,sans-serif; line-height:normal; padding-top:22px; }

So, Explaining line by line: margin:0 - The CSS margin properties define the space around elements. In this case margin is 0. You can see examples of margin usage here and get detailed info on CSS margin here width:100% - The width property sets the width of an element. In this case width of title is 100%, and that means that it will be possible for users to write their title as long as there is space in header. You can see examples of width usage here, and learn more on CSS dimensions here. overflow:hidden - The overflow property sets what happens if the content of an element overflow its area. Hidden means that the content is clipped, but the browser does not display a scroll-bar to see the rest of the content. You can see examples of overflow usage here. font-size:30px - Font-size sets the size of a font. In this case font size is set in pixels, and to be exact 30pixels. More about fonts and font size here. font-family:'trebuchet ms',arial,helvetica,sans-serif - Font-family is a prioritized list of font family names and/or generic family names for an element In this case family contains: trebuchet ms,arial,helvetica,sans-serif and no1 priority is trebuchet ms. More on font-family usage here. line-height:normal - The line-height property sets the distance between lines. Value normal sets a reasonable distance between lines. More about line-height here. padding-top:22px - The padding-top property sets the top padding (space) of an element. In this case it is set to 10 pixels. More about padding-top here. So what can I do? I will from now on make 4 examples for you and at the end you will be able to see how each of them looks: Example 1: : Elements that are added are color and font-style

#top h1 { margin:top; width:100%; overflow:hidden; font-size:36px; font-family:'Impact',arial,helvetica,sans-serif; font-style: bold; color:#808080; line-height:normal; padding-top:22px; }

Example 2:

#top h1 { margin:top; width:100%; overflow:hidden; font-size:40px; font-family:'GothicE',arial,helvetica,sans-serif; font-style: italic; line-height:normal; padding-top:22px; }

Example 3:

#top h1 { margin:top; width:100%; overflow:hidden; font-size:32px; font-family:'Comic Sans MS',arial,helvetica,sans-serif; line-height:normal; color:#FFFF00; padding-top:22px; }

Example 4:

#top h1 { margin:top; width:100%; overflow:hidden; font-size:36px; font-family:'Georgia',arial,helvetica,sans-serif; line-height:normal; padding-top:22px; }

Subtitle text If we take a look into main.css of default theme we will spot that there is a part about subtitle. I'm copying it and explaining it:

#subtitle { margin:0; font-size:12px; width:100%; overflow:hidden; }

So, Explaining line by line: margin:0 - The CSS margin properties define the space around elements. In this case margin is 0. You can see examples of margin usage here and get detailed info on CSS margin here font-size:12px - Font-size sets the size of a font. In this case font size is set in pixels, and to be exact 12pixels. More about fonts and font size here. width:100% - The width property sets the width of an element. In this case width of title is 100%, and that means that it will be possible for users to write their title as long as there is space in header. You can see examples of width usage here, and learn more on CSS dimensions here. overflow:hidden - The overflow property sets what happens if the content of an element overflow its area. Hidden means that the content is clipped, but the browser does not display a scroll-bar to see the rest of the content. You can see examples of overflow usage here. So what can I do? I will from now on make 4 examples for you and at the end you will be able to see how each of them looks: Example 1: :

#subtitle { margin:top; width:100%; overflow:hidden; font-size:10px; font-family:'Verdana',arial,helvetica,sans-serif; font-style: bold; color:#C0C0C0; }

Example 2:

#subtitle { margin:top; width:100%; overflow:hidden; font-size:20px; font-family:'GothicI',arial,helvetica,sans-serif; font-style: italic; }

Example 3:

#subtitle { margin:top; width:100%; overflow:hidden; font-size:20px; font-family:'Comic Sans MS',arial,helvetica,sans-serif; color:#FFFFFF; }

Example 4:

#subtitle { margin:top; width:100%; overflow:hidden; font-size:14px; font-family:'Georgia',arial,helvetica,sans-serif; color:#CCCCCC }

Header image and menu background If we take a look into main.css of default theme we will spot that there is a part about these 2 rather simple elements I'm copying it and explaining it:

#top2 { height:116px; padding-left:15px; background:#2f569b url(/community/graphics/users/1/top.gif) top left repeat-x; border-bottom:1px solid #fff; } #menu { clear:both; background:#e9e9e9 url(/community/graphics/users/1/menu.gif); }

So, Explaining line by line: height:116px; - The height property sets the height of an element.. In this case height is set to be 116 pixels. More on height property. padding-left:15px; - The padding-left property sets the left padding (space) of an element. In this case it has been set to 15 pixels. More on padding-left here. background:#2f569b url(/community/graphics/users/1/top.gif) top left repeat-x; -
  • #2f569b - Color. In this case this one
  • url(/community/graphics/users/1/top.gif) - Location of header image.
  • top - Sets how far the top edge of an element is above/below the top edge of the parent element
  • left - Sets how far the left edge of an element is to the right/left of the left edge of the parent element
  • repeat-x - The background image will be repeated horizontally
border-bottom:1px solid #fff;- The border-bottom property is a shorthand property for setting all the properties for the bottom border in one declaration. - In this case size will be 1 pixel and color will be #fff. More on border-bottom here. clear:both; - No floating elements allowed on either the left or the right side You can see more on this topic here. background:#e9e9e9 url(/community/graphics/users/1/menu.gif); - The CSS background properties define the background effects of an element. Elements are already explained above. More on this topic here. Images that will be used in examples:
example1.png example2.png example3.png example4.png
These are just header images, I won't change menu background, but you can if you want wink Example 1: :

#top2 { height:116px; padding-left:15px; background:#000000 url(http://my.opera.com/SerbianFighter/homes/files/example1.png) top left repeat-x; border-bottom:1px solid #fff; } #menu { clear:both; background:#e9e9e9 url(/community/graphics/users/1/menu.gif); }

Example 2:

#top2 { height:116px; padding-left:15px; background:#2f569b url(http://my.opera.com/SerbianFighter/homes/files/example2.png) top left repeat-x; border-bottom:1px solid #fff; } #menu { clear:both; background:#000000 url(/community/graphics/users/1/menu.gif); }

Example 3:

#top2 { height:116px; padding-left:15px; background:#FF9900 url(http://my.opera.com/SerbianFighter/homes/files/example3.png) top left repeat-x; border-bottom:1px solid #fff; } #menu { clear:both; background:#e9e9e9 url(/community/graphics/users/1/menu.gif); }

Example 4:

#top2 { height:116px; padding-left:15px; background:#AFC5DA url(http://my.opera.com/SerbianFighter/homes/files/example4.png) top left repeat-x; border-bottom:1px solid #fff; } #menu { clear:both; background:#e9e9e9 url(/community/graphics/users/1/menu.gif); }

How examples look? Example 1: /SerbianFighter/homes/blog/example1look.png Example 2: /SerbianFighter/homes/blog/example2look.png Example 3: /SerbianFighter/homes/blog/example3look.png Example 4: /SerbianFighter/homes/blog/example4look.png
example1-part1.txt example2-part1.txt example3-part1.txt example4-part1.txt
End of Part 1 Useful links

Crystal icon is hereRedesigning My.Opera space, blog and photo gallery in X easy steps

Comments

Words Tuesday, November 15, 2005 7:46:55 AM

Bookmarked... Thanks!

Mekkinz Thursday, December 1, 2005 1:50:00 PM

Thankyou for your work on this.

David Blangstrupdavidcrickett Saturday, December 3, 2005 2:16:29 PM

Thank you very much for a very cool tutorial - and pics! smile

lulando Tuesday, December 6, 2005 8:12:01 PM

Assalam aleikum wa rahmatullah wa barakatuh
Peace be with you and thank you very much for your fine work!

Eric Ruckerbhtooefr Monday, December 12, 2005 4:22:54 PM

Hmm... I've got an interesting question...

Can you take a look at my blog? There's a blue line between the Opera Community bar and the blog title bar. CSS at: http://my.opera.com/bhtooefr/homes/user.css

I'm starting from the DEFAULT theme.

Ivan MinicSerbianFighter Monday, December 12, 2005 4:27:20 PM

Hi.
Look at this element:
#top {
font-size:11px;
max-width:872px;
min-width:739px;
margin:0 -10px;
text-align:left;
border-top:1px solid [color=red]#4987c7[/color];
color:#fff;
}

Change #4987C7 to some other wink

Eric Ruckerbhtooefr Monday, December 12, 2005 4:50:00 PM

Thanks! (FWIW, it'll be #49c787 - that's what I'm doing - reversing the green and blue channels)

neonlinux Friday, January 20, 2006 2:59:17 AM

Hi there Ivan
I give up.... I must be dense or something
I tried to modify the header image on the blue flying saucer
web page layout and my butchering sucks big time...

What I was attempting to do was switch the blue flying saucer
for one or two of your wallpaper images
the one with the island and a gif of my chinese name.

bomb cry

Jim

Whell... at least it now looks much better than before....
but whether it is suitable or not I will leave it alone
before it reverts back to the garbage can look.... no

Ivan MinicSerbianFighter Friday, January 20, 2006 3:15:42 AM

Try with another theme, that template is more complicated wink

starcatcher Monday, February 13, 2006 9:45:35 AM

Hello!I have a question,and hope you can help me.Can I (if yes how) upload picture from my computer (or from a disc) to be background for my blog? Also can I use the same abriviations customizing my other blog,wich is not w/Opera? Thank you very much for your time all of of the information you provide...

Ivan MinicSerbianFighter Monday, February 13, 2006 11:54:22 AM

Sure you can upload background, and about customizing other blogs..it is basiacally the same so I think you can....

Phạm Lâmphamlam Friday, March 24, 2006 2:16:44 AM

Thank you. Here is my blog http://my.opera.com/phamlam

kotzimartinkarger Tuesday, April 11, 2006 12:17:30 PM

You wrote "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." But where do i find the default theme?

Ivan MinicSerbianFighter Tuesday, April 11, 2006 12:33:44 PM

First theme is default

walterbugscout Thursday, April 13, 2006 5:05:54 PM

hi,

this tutorial makes it very easy to change the blog.

my only problem is, that the file-upload resizes my header-logo to max 500 px width, so i have to load it from an other server.

thanks

Ivan MinicSerbianFighter Thursday, April 13, 2006 5:21:08 PM

hm..... don't know.. it doesn't change files..

walterbugscout Friday, April 14, 2006 12:14:15 AM

hi,

if i upload the images to /blog they will be resized

in /files they stay as they are.

purplestreets Wednesday, May 3, 2006 7:38:36 PM

hello, i'm trying to get my picture in the header and it won't work. i'm sure there is a simple answer to it - i just don't get it.


this is my site: http://my.opera.com/purplestreets/blog/


this is my picture: http://my.opera.com/purplestreets/homes/files/exampleKopie.png


this is what i put into the "custom style sheet box:

top2 {
height:116px;
padding-left:15px;
background:#000000 url(http://my.opera.com/purplestreets/homes/files/exampleKopie.png) top left repeat-x;
border-bottom:1px solid #fff;
}

Ivan MinicSerbianFighter Wednesday, May 3, 2006 7:44:43 PM

You leftout ; at the end of background row wink

CarnageCarnage360 Saturday, June 28, 2008 11:05:17 AM

Sorry but it's just not working for me sad

I choose the default web page layout
then go custom style, to open the page for the css
then put in some code. I tried the code on this page, copy and paste
then save that so it runs the current page AND the custom css, still no change

but when i run it with only the custom css well then eveything goes away and just the text in a pretty bad format appears.

how do i get the code and the default page to run, I followed the instructions, i think sad

Mirasmietnik Thursday, July 24, 2008 1:11:14 PM

It's not working for me, too sad
Plus this link doesn't work(?):

http://my.opera.com/community/css/users/1/main.css

so I'm not able to make any changes to it.

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