Styling My Opera profile pages

Styling My Opera profile pages

Note: (12 Nov 2005) This guide isn't really intended for CSS beginners; I assume you to be experienced enough to understand how the most common CSS properties work. I'm mainly attempting to describe the structure of profile pages, and some default style sheets you can't get rid of, so that you wouldn't have to figure it all out yourself.

I was asked to post some about the restyling of my profile page which seems to be rather popular this week

The styling is not very complex, just different. The custom style sheet editor lets you choose to either use your styles together with the default theme, or your styles only. If you only want to keep the default theme but change some fonts or colors, you'll be better of opting to keep the default theme. I didn't though.

Even if you use your own CSS only, two common style sheets are still included. These contain some values that you will need to override to ensure that your styles won't break. This is the first ruleset of my stylesheet:

* {
    float: none !important;
    width: auto !important;
}

I added it because there are so many default float and width values that it's best to reset them all. Next, I set the styles for the 'html' element:

html {
    background: #fff url(http://members.surfeu.fi/jerkku/op/pig-bg.jpg) no-repeat fixed bottom right;
    color: #222;
    font: 10pt/1.3 "Trebuchet MS", sans-serif;
    height: 100%;
}

It sets the background to white, and adds my piggy to the bottom right corner. 'Fixed' (the background-attachment) makes it stay where it is (and unfortunately, makes scrolling laggy in most browsers). This will not work in IE unless you use a special workaround. I host the picture myself; I suppose you could use the storage space provided by My Opera too. I also set the default font and color for the document. height: 100% gives the html element the height of the viewport. This is to ensure that my piggy stays at the bottom right even if the document wasn't long enough to occupy the height of the viewport. With height: 100%, the 'html' will not stretch along with the document either, if the document is higher than 100%. If you wanted it to, you could use min-height, which would make the piggy appear on the very bottom of the document (scrolled down), but I've found that it doesn't work as desired in Firefox 1.0 / Mozilla 1.7. IE doesn't support min-height at all but it wrongly stretches a container with a height of 100%.

The next ruleset is the body:

body {
    width: 600px !important;
    border: 1px solid #444;
    margin: 15px 0 15px 15px;
    padding: 0 0 10px 0;
    background: url(http://members.surfeu.fi/jerkku/op/bodybg.png);
    position: relative;
}

Firstly, I set a fixed with of 600px, and I must use !important, else it will not override the auto width that I set in the very first ruleset. I set a border, some margin and padding too, and a 1x1px² PNG background image. The PNG uses alpha channel opacity (you can create such images at least in Photoshop and Paint Shop Pro), which makes the piggy partially shine through, but unfortunately this doesn't work in IE either. IE doesn't set the width either; I'm not sure why but I guess it's related to the !important. I'm not interested in making my profile page work in IE - this is a community for Opera users, after all However, if you wanted IE to use another background image, or just background color, you could use a hack:

* html body {
    background: blue url(http://stuff/);
}

Finally, I use position: relative on the body to make sure that the absolutely positioned elements inside the body (we'll get there later) are positioned against the content edge of the body. If you took this rule out, you'd find some elements positioned against the edges of the viewport.

To be able to style all other elements, you will need to view the source code and get a little familiar with it, to know what there is. Unfortunately, My Opera doesn't make it too easy for us because of the lack of sufficient line changing / indenting to make it readable. You will respect Ctrl+F (Find) of your text editor! Look for <body in the source. You will see that inside the body, there are four nested wrapping divs (); #wrap1 through #wrap4.

The header section starts with a div called #topbar. This is where the Opera Community, FOAF, Messages, and other links reside. I do not style the div, but the two paragraphs inside it: #community and #meta. I set the margin, padding, background and font on #community. #meta contains FOAF and RSS links... yeah, I've hidden those with display: none. I'm a bad boy. In fact, I should probably display the FOAF link, though I see no use for it.

I use generated content to add a colon after the "Opera Community" link:

#community span:after {
    content: ": ";
}

This doesn't work in IE either. The links following "Opera Community" have the class "toplink". Because of the community default stylesheets, the following is necessary to make sure the links use the font I set for #community:

.toplink {
    font: inherit !important;
}

(Fonts are normally inherited).

#top2 is the div following #topbar. It contains the main heading of your page, as well as the menu ul. The menu ul is a child of a div with id="menu". (It wasn't like this when I first wrote this guide). I set a background, padding and overflow: auto on #top2. overflow: auto is there to make it stretch with its floated child elements. On the h1 inside, I set the font, a zero margin (the containing #top2 div already has a padding), and float: left !important. Again, !important is necessary because I reset all floats in the beginning.

Following the h1, there is a p with ID subtitle. As the ID says, it contains the subtitle below your page title. Again, I zero the margin, and I set a top padding of 15px. I left float it too to align it next to the h1. Finally I use generated content to add the em dash between the heading and the subtitle (i.e. before the subtitle):

#subtitle:before {
    content: "—";
    padding: 0 5px;
}

There is 5px padding on the left and the right side - otherwise the heading and the subtitle would be squeezed together.

I have five rulesets for the menu ul:

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 45px;
    right: 20px;
}
#menu a {
    color: #fff;
}
#menu li {
    float: left !important;
    font: bold 10pt/1.1 "Trebuchet MS", sans-serif;
}
#menu li:before {
    content: "|";
    padding: 0 5px;
}
#menu ul :first-child:before {
    content: "";
    padding: 0;
}

First, I zero the margin and padding of #menu ul, and hide the list bullets (list-style). Then I position it absolutely, giving it offset from the top and the right edges of the body (!). (I set position: relative to the body earlier). Then I give the menu anchors a color, and left float the list items to line them up horizontally. All that is left now is to add the delimeter between the list items - for this, I use generated content again. (And generated content still doesn't work in IE). Like the em dash before the subtitle, the delimeters here also have 5px of padding on both sides.

Now, because I've given each list item a delimeter on the left side, I need to remove it from the first item. For this, the :first-child selector will suffice. (Even this doesn't work in IE). I simply revert the content to an empty string and remove the padding.

In the menu, the link pointing to the currently active page has id="selected". You may wish to highlight it somehow to let the user easier know where he is.

I have set display: none on the following selectors: #meta, .hide, #userpic, #aboutme, #aboutwork, #favforums, #grouplist, #footer, #qp, p.newsfeed, #friendlist, .myfriend .mypic, .myfriend .myloc, .myfriend blockquote. I originally did this with the intention of hiding then until I'm going to restyle them, but then I realized I like my profile page simple. Anyway, here's what the hidden elements do:

#meta is the paragraph with the FOAF link, as I described earlier. The .hide class is for a paragraph in div#top with a "skip navigation" link. #userpic is a div containing my user picture - I removed it because mine is the pig you're all familiar with, and it is already visible on my page. All information on the "About" page is grouped into divs which all have related IDs. I've hidden the following ones: #aboutme, #aboutwork, #favforums, #friendlist and #grouplist. The divs contain h2's and the content itself.

#footer is the thing on the very bottom - "Powered by Opera Community" - I removed it because it should still be apparent that this is an Opera community page. #qp means quick profile (I guess), and is a small, brief profile box on the Links and Friends pages (and Blogs and Photo album too, I presume). It is shown on the right side by default. p.newsfeed is a paragraph on the Links page that tells that a link category is a newsfeed - I hid this too and use generated content to show a slightly different "newsfeed" text next to the category title. (I'll get back to this later).

.myfriend .mypic is the user picture for a friend shown on the Friends page (.myfriend is a container, a div IIRC, that each friend has on the page). .myfriend .myloc is the "Location" line, respectively.

This guide is probably far from complete. You might still need to analyze the source somewhat, but it least it should be a bit easier now. Remember to use Ctrl+F (Edit -> Find) to find things from it. For instance, if you need to see how the favorite links (on the "About" page) are structured, just find id="favlinks" in the source. I'm not familiar with the blog / photo album pages because I don't use them. If someone wishes to add more details to this guide, just contact me and I'll add it.

Thanks Jere! I put a link to this on the comments of you member of the week post.

If you're interested: I have restyled my page too. Don't hesitate to report any errors.

i did it too, here, but I almost override all styles needed where Jere reinitialize all and sets its "from scratch".
I'm not sure the Jere's way will work with blog and so on, since the number of mother CSS used increase then; and so the risk of messing up.

scipio: on your about page are the links for "ignore this user" and "send an email" messed up. they are demanding the same place. nice design

Originally posted by NoobSaibot:

scipio: on your about page are the links for "ignore this user" and "send an email" messed up. they are demanding the same place. nice design

Thanks for reporting & for the compliment.

edit: hmm... I guess I have to be logged in as someone else to be able to see it.

i ripped off your style for the .tags, hope you don't mind

Originally posted by NoobSaibot:

i ripped off your style for the .tags, hope you don't mind

I won't if you post a screenshot of the error with "ignore user" and "send mail".

Ah! at last people who have restyled their pages! I will be too, I hope one day.


For those interessed in styled opera blogs, I have listed the one I found here: Styled Opera Blogs

Scipio: Nice one
If you still want a screenshot:screenshot1

Another thing: The blog pages look a little awkward when you go to a month/day with few or no posts.

Originally posted by euricomatos:

If you still want a screenshot:

Hmm... What should I do with that...

Originally posted by euricomatos:

Another thing: The blog pages look a little awkward when you go to a month/day with few or no posts.

Can you give an example (url)?

Originally posted by scipio:

Originally posted by NoobSaibot:

i ripped off your style for the .tags, hope you don't mind

I won't if you post a screenshot of the error with "ignore user" and "send mail".

(just collecting ideas for the future...)

Originally posted by scipio:

Can you give an example (url)?

http://my.opera.com/scipio/archive/monthly/?month=200509
screenshot

Originally posted by euricomatos:

http://my.opera.com/scipio/archive/monthly/?month=200509

Yikes! Back to the drawing board.

clear:all? Or no floats?

I created a new toplogo, the rest I left alone.
Great stuff ytsmabeer

thanks Berend Ytsma

@scipio: your "about" page is still bogus managing the "add scipio to your friends",etc links. Now, links are backward the picture...

Since you must be logged in and looking at another page than yours, I put a screenshot.

Originally posted by mmichel:

@scipio: your "about" page is still bogus managing

hmm... will take a look at it (soon).


edit: Is it OK now?

well, better ; but still bugsscipio-links2.jpg

using Jere's code as a template and being a complete CSS novice, I created
About me page
Below is the blog link:up:
Link to Blog
simple I know, but I'm happy:happy:
Thanks to all for posting user CSS codes:yes:

<edit> I have since restyled using Freds code as a base and borrowing for everywhere.
My personal pages use only my css file.

When i designed the aquariums group page, the group forum layout worked better using combined css.

I am working hard, when I have time available, to understand all the fields affected by group css commands, as customizing individual group forum elements requires this.

I have changed the guide a bit. The main change is the menu ul, because when I wrote this, the ul had the #menu ul. Now it's the parent div that has the ID.

Originally posted by Jere:

a 1x1px² PNG background image. The PNG uses alpha channel opacity

Try using a larger size background image instead. It will speed up the page's performance.

A 1x1px² background image, although saves space, eats up a lot of re-drawing time. This also applies to Opera on mobile phones.


This applies only if you're working with alpha channel images. Otherwise it does not make a big difference.

Originally posted by sagar:

eats up a lot of re-drawing time.

Thanks for the tip!

is it possible to change the links in the main menu bar?
for example i want that stands works instead photo albums
and how can it seen right in IE couse the most people watching my site r using IE

real hard for me^

I know enough html & css to change the background and colors and fornt sizes but thats about it. Can you help me with my page. All I really need to know is where do put the page elments. Here is my first attempt.. Done through trial and error.

Oh! Lots more styled blogs to list in my sidebar!
here

Originally posted by froggy420:

I know enough html & css to change the background and colors and fornt sizes but thats about it. Can you help me with my page. All I really need to know is where do put the page elments. Here is my first attempt.

Can someone tell me what I need to do to change all the black text to white.

Originally posted by froggy420:

Can someone tell me what I need to do to change all the black text to white.

You've done it!

Very good post Jere ! I'm trying to make it like yours

This code under the *\\menu li //* allows you to change the menu button names.

#menu_blog a
{
content: "New Button Name";
}
#menu_friends a
{
content: "New Button Name";
}

#menu_about a
{
content: "New Button Name";
}

#menu_albums a
{
content: "Images";
}

#menu_links a
{
content: "URL's";
}

anyone know how to add another button?

Originally posted by salmondine:

anyone know how to add another button?

I can only do it via JS... & I don't think we're supposed to know how to use that on these pages. Besides, it only works in Opera or IE (Firefox doesn't like how I do it) & even then I seem to have messed up & lost the ability for the moment.

This is going to seem like an trivial worry, but does anyone know what font Firefox uses for "♥" (BLACK HEART SUIT, Unicode char 0x2665)? I've used it on my own profile page as decoration, but I can't work out what font to set. It's currently Arial, which has a fairly pleasant glyph, but I like the one Firefox uses more (it has a recurved spike).

Also, does my page have any dodginess like scipio's did, where only another logged in user can see it?

Hi neonlinux here
I am in the process of changing mine
I now am trying to understand how to change the background color of my sidebar items
and to change the color of the words in my about area as well as its background color.

I would like to make my calendar to be transparent

Of course I would have never gotten this far by trial & error without Ivan's fantastic help

neonlinux your blog is going to look nice, still some ajustments needed but I've listed you!
also added. SirPavlova, Aozora and lokutus

Great guide Jere.

Maybe I should do something with my own Opera blog as well?

But I really miss the ability to add costume HTML at My Opera. So I think I will stick with Blogger for now.

how do I arrange the tabs in opera9? i want my personal tab below the address one, for example. thanks

VOTE what u think about http://my.opera.com/chrisely
Too many weight for images or fast? Some link or position x-y bad?
Report me please
The open code is in my root.
See u

PS-
Thanx Salmondine for the name button code and geek guys . The button name code i think is better with a mouseover effect

The same code of Salmondine with add

:hover { ... }

Nobody has mentioned great tools for styling pages — standard Opera CustomCSSs Show structural elements & Debug with outline. Especially effective if you disable all other page css before applying these ones (-:E
Also Fx extension DOM Inspector helps a lot.

Good work, Jere!

Jere, what's happended with your great layout? /-:E
Just now I wanted to show it, and saw just a standard theme there...

I changed mine back to a standard lay out as well.
Changes in site code changed, I'll rework the CSS file on my page someday after site code is stabilized.

I've done mine, well I've started to do mine. I am attempting to change my entire My.Opera site, so far I have just changed colors, added a few new graphics. I am going to be changing the fonts and some of the placements / layouts. Let me know what you think.

Thanks

Here is Mine MY Opera . Still need to do little more. I may need some help

I changed my blog with this infos and add some changment.
thanks all.

my blog

Yes, this all helped. But a crash-course in CSS first did wonders as well!

Good work!!!

Originally posted by doppler:

Yes, this all helped. But a crash-course in CSS first did wonders as well!

Did you've seen Serbian Fighter's blog entries? --> http://my.opera.com/WhyOpera/blog/show.dml/66554 <--

Originally posted by salmondine:

This code under the *\\menu li //* allows you to change the menu button names.

#menu_blog a
{
content: "New Button Name";
}
#menu_friends a
{
content: "New Button Name";
}

#menu_about a
{
content: "New Button Name";
}

#menu_albums a
{
content: "Images";
}

#menu_links a
{
content: "URL's";
}

I've tried to change the menu to my own language (but still written in Latin alphabet), but it didn't work

Only in Opera browser

Originally posted by nghiadan:

Only in Opera browser

Pham Lam has indirectly answered this question in his post on Monday

Thanks anyway

Originally posted by salmondine:

anyone know how to add another button?

You can visit Heiko page or Thủy Hiền page for more info.

Originally posted by nghiadan:

Only in Opera browser

now FF available.

Originally posted by khanhquang:

now FF available.

How? i still can't see changes in FF or Flock or IE.
It's a bit useless when changes are made only for opera as most users work with IE or FF.

Originally posted by petermanon:

Originally posted by khanhquang:

now FF available.

How? i still can't see changes in FF or Flock or IE.
It's a bit useless when changes are made only for opera as most users work with IE or FF.

I hope you can guess from this post (in Vietnamese)

http://my.opera.com/danquynh/blog/show.dml/919116

If you don't, feel free to contact me