Profile, Links, Friends, etc.

Most of the elements we have already explained in the last three steps, so from now on, we aren't going to go line by line, and there will be no textual or graphic examples. We will just explain how things work and then, in Step Five, go to what you all are waiting for: Tips and tricks to make your Opera space look good!

Profile

In main.css you'll find the area that deals with the profile. It will be prominently marked:

/* :: PROFILE :: */

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:

/* :: FRIENDS :: */

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's name will look.

.mypic

Controls the look of field where your friend's picture is shown.

.myloc, .friendof

Controls the look of your friend's location.

.myfriend blockquote

Controls the look of friend's 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:

/* :: LINKS :: */

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