David - Looking for CSS lessons?

Looking for CSS lessons?

Wednesday, October 21, 2009 7:56:40 AM

I can't help it, but for a few days now people come to my blog with questions about modifying their blog. I can help most of them (in some cases I even write some code for them), but all in all I think I should start a small beginners guide, including the latest features of MyOpera.

I'm no CSS wizard, but I can handle CSS pretty well in most cases, so I'm often not aware of problems you can stumble upon. But I'm willing to write a small "1 CSS lesson per week" here if people are interested. I think we should start with the most basic stuff, then learn about the basic attributes and end up in creating our own themes. If you have any other suggestions... this is your place to go.

See the full post for the list of lessons...

Until I have replacements I'll list the old lessons here. Beware that those often require a certain level of understanding:

Lessons
CSSing your my.opera site - the basic usage
CSSing your my.opera-site - part 1
CSSing your my.opera-site - part 2
CSSing your my.opera-site - part 3
CSSing your my.opera-site - part 4
CSSing your my.opera-site - part 5
CSSing your my.opera-site - part 6

Specials
CSSing gone wild - styled select boxes
CSSing gone wild - a cube full of borders

Skins
DragonAge skin
Mass Effect 2 skin
The Polaroid & Passion skin
cooking with style(s)

The new lessons
The backpacker's guide to CSS - lesson 1: HTML basics
The backpacker's guide to CSS - lesson 2: CSS basics
The backpacker's guide to CSS - lesson 3: Create your own skin

CSSing gone wild - a cube full of bordersThe backpacker's guide to CSS - lesson 1: HTML basics

Comments

1 2 Next »

Lorenzolor74cas # Wednesday, October 21, 2009 8:56:32 AM

Thank you!

Daneru Yuu Jindaneru # Wednesday, October 21, 2009 2:32:48 PM

this are great tutorials... thanks!

KimberlySqueakeyCat # Thursday, October 22, 2009 1:43:30 AM

thanks a lot

Suntana # Monday, December 14, 2009 6:04:10 PM

Heyyyyy, David! Wooooooo, I hadn't been here in a while. The last time I was here, you had that awesome Chocolate Babe up in your various Headers.

I've been pretty busy myself helping other Opera Community Members with snazzing up their Blog Themes. More recently I've been working on Christmas Blogs.

Anyway, yeah, I'm always on the lookout for New CSS Code, Tricks & Treats.

And now that I see you have a series of CSS Tutorials, I'll be sending my friend Maryam over here. She's pretty sharp with Photoshop, but has been wanting to learn some CSS to go hand in hand with that. So, I'm sure she'll be delighted to learn whatever you have in your tutorials.

I'll be looking at them myself. You're bound to have something new since I as here last.

Sami Serolaserola # Monday, December 21, 2009 11:39:31 AM

Good job, I like this. However, there's currently some layout issues on your blog. Pages look like this.

Matt AKA Ironicsupermathew # Monday, December 21, 2009 8:55:54 PM

Is awesome what you do, i also know about css but not as much as you, i really need a teacher! to teach me all about this plz.

Suntana # Monday, December 21, 2009 9:00:02 PM

Oh, yeah. That's right. I saw that too. Like there is a glitch, some unstableness to the CSS Code.

jude amajudoski # Monday, December 21, 2009 9:16:34 PM

this is a nice thread, though i don't know much about css, can someone expantiate all about it for me.
Thanks

Matt AKA Ironicsupermathew # Monday, December 21, 2009 9:22:13 PM

Their really isn't that hard but you do need to study it good.

jude amajudoski # Monday, December 21, 2009 9:41:10 PM

what's it all about please.

Matt AKA Ironicsupermathew # Monday, December 21, 2009 9:43:24 PM

Is Basacly code's that make a website or blog's. CSS mean's custume style sheet's

jude amajudoski # Tuesday, December 22, 2009 6:50:23 AM

okay thanks.

Suntana # Tuesday, December 22, 2009 3:25:05 PM

Actually, CSS stands for Cascading Style Sheets.

Jude, if you check into the links that David Schalandra put in this Post, you should be able to get an idea of what CSS is about.

In a nutshell, CSS (Cascading Style Sheets) is just as it says ... Style Sheets created by Code, which go on top of one another so as to change the LOOK and configuration of your Blog Page. Basically, you're using Skins. For example, David's Header up there ... there is actually still an Opera Header under there. Likewise, there is also an Opera Theme under this custom theme that David created with the Style Sheets. It's just that these Cascading Style Sheets have been superimposed on top of that Opera Theme / Header below the surface.

Matt AKA Ironicsupermathew # Tuesday, December 22, 2009 6:41:14 PM

Yeah that! Sutana? did you get my message?

jude amajudoski # Tuesday, December 22, 2009 8:02:51 PM

okay thanks pals.

Matt AKA Ironicsupermathew # Tuesday, December 22, 2009 8:31:33 PM

No problem

glad we help'd.

Suntana # Tuesday, December 22, 2009 9:46:08 PM

Originally posted by supermathew:

Yeah that! Sutana? did you get my message?

Message? Are you talking to me?
You sent me a PM? When? There is no PM from you in my Inbox. Unless you sent it to my SuntanaLab account. I guess I'll go check over there.

Matt AKA Ironicsupermathew # Wednesday, December 23, 2009 1:39:14 AM

Suntana # Wednesday, December 23, 2009 2:14:41 AM

Nope! I have no PM from you in either my Suntana's Blog Trek or SuntanaLab Inboxes. At least certainly not from recent days. When did you send it and to where?

Matt AKA Ironicsupermathew # Wednesday, December 23, 2009 5:37:34 AM

idk i just send it to you well, anyway i want you..my friend to make me a header for my friend plz

Suntana # Wednesday, December 23, 2009 1:56:22 PM

Sure, I'll make that Header.
But, again ... I still don't know where you're sending your PMs to or what's going on because I still don't see any PM from you. If you sent me a PM after my last comment, it's NOT in my Inbox. I checked and you're NOT Blocked.

And if this Header that you want made is supposed to be a Christmas Header, well ... you better REALLY act FAST and make sure you really send me a PM with whatever details. Otherwise, it won't make it on time.

Matt AKA Ironicsupermathew # Wednesday, December 23, 2009 8:23:32 PM

ok sutana sure will.

DavidSchalandra # Thursday, December 24, 2009 1:32:04 PM

To all who want to learn CSS from scratch I recommend to read (and try yourself) the new lessons about HTML and CSS. I will definitely write more lessons in the future, just not right now, as I have too many appointments at the moment. Sorry.

If you're having trouble with the font (unable to read it), I must admit that it seems to me, that my.opera.com doesn't always deliver the font file I added to the current style and the fallback of Opera is obviously not really good.

Suntana # Thursday, December 24, 2009 10:50:52 PM

David, I think something ELSE funky is going on. I don't think it's simply a matter of Opera's default font not being an ideal one. The letters are getting jumbled / intertwined on top of each other ... PLUS the letters themselves are distorted. By any chance are you using those so-called Web Fonts? If so, I wonder if that's not part of the problem? Maybe there's some incompatibility there.

DavidSchalandra # Saturday, December 26, 2009 11:01:17 AM

I'm using a converted true type font, that works completely when loaded. Tbh I'm not really sure what happens here as the fallback font is Arial, but a mixture of Times and Courier gets used (something that I never defined... strange isn't it?). I think I will change the whole theme soon (already got an idea) and then I'll NOT use the font-face option again (or try it a different way).

Suntana # Saturday, December 26, 2009 4:53:00 PM

A converted true type font? A combination of Times and Courier?

You mean like stuff from The Matrix and the future?

Okay, we'll see what you come up with.

NominisExpers # Monday, December 28, 2009 6:36:12 AM

Where can I get a copy of that font?

ɥʇɐǝp ɟo ssǝɔuıɹdprincessofdeath # Thursday, December 31, 2009 9:29:44 AM

Hi! Thanks for the CSS tips and help!

Adetayor Adediranrashmanda # Saturday, January 2, 2010 11:07:03 AM

tell me what i can archieve from this.

Kasunsu EdgerEdgar11 # Saturday, January 2, 2010 12:15:01 PM

Now this is what i call a beautiful blog. congs

Musa kalim muhammadmyKalla # Sunday, January 3, 2010 8:30:20 PM

It is good to find someone ready to solve other peoples problems or needs.

Unregistered user # Monday, January 4, 2010 9:02:04 AM

Enzyte writes: I'm having a lot of trouble with using CSS to precisely determine placement of objects (text, pictures, containers, etc) in building a site. Enzyte

Dunia Berita Terkiniduniaberita # Wednesday, January 6, 2010 11:16:43 PM

Are these lessons free of charge?

ziare revisteziare # Monday, January 11, 2010 2:48:48 PM

Yes, they are free

DavidSchalandra # Tuesday, January 12, 2010 10:48:30 AM

Absolutely free. I wrote the lessons for my friends and mainly for the people here on MyOpera... but everybody can read the lessons.

Jawarijawarie # Thursday, January 14, 2010 5:52:17 AM

Thanks David, love this post

sangeet gopal kayasthalostay119 # Thursday, January 21, 2010 6:32:59 PM

like!!

sangeet gopal kayasthalostay119 # Thursday, January 21, 2010 6:33:11 PM

sangeet kayastha www.sangeet.com.np

DavidSchalandra # Thursday, January 21, 2010 8:15:23 PM

I really wonder if anybody is even reading the backpacker guides? There is not much use in writing those just for myself, as I already know how that stuff works.

Tom RondelloFrlmnk # Tuesday, January 26, 2010 9:50:20 PM

Just noticed this. I hope to be able to take advantage of your articles. Thanks!

Oxiel Contrerasoxiel # Monday, February 1, 2010 7:00:32 PM

Indeed, very useful, thank you.

Matt AKA Ironicsupermathew # Wednesday, February 3, 2010 1:06:17 AM

I love you background design! is really amazing. how did you do it?

nino rex gonioninorex # Wednesday, February 3, 2010 10:19:06 AM

how can i put themes to my profile?.. where should i put the codes..?...

DavidSchalandra # Wednesday, February 3, 2010 1:50:12 PM

Basically it's like written in the article CSSing your my.opera site - the basic usage

Opera changed it slightly, but it's still very easy to find.

Tom RondelloFrlmnk # Wednesday, February 3, 2010 7:26:06 PM

It's way easier than trying to see my phone bill.

Dacotah # Saturday, May 1, 2010 4:50:05 PM

Thank you for your great post.

Alexodius PrimeAleksOD # Thursday, August 5, 2010 1:12:59 PM

Wow, your blog theme is amazing! Thanks for your help with the design, I may require your help soon

mnmKillavad # Thursday, August 5, 2010 4:21:57 PM

DavidSchalandra # Friday, August 13, 2010 11:50:44 AM

It's not that complicated. The main style is located on the ID called "myo".

Some ideas would be:

completely transparent

#myo { 
	background-color: transparent;
	background-image: none;
}

a reduced opacity menu

#myo { 
	background-color: #000000;
	background-image: none;
	opacity: 0.75;
	filter: alpha(opacity=75); /*for IE*/
}

or a 32bit PNG with alpha channel

#myo { 
	background-color: transparent;
	background-image: url("PATH_TO_ALPHA_IMAGE/myo_bg.png") repeat;
}

I think I'd go for the last option and create a semi transparent PNG image.

Ulrich HoltzhausenKenSA # Saturday, August 14, 2010 1:58:12 AM

Wow, this is really very useful. I have not checked into it yet, but your blog looks awesome and I am usually not too crap with CSS myself but just don't know wooot is going on behind the scenes with my.opera as modifying tags with CSS has not really had significant results for me.

1 2 Next »

Showing comments 1 - 50 of 59.

Write a comment

New comments have been disabled for this post.

Blog search

Photos

Poll

What is the glass like?

I don't mind.
(13%)
There is no glas. (The Matrix)
(33%)
Can take 100% more content.
(8%)
Too big.
(5%)
Not filled properly.
(11%)
Half-empty.
(4%)
Only used with 50% efficiency.
(10%)
Half-full.
(15%)

Total: 157 votes

Demoscene parties

revision 2012 - the EasterParty
from the 6th to the 9th of April in Saarbrücken/Germany
Buenzli 19
from the 20th to the 22nd of August 2010 in Winterthur/Switzerland
Rewired 2010
from the 25th to the 27nd of June 2010 in Maaseik/Belgium
Breakpoint 2010
from the 2nd to the 5th of April 2010 in Bingen/Germany
X2010
a Commodore 64 party from the 1st to 3rd of October in Someren/The Netherlands
Evoke
from the 27th to the 29th of June 2010 in Cologne/Germany
the Ultimate Meeting 2010
from the 27th to the 29th of December 2010 in Karlsruhe-Durlach/Germany