Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 1]
By SerbianFighter. 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:
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
Example 2:
Example 3:
Example 4:
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:
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: :
Example 2:
Example 3:
Example 4:
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:
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; -
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:
These are just header images, I won't change menu background, but you can if you want
Example 1: :
Example 2:
Example 3:
Example 4:
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
End of Part 1
Useful links
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
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.pngExample 2:
/SerbianFighter/homes/blog/example2look.pngExample 3:
/SerbianFighter/homes/blog/example3look.pngExample 4:
/SerbianFighter/homes/blog/example4look.png| example1-part1.txt | example2-part1.txt | example3-part1.txt | example4-part1.txt |
End of Part 1
Useful links
- Styling My Opera profile pages by Jere Purmonen
- W3schools CSS guide
- CSS is not hard to learn – if you recognise it for what it is
- CSS Toolshed
- CSS Beauty
- CSS Creator
- CSS Discuss Wiki
- CSS Zen Garden
- Andy Budd's CSS Links
By Words, # 15. November 2005, 07:46:55
By Mekkinz, # 1. December 2005, 13:50:00
By davidcrickett, # 3. December 2005, 14:16:29
Peace be with you and thank you very much for your fine work!
By lulando, # 6. December 2005, 20:12:01
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.
By bhtooefr, # 12. December 2005, 16:22:54
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
By SerbianFighter, # 12. December 2005, 16:27:20
By bhtooefr, # 12. December 2005, 16:50:00
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.
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....
By neonlinux, # 20. January 2006, 02:59:17
By SerbianFighter, # 20. January 2006, 03:15:42
By starcatcher, # 13. February 2006, 09:45:35
By SerbianFighter, # 13. February 2006, 11:54:22
By phamlam, # 24. March 2006, 02:16:44
By martinkarger, # 11. April 2006, 12:17:30
By SerbianFighter, # 11. April 2006, 12:33:44
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
By bugscout, # 13. April 2006, 17:05:54
By SerbianFighter, # 13. April 2006, 17:21:08
if i upload the images to /blog they will be resized
in /files they stay as they are.
By bugscout, # 14. April 2006, 00:14:15
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;
}
By purplestreets, # 3. May 2006, 19:38:36
By SerbianFighter, # 3. May 2006, 19:44:43
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
By Carnage360, # 28. June 2008, 11:05:17
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.
By smietnik, # 24. July 2008, 13:11:14