Skip navigation.

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 Minic. Tuesday, 15. November 2005, 05:45:23

, ,

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 15. November 2005, 07:46

Bookmarked... Thanks!

Mekkinz 1. December 2005, 13:50

Thankyou for your work on this.

davidcrickett 3. December 2005, 14:16

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

lulando 6. December 2005, 20:12

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

bhtooefr 12. December 2005, 16:22

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.

SerbianFighter 12. December 2005, 16:27

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:

bhtooefr 12. December 2005, 16:50

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

neonlinux 20. January 2006, 02:59

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:

SerbianFighter 20. January 2006, 03:15

Try with another theme, that template is more complicated :wink:

starcatcher 13. February 2006, 09:45

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

SerbianFighter 13. February 2006, 11:54

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

phamlam 24. March 2006, 02:16

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

martinkarger 11. April 2006, 12:17

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?

SerbianFighter 11. April 2006, 12:33

First theme is default

bugscout 13. April 2006, 17:05

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

SerbianFighter 13. April 2006, 17:21

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

bugscout 14. April 2006, 00:14

hi,

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

in /files they stay as they are.

purplestreets 3. May 2006, 19:38

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

SerbianFighter 3. May 2006, 19:44

You leftout ; at the end of background row :wink:

Carnage360 28. June 2008, 11:05

Sorry but it's just not working for me :frown:

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

smietnik 24. July 2008, 13:11

It's not working for me, too :frown:
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.

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