How to make few basic changes to your Opera Space

How to make few basic changes to your Opera Space

Redesigning My.Opera space tutorial


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]

_______________________________________________________________________________________________________

Basic things

Originaly posted in My 0.02$ on Opera Communty development as How to make few basic changes to your Opera Space

_______________________________________________________________________________________________________
So, few people have contacted me about this, and I promissed to explain at least the basic stuff, so here it is

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

Now, few basic codes

Header image:

In Enter CSS: field enter:

#top2 {
background: [COLOR=red]#527fbf[/COLOR] url([COLOR=green]http://www.example.com/image.jpg[/COLOR]) top right;
}

Explanation:
#527fbf is Hex value of this color. This color would be shown under image. To change it pick your color
http://www.example.com/image.jpg is Header image. You can host it eather in your files or on some free image hosting, such as Imageshack

Title text

In Enter CSS: field enter:

#top h1 {
font-family: [COLOR=red]Georgia[/COLOR];
font-weight: [COLOR=deeppink]normal[/COLOR];
font-size: [COLOR=green]36px[/COLOR];
color: [COLOR=darkblue]#D8ECF5;[/COLOR]
}

Explanation:
Georgia - Font face is font type that would be used. For example here is used Georgia, and on my Opera Mini blog is Impact. My suggestions are to use some of these fonts since they are the ones that everyone has installed: Impact, Verdana, Trebuchet Ms, Comic Sans MS, Garamond, GothicE, GothicG, GothicI. You can see them in action here
normal - There you can select basic weight of the font which is "Normal" , "Bold" or "Italic.
36px - Font size in pixels, I don't think you need more info on this.
#D8ECF5; is Hex value of this color. This color would be the color of title text. To change it pick your color

Subititle

In Enter CSS: field enter:

#subtitle {
font-family: [COLOR=red]Georgia[/COLOR];
color: [COLOR=darkblue]#D8ECF5[/COLOR];
font-size: [COLOR=green]14px;[/COLOR];
}

Explanation:
Georgia - Font face is font type that would be used. For example here is used Georgia, and on my Opera Mini blog is Impact. My suggestions are to use some of these fonts since they are the ones that everyone has installed: Impact, Verdana, Trebuchet Ms, Comic Sans MS, Garamond, GothicE, GothicG, GothicI. You can see them in action here
14px; - Font size in pixels, I don't think you need more info on this.
#D8ECF5 is Hex value of this color. This color would be the color of title text. To change it pick your color

Blog post's titles

In Enter CSS: field enter:

.title, .title a:link, .title a:visited, .title a:active {
font-family: [COLOR=red]Georgia[/COLOR];
font-weight: [COLOR=deeppink]normal[/COLOR];
font-size: [COLOR=green]24px[/COLOR];
color: [COLOR=darkblue]#235E98[/COLOR];
}

Explanation:
Georgia - Font face is font type that would be used. For example here is used Georgia, and on my Opera Mini blog is Impact. My suggestions are to use some of these fonts since they are the ones that everyone has installed: Impact, Verdana, Trebuchet Ms, Comic Sans MS, Garamond, GothicE, GothicG, GothicI. You can see them in action here
normal - There you can select basic weight of the font which is "Normal" , "Bold" or "Italic.
24px - Font size in pixels, I don't think you need more info on this.
#235E98 is Hex value of this color. This color would be the color of title text. To change it pick your color

Want more?

Ok, these stuff I mentioned are basics, stuff most people wants and asks for. You, of course, can change much more stuff, and if you would like to see what that exactly means view and read Additional information on your custom style sheet page (http://my.opera.com/Username/account/usercss.dml).

Thanks for this... it's the first straightforward explanation I've spotted. Plan to experiment over the weekend and see what I can come up with.

Jere was patient enough to post a detailed description:

http://my.opera.com/stylists/forums/topic.dml?id=105963

M.

Yes, I already spotlighted that and sent link to few people.... but that is hardcore modifying

Originally posted by SerbianFighter:

Yes, I already spotlighted that and sent link to few people.... but that is hardcore modifying

I'd seen it and been scared off! I love Jere's work but I kinda needed a really simple idiot's guide. to both though.

Originally posted by SerbianFighter:

Yes, I already spotlighted that and sent link to few people.... but that is hardcore modifying

hardcore is good

M.

Hi guys... I've started customizing but the image I'm using repeats across the page. How do I get it to show only once?

The code I've used is:

#top2 {
background: #336600 url(http://my.opera.com/Words/homes/files/1blogtitle.jpg) fixed top right;
}

add no-repeat value to the shorthand background property, or a new one: background-repeat: no-repeat;

M.

Thank you

Hi everybody,

my guide is not really for CSS beginners, it just attempts to describe the structure of profile pages in hope of making it a bit easier for others. It isn't all complete and at least one thing has changed since I wrote it. I'll try to improve it a bit now.

If there is any suggestion on which basic change should I explain too, please feel free to tell me... Jere's guide is great, but I'm trying to make something for total beginers

Thanks for this great tutorial!
Anyway I can't get to understand what to modify to change the way the "content" on the right (album, calendar, about) is viewed. My intention was to edit the background of the table (?) that contains the title of one of this contents, but I didn't make it (even thought I'm not a newbie to css).

Could someone point me out what should I edit? thanks!

Sparkster

I rewrote this tutorial, and am planing to write more in next couple of days.. so for now you can see only deailed info on header part:
http://my.opera.com/WhyOpera/blog/show.dml/63665

I believe in 3-4 days, I will write more about boxes on the right side

Originally posted by SerbianFighter:

I believe in 3-4 days, I will write more about boxes on the right side

Originally posted by SerbianFighter:

I rewrote this tutorial, and am planing to write more in next couple of days.. so for now you can see only deailed info on header part:
http://my.opera.com/WhyOpera/blog/show.dml/63665

I believe in 3-4 days, I will write more about boxes on the right side

Ok, i'll wait (afterall it's just some visual liking )
thanks anyway for the time you spend about it.

Sparkster

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


All these elements are explained with 4 examples in code and picture
You can expect more from me.

woooooooo

just GREAT!

Thanks a lot.

Sparkster

Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 4] -
Other My.Opera Pages - Profile, Links, Friends, etc.

• Profile
  
• Friends
  
• Links

http://my.opera.com/WhyOpera/blog/show.dml/63665

First post updated

Updates: - You really want to check this

- 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

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

- 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

- 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

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