Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 4]
By SerbianFighter. Friday, 18. November 2005, 07:47:37
[Repeating the usual stuff]
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
[Repeating ends here]
What have we already explained?
Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 1]
http://my.opera.com/WhyOpera/blog/show.dml/63665
Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 2]
http://my.opera.com/WhyOpera/blog/show.dml/64277
Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 3]
http://my.opera.com/WhyOpera/blog/show.dml/64989
Other My.Opera Pages
Profile, Links, Friends, etc.
Ok, many of things and elements we have already explained in last 3 posts, so in this one we aren't going to go line-by-line, and there will be no textual or graphical examples. These elements for most of users aren't too important, so we will just explain how stuff works and then in next post, go to stuff you all are waiting for... tips and tricks to make your Opera space look good
Profile
If we take a look into main.css of default theme we will spot that there is a part about profile. That part is marked with "
/* :: PROFILE :: */" at the beggining.
So, what are the most important elements and what do they control.
#profile - Controls the width of that whole page.
#profile h2 - Controls captions on blocks in your profile page.
#profile-top - Controls basic properties for the fields / blocks in your profile.
#userinfo - Controls first big block in you profile where user data is stored.
#userpic - Controls the picture in block mentioned above.
#myspots li - Place that controls list of your spotlights. You can change icon here.
#friendlist li - Place that controls list of your friends. You can change icon here.
Friends
If we take a look into main.css of default theme we will spot that there is a part about friends. That part is marked with "
/* :: FRIENDS :: */" at the beggining.
So, what are the most important elements and what do they control.
.myfriend - Controls the look of cells where data for each friend is stored.
.myfriend h3 - Controls the way your friend name will look.
.mypic - Controls the look of field where friends picture is shown.
.myloc, .friendof - Controls the look friends location.
.myfriend blockquote - Controls the look of friends quote.
#fnet h3, #fnet2 h3, #fnet3 h3 - Controls the look of cells that show friendly network page stages.
.fpic - Controls the look of friends picture in friendly network.
Links
If we take a look into main.css of default theme we will spot that there is a part about links. That part is marked with "
/* :: LINKS :: */" at the beggining.
#mylinks - Controls the width of that whole page.
#mylinks h2 - - Controls captions on blocks in your links page.
#mylinks p - Basically controls fontsize used on the whole page.
.newsfeed span, .newsfeed a - Controls newsfeeds.
.url - Controls color of the links.
.linkdesc - Controls the look of links description.
End of Part 4
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
[Repeating ends here]
What have we already explained?
Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 1]
- Header part of your My.Opera Space
- Title text
- Subtitle text
- Header image and menu background
http://my.opera.com/WhyOpera/blog/show.dml/63665
Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 2]
- Blog on My.Opera
- Post title
- Sticky post mark
- Post date and tags
http://my.opera.com/WhyOpera/blog/show.dml/64277
Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 3]
- Sidebar on My.Opera Blog
- Sidebar width
- Sidebar captions
- Other sidebar elements (Calendar , Album slideshow , Album slideshow )
http://my.opera.com/WhyOpera/blog/show.dml/64989
Other My.Opera Pages
Profile, Links, Friends, etc.
Ok, many of things and elements we have already explained in last 3 posts, so in this one we aren't going to go line-by-line, and there will be no textual or graphical examples. These elements for most of users aren't too important, so we will just explain how stuff works and then in next post, go to stuff you all are waiting for... tips and tricks to make your Opera space look good
Profile
If we take a look into main.css of default theme we will spot that there is a part about profile. That part is marked with "
/* :: PROFILE :: */" at the beggining.
So, what are the most important elements and what do they control.
#profile - Controls the width of that whole page.
#profile h2 - Controls captions on blocks in your profile page.
#profile-top - Controls basic properties for the fields / blocks in your profile.
#userinfo - Controls first big block in you profile where user data is stored.
#userpic - Controls the picture in block mentioned above.
#myspots li - Place that controls list of your spotlights. You can change icon here.
#friendlist li - Place that controls list of your friends. You can change icon here.
Friends
If we take a look into main.css of default theme we will spot that there is a part about friends. That part is marked with "
/* :: FRIENDS :: */" at the beggining.
So, what are the most important elements and what do they control.
.myfriend - Controls the look of cells where data for each friend is stored.
.myfriend h3 - Controls the way your friend name will look.
.mypic - Controls the look of field where friends picture is shown.
.myloc, .friendof - Controls the look friends location.
.myfriend blockquote - Controls the look of friends quote.
#fnet h3, #fnet2 h3, #fnet3 h3 - Controls the look of cells that show friendly network page stages.
.fpic - Controls the look of friends picture in friendly network.
Links
If we take a look into main.css of default theme we will spot that there is a part about links. That part is marked with "
/* :: LINKS :: */" at the beggining.
#mylinks - Controls the width of that whole page.
#mylinks h2 - - Controls captions on blocks in your links page.
#mylinks p - Basically controls fontsize used on the whole page.
.newsfeed span, .newsfeed a - Controls newsfeeds.
.url - Controls color of the links.
.linkdesc - Controls the look of links description.
End of Part 4
Useful links
WIDGETIZE