CSSing your my.opera site
Friday, 29. February 2008, 09:05:36
Maybe you have seen that I made some minor changes to my layout lately. There are some things I found out using Opera, Firefox (with DevTools) and IE7, I'd like to share so you don't run into the same trouble. 
Comments
It's pretty cool, when your visitors can directly see your replies in the comments. If you just want to give your own comment a different background color it's made in seconds. You need only 1 line of CSS code:
.ownercomment {
background: #YOUR_COLOR_AS_HEX_CODE;
}(If you don't know how to get the color code, just try this small tool.)I additionally used some small background images to give is a certain "theme" (I shortened the URL a little bit to make it more clear):
.comment1 {
background: #181818 url('SERVER_URL/comment_1.png') repeat-y;
}
.comment2 {
background: #272727 url('SERVER_URL/comment_2.png') repeat-y;
}
.ownercomment {
background: #001c30 url('SERVER_URL/comment_own.png') repeat-y;
}Et voilà... the comments are "stylish". 
Sidebar Boxes
Next I improved the look of the sidebar boxes. That's very easy as well:
#side h2, #side caption {
background: #001c30 url('SERVER_URL/sidebox_head.png') repeat-y;
}
.sidebox {
background: #181818 url('SERVER_URL/sidebox_body.png') repeat-y;
}Okay, that was pretty obvious, wasn't it? 
"Recent Visitors"-Sidebar
Next I wanted to change the last visitors box a little bit, to make it look more like a list than a collection. Easy-peasy in Opera and Firefox. We just define our own set of CSS rules for every element included:
/* VISITORS SIDEBAR */
#visitors ul {
border: none;
width: 230px;
margin: 0px;
padding: 0px;
background: transparent;
}
#visitors li {
display: inline;
height: 80px;
border: none;
width: 230px;
margin: 0px;
padding: 0px;
background: transparent;
}
#visitors li:hover {
width: 230px;
margin: 0px;
padding: 0px;
background: transparent;
}
#visitors li.first {
border: none;
width: 230px;
margin: 0px;
padding: 0px;
background: transparent;
}
#visitors li.mid {
border: none;
width: 230px;
margin: 0px;
padding: 0px;
background: transparent;
}
#visitors li a {
color: #006bd0;
border: none;
width: 73px;
margin: 0px;
padding: 0px;
background: transparent;
}
#visitors span {
float: left;
height: 22px;
width: 140px;
color: #004e87;
border: none;
margin: -60px 0px 0px 73px;
padding: 25px 0px 25px 0px;
background: transparent;
font-size: 1.5em;
}
#visitors span:hover {
color: #006bd0;
}
#visitors img {
float: left;
border: none;
margin: 0px;
padding: 0px;
background: transparent;
margin: 10px 0px 0px 5px;
}That does the trick... at least if your visitors use a real browser. If they don't, this means they use an Internet Explorer, you need to "cheat" a little bit.Be aware that the following code is NOT valid CSS!
#visitors li a { *margin: 0px 0px 0px -146px; } This works with IE6 and 7 (at least on my machine).
(16%)
WIDGETIZE
1 2 Next »
-( + )- # 29. February 2008, 09:40
Nice tool that ColorPicker tool. Thanks.
David # 29. February 2008, 10:01
Okay, I'm no kill-joy!
Besides... when will you post again in your own blog?
-( + )- # 29. February 2008, 10:24
My blog? Hmm..., don't know. There is just nothing special that crosses my mind or my eyes that I can post.
David # 29. February 2008, 10:41
rezadotcom # 29. February 2008, 15:30
David # 29. February 2008, 15:52
(btw: my last boss was named Reza too.
The changes mentioned above have to be written into the custom style sheet you can add to your site. See:
My page > Account > Design > custom style sheet
In your special case it should be right here:
http://my.opera.com/rezadotcom/account/usercss.dml
-( + )- # 29. February 2008, 15:56
Time goes by and we don't know why. Oh, is it the motion in the space?
Jonas # 29. February 2008, 18:48
K C N Martínez # 6. March 2008, 22:00
Andrew Nguyen # 29. July 2008, 02:01
Suntana # 28. August 2008, 02:58
Anyway, it's just a favor I'm asking. I know you don't know me. So, you're obviously NOT required to oblige and give me the Code.
David # 28. August 2008, 07:48
that's not much of a trouble. All I had to find out is that class sticky posts have: stickypost... surprise, surprise!
So if you want to define something additional for your sticky posts you'll want to add some lines like those:
.stickypost {background: #YOUR_COLOR_AS_HEX_CODE url('SERVER_URL/sticky_background.png') repeat-y;
}
I haven't tested it myself, but it should do the work.
Suntana # 28. August 2008, 14:54
.stickypost {background: none url("http://files.myopera.com/Suntana/blog/Nightfall BG3D.jpg") no-repeat;}
I tweaked your version just a smidgen. I put "none" for color since the Gradient Scheme would make any Color Background unnecessary. I changed it to "no-repeat" as I'm going to try to get this 3-D Plaque-like Gradient Scheme on there as the Background with precise dimensions ... Uhhh, after some trial & error.
Anyway, the Code didn't work. Nothing happened. Nothing was messed up, but nothing changed on my Welcome Sticky Post. I don't know about these things, but wouldn't something like Text Area have to be specified? This because I also have a Pic there in my Sticky Post. So, how would the CSS know whether I wanted the Gradient Background in back of the Pic or in back of the Text?
Suntana # 28. August 2008, 15:10
I removed the word "none" after "background:" in the tweaked code above. The 3-D Gradient Scheme DID display now. But, it is pretty much wayyy up in the Upper Leftmost Corner of my Welcome Sticky Post. It is nowhere near the TEXT part of the Sticky Post. So, it's progress.
Probably if you could show me how to move the Gradient Scheme Down and to the Right ... I could swap the Text to the Left side of my Post and the Pic to the Right. I could probably make it work that way. Would it involve using the Padding Attribute in the Code?
David # 28. August 2008, 15:57
To move the background you use the following:
Negative values for the POS_...px are valid. Good luck.
Suntana # 28. August 2008, 18:48
THANKS!
-( + )- # 28. August 2008, 23:14
Suntana # 28. August 2008, 23:39
I just haven't found the right Online CSS Tutorial with a fool-proof, can't miss style of teaching the concepts. I have several Tutorials bookmarked. They all have areas that are OK, but ultimately they eventually leave me hanging.
David # 29. August 2008, 07:04
It's more likely that you'll be successful, when you're just playing around with a "dummy page", where you know all the details of the HTML code without looking at the source.
The 3 Basics:
Rule 1:
"#" stands in front of an ID and has to be unique in your source:CSS:
#firstname { color: red; }Rule 2:
"." stands for classes. You can use those several times and even stack them:CSS:
.text-bold { font-weight: bold; }.box { border: 1px solid grey; }
Rule 3:
You can create a global rule when not using any "." or "#":
CSS:
body { background: white; }Suntana # 29. August 2008, 14:05
A lot of things puzzle me and I've got a lot to learn, but I'm really curious about one thing. Where exactly is it that you find out where the actual NAMES of the different areas of the webpage are? You know ... like you found out the Stick Post was "stickypost." Then there are all the different areas on the Side Bar and stuff. Is there an Opera File in which you look and find these NAMES of the areas?
By the way, sorry that in my 1st Comment in this Post, I addressed my inquiry at Mugs. I got confused.
-( + )- # 29. August 2008, 14:31
For Opera you can use Dragonfly
One question: My tip doesn't work? Is your problem still there? My english is crap and I don't understand all of your comment.
David # 29. August 2008, 15:10
You just activate the tool, move your mouse cursor above the item you want to know something about, click it and can read (and edit!) its style.
I wasn't aware that the english version of selfhtml got discontinued, sorry for that. It's the most important reference for me when I'm unsure about CSS definitions.
Suntana # 29. August 2008, 15:27
Okay, on your Picture above of my Sticky Post, you have a Light Blue Foreground on FRONT of the whole Page. What I am looking for is the incorporating of a Background in BACK of just the Text area ... while NOT affecting the Picture of Bugs Bunny.
Right now I have the project on HOLD while I learn some more. So right now there is NO Background there on my Welcome Sticky Post. It's just plain.
But, THANKS for trying to help, Dasch.
-( + )- # 29. August 2008, 15:48
#firstpost .content {background:transparent url(http://files.myopera.com/Suntana/blog/BugsBunny.jpg) no-repeat top left;)#firstpost .content {background:transparent url(http://files.myopera.com/Suntana/blog/BugsBunny.jpg) no-repeat top left;float:left;)Suntana # 29. August 2008, 16:23
So I would just have to add that ONE Line to my CSS area? A while ago you scared me.
I will let you know later on in the day ... well, you'll be able to read here how things went. But, it's looking promising.
-( + )- # 29. August 2008, 16:29
David # 29. August 2008, 16:41
I think you got him, Dasch!
Suntana # 29. August 2008, 19:49
Whew! It didn't want to work, didn't want to cooperate at first. I first redid some of the HTML Code in the Post because I knew the Font Color was going to have to be changed to predominantly WHITE ... All Fonts would be BOLDED and a couple of Highlights added. I even thought I'd be all brilliant
I couldn't see anything wrong in the HTML Code, but I went ahead and got rid of the basefont Tag and coded the Fonts the longer Non-streamlined way. I tried out the Code again. Again --- It DIDN'T Work!
Finally I noticed that pretty much most of the Quotation Marks used in the Code, were this weird type of Quotation Marks that get put in when I Copy & Paste Code onto a Microsoft Word Document. I was desperate, so, I manually changed all of those Quotation Marks to the proper type of Quotation Marks in hopes that that would make a difference. That did the Trick!
Thanks a LOT, Dasche ... David!
Y'all are Geniuses.
Much appreciated.
-( + )- # 29. August 2008, 20:03
Have fun with your blog and the MyOpera community.
-( + )- # 29. August 2008, 20:21
GIF version, is much smaller (32KB):
PNG version, is much bigger (140KB):
Suntana # 29. August 2008, 20:34
A couple of the Pics I use in my Blog are PNG. Like my Banner. JPEG just didn't cut it for my Banner because it wouldn't recreate the Brick Wall with good detail, so I was forced to go with PNG there. The Wood Paneling Background is JPEG.
I might even experiment with some other Color Gradient Background Schemes there in my Sticky Post. I get them from the Microsoft Word Fill Effects function.
Suntana # 29. August 2008, 20:38
-( + )- # 29. August 2008, 21:28
Yes. That's why I asked you. It looks a bit better, I guess. I can try to make the GIF Bunny a little bit better over the weekend. I made that one above very fast with Apples Preview application.
David # 29. August 2008, 22:34
-( + )- # 29. August 2008, 22:47
-( + )- # 29. August 2008, 23:40
GIF 20KB
PNG 27KB
Edit: Hmm. The edges of both are looking different (ugly) as of my computer. Suntana, say something!
David # 30. August 2008, 03:35
with 15,6kB.
Just beat it, beat it, beat it, beat it
No one wants to be defeated
Showin' how funky and strong is your fight
It doesn't matter who's wrong or right...
(Happy belated birthday Jacko...)
Suntana # 30. August 2008, 05:44
Ehhh, it's that the Pic was rough to begin with, so there's only so much miracle working that you two can do on it. If you check my Blog, you'll see that I went with this Yosemite Sam Wallpaper Pic. It has a Blue-ish Background that goes well with the Black / Blue Color Background scheme that I have going. This way I don't have to worry about transparency of the Pic. I also changed the Background scheme from a 3-Colored one to just Black & Blue. I ended up not really liking the purple at the bottom.
Hey, I have a question. Is Firefox supposed to be able to interpret the HTML color Tag ... the one where one uses the 6 Digit Hexadecimal Color Code? The Light Blue "Welcome" at the Top of my Sticky Post USED to be coded with a Hex Color Code. I went and for the first time tried out my Blog on Firefox 2.0. To my surprise, Firefox didn't want to display that Light Blue "Welcome." Everything else was intact and displaying properly. Opera of course interprets the Hex Color Code just fine. So, I switched from using a Hex Color Code on that Light Blue "Welcome" and just plain ole assigned it the Sky Blue Color. This time Firefox did acknowledge the Sky Blue "Welcome."
Yeah, David, those were the years when Michael Jackson was a Human Being ... instead of a Freakin' Mannequin.
By the way, Dasche ... David, to thank you 2 for your HUGE help, I acknowledged you 2 on my Welcome Page, along with the other Opera Community Members who have helped me out with CSS Code, Tips, Fixes, Answers and what have you.
Tamil # 30. August 2008, 08:34
-( + )- # 30. August 2008, 20:08
Suntana # 30. August 2008, 22:06
Anyway, Dasch ... Emergency - EMERGENCY!
A problem arose. Just when I thought everything was perfect, a problem popped up.
Okay, I have my Blog set up for 5 Posts per Page.
Today I put up my 6th Post. That means that for the first time, I have a Page 2 of Posts on my Blog. So, I went to check Page 2. I immediately saw that the lone Post on Page 2 has also acquired the Black / Blue Background that my Welcome Sticky Post on Page 1 has.
Do you have a FIX for this? Do you think if the firstpost Tag was swtiched to stickypost ... it would work and ONLY the Sticky Post would have the Black / Blue Background from now on, instead of the First Post of EVERY Page?
-( + )- # 30. August 2008, 22:21
Try this:
#firstpost .post stickypost .content {background:transparent url(http://files.myopera.com/Suntana/blog/BugsBunny.jpg) no-repeat top left;float:left;)And for the Bugs Bunny you can try my GIF if you want:
http://files.myopera.com/Dasch/kommentare/BugsBunny4.gif
I think it looks ok on a dark background.
Suntana # 30. August 2008, 22:43
I'll keep your Bugs Bunny GIF in my PowerPoint Folder. If I don't use it here on my Blog, I'm bound to eventually use it on some PowerPoint creation.
Suntana # 30. August 2008, 23:02
I hope though ....... that if I use the Bugs GIF in my Post, it doesn't show up with a Black Background behind it. The 1st Transparent Bugs Bunny that you had posted, it was totally transparent on PowerPoint, but on my Blog Welcome Post, it showed up with a Black Background. Odd.
Like I said, I'll nevertheless keep it in my arsenal of Pics. It WILL eventually come in handy. As a matter of fact, a while back, I was going to make a PowerPoint Slide Show for this Cyber Buddy-ette and I was going to feature a Looney Tunes theme. I had previously made her another Slide Show of her dogs and she loved it. She was going to send me more Pics to make her another Slide Show, but hasn't gotten back to me. I have the project started ... with Tweety Bird flying into the Pic.
-( + )- # 30. August 2008, 23:25
.{post stickypost} #firstpost .content {background:transparent url(http://path/to/the/background.png) no-repeat top left;float:left;}I guess that Bugs Bunny GIF loses a little of its quality when you make it smaller. But try and error.
Suntana # 30. August 2008, 23:46
I don't know about these things, but I THINK the key might end up being in somehow removing that ***#firstpost*** part of the Code. I think THAT is what is causing the 1st Post of EVERY Page to display the Black / Blue Background.
I think somehow, the Code has to include ONLY the stickypost part of it, while leaving out the #firstpost part. But, I could be wrong. What do I know?
-( + )- # 31. August 2008, 00:00
You can remove the "#firstpost" but then all stickyposts get that background.
Next try:
.{post stickypost #firstpost} .content {background:transparent url(http://path/to/the/background.png) no-repeat top left;float:left;}Here is the problem, if you make another stickypost then this gets the background because it is the firstpost. You must delete your welcome post and make a new welcome post after you make another stickypost. Complicated?
-( + )- # 31. August 2008, 00:03
Suntana # 31. August 2008, 00:17
So, if you can come up with some Code where you can remove the #firstpost and have it work with ONLY the stickpost, that would be GREAT!
Like I said, I don't see myself having a need for MORE Sticky Posts. I don't want to flood the beginning of my Blog with a Buffet of Sticky Posts.
Don't stress yourself out too much over this problem, Dasche. It doesn't have to be fixed today. I don't want you spending all your time on this if you've got other things to do. If it is late over there in Germany ... heck, go ahead and get some sleep. If this doesn't get fixed, Ehhh, I can always have it like it was before, with the White Background. It won't be a global crisis. I really appreciate your time and effort that you've spent though.
-( + )- # 31. August 2008, 00:22
.post.stickypost .content {background:transparent url(http://path/to/the/background.png) no-repeat top left;float:left;}But not with IE6 I guess and every stickypost gets that background.
Why is there a whitespace in a class definition?