In the time that I've been around here, I've heard from many people that they would like to know more about HTML/CSS so they can do things on their own. The problem is that the learning curve, especially in the beginning can be quite steep.

I believe it's important to understand the basics of HTML/CSS in order to go play and experiment with it.

With that in mind, I have written a document that is edited by our very own DavidTO, who did a heck of a job, I think.

The result is [FONT=Verdana]CSS Customizing SmugMug Simplified — Your Guide to a Stylin' SmugMug Site[/FONT], an easy to read, easy to understand guide to customizing your Power or Pro account.

It's not a list of recipes for questions such as 'how do I remove a breadcrumb', although after reading it, you should be able to do that yourself. The intent is to teach you how to fish, instead of giving you a fish. (As always, fish are being handed out all the time in the SmugMug Customization Forum. If you want fish, go there.)

There are 2 sections.

• Explanations and examples on HTML, CSS and how to use it with your SmugMug site.
• A reference, which lists all of the CSS properties and values, information about colors and more. There is even a cheatsheet that you can print out, and use. This is not specific for basic customization and can be used by anyone.

The contents of the first part is at this point very basic. HTML and CSS is explained, and basic examples are given. More chapters will be added, until it becomes one big SmugMug/CSS manual hopefully, from basic to very advanced.


It has its own page on the wiki, here.
You can also download it directly, here. It is a PDF file, so you can print it if you like.


It's been read by several proof-readers (some CSS knowledge and some virtually without any). I think that we have now a document that is very easy to read, and understand. Please let me know of any thing that you feel is not clear, errors, or suggestions. If you have suggestions for future chapters/explanations, please list them in this thread, Thanks!

• Version 1 - March 6, 2007
• Version 1.1 - July 15, 2007

Thanks DavidTO and Ivar, nice job!

WOW - 50 PAGES. You'll didn't just write a Guide, you've written a book.
I've printed, punched and placed it in it's very own 3 ring binder. Read the first few pages and allready things are starting to 'click' Love your examples! Gotta get back to work for now but I feel like a kid in a candy store who can hardly wait to reach in the bowl after supper. Just wanted to say thank you.

Originally Posted by Cindy WOW - 50 PAGES. You'll didn't just write a Guide, you've written a book. I've printed, punched and placed it in it's very own 3 ring binder. Read the first few pages and allready things are starting to 'click' Love your examples! Gotta get back to work for now but I feel like a kid in a candy store who can hardly wait to reach in the bowl after supper. Just wanted to say thank you.

Glad it's helping. I know that I learned a LOT from Ivar about HTML and CSS as we were working on this document. It was interesting, as we got down into the details of wording certain phrases. I wouldn't be clear, and I'd suggest a new wording, and he'd say "but that isn't true," and I'd be all confused, because it seemed like I was saying exactly the same thing, but clearer. This book is a work of compromise (in the best sense of the term--maybe teamwork is a better word), that's for sure!

There's a lot more to come, too, and yes, it'll be a book by the time we're through.

Please: give us feedback , too!

Hi - I was able to read through a portion of the document last night - good job !!!

- jr

Originally Posted by jerryr Hi - I was able to read through a portion of the document last night - good job !!! - jr

Thanks Jerry! Glad to hear that the time we put in it didn't go to waste

The appendix information is a great resource - the last page is an excellent 'cheat sheet' so to speak...
Also, LOVE the links to the color charts
Here is another resource on font styles I like to refer to :

http://www.codestyle.org/css/font-fa...dResults.shtml

I am assuming the site is updated with the 'most popular' fonts for Windows and Mac every now and then....

keep up the good work - jr

Hey guys,

You did a great job on this resource. I just read the entire document and actually understood the majority of the information thanks to the examples! Well written and very informative.

I agree with the above post about the appendix info...great to have in one spot. This really helped me to understand the bits and pieces of code I have been working with...now I am ready to clean up everything and try more on my own...but don't go too far DGrinners

Thanks!!

Jen

Just finished reading the whole thing. Simply awesome material in there.

My favorite part was when you talked about finding errors by process of elimination and the WebDev tool. I used it for a problem I was having and it took me only a few minutes to find the code that needed to be changed. Sweet.

Thanks so much.

Printed.
Firefox installed.
Away I go.

Thanks sooo much, Ivar and David

Feedback to this question, if you can please:
http://www.dgrin.com/showthread.php?t=56004

ann

Edit: Well, in only a few brief hours, I've accomplished this bit: a custom header, and a copyright notice. Now, I need to figure out the banner/buttons and whether I want a slideshow or something else.

https://canadian-ann.smugmug.com/

I have been struggling with the great tutorials that already exist, because I cannot do things without knowing why...this is perfect. The other perfect thing of it is having it printed.

Waaaaayyyyyy cooooool!!!

Wow. This is wonderful. I love that it is SmugMug specific. Now I can put aside Elisabeth and Eric Freeman's book, Headfirst HTML with CSS and XHTML (which is pretty good, btw), and concentrate on improving my SmugMug site. Thank you, thank you, thank you!!


Virginia

Originally Posted by jerryr The appendix information is a great resource - the last page is an excellent 'cheat sheet' so to speak... Also, LOVE the links to the color charts Here is another resource on font styles I like to refer to : http://www.codestyle.org/css/font-fa...dResults.shtml I am assuming the site is updated with the 'most popular' fonts for Windows and Mac every now and then.... keep up the good work - jr

Hi Jerry, Thanks for the compliment. I'll take a look at the link you gave me. If you're missing anything else, feel free to let me know

Originally Posted by gilbert Hey guys, You did a great job on this resource. I just read the entire document and actually understood the majority of the information thanks to the examples! Well written and very informative. I agree with the above post about the appendix info...great to have in one spot. This really helped me to understand the bits and pieces of code I have been working with...now I am ready to clean up everything and try more on my own...but don't go too far DGrinners Thanks!! Jen

You're welcome! I'm glad this thing is useful how I intended it to be.

Thanks!

Originally Posted by Oakley Just finished reading the whole thing. Simply awesome material in there. My favorite part was when you talked about finding errors by process of elimination and the WebDev tool. I used it for a problem I was having and it took me only a few minutes to find the code that needed to be changed. Sweet. Thanks so much.

Thanks Ryan,

Finding errors can be quite simple as long as you have some sort of plan, like I described there. Glad it helped

Originally Posted by Ann McRae Printed. Firefox installed. Away I go. Thanks sooo much, Ivar and David

On behalf of both, you're welcome

Originally Posted by Ann McRae I have been struggling with the great tutorials that already exist, because I cannot do things without knowing why...this is perfect. The other perfect thing of it is having it printed. Waaaaayyyyyy cooooool!!!

I think its very important to have a bit of a base-understanding of CSS/HTML, it just makes things so much easier I find.

I specifically wanted to do a PDF as well, so it could be printed. I like having everything digitally, but reading, and studying, i still prefer it to be on paper. It also makes it easier, since that way you can have the document in plain sight, and your browser as well, without have to switch between them.

Originally Posted by Flyinggina Wow. This is wonderful. I love that it is SmugMug specific. Now I can put aside Elisabeth and Eric Freeman's book, Headfirst HTML with CSS and XHTML (which is pretty good, btw), and concentrate on improving my SmugMug site. Thank you, thank you, thank you!! Virginia

You're welcome Let me know if you find anything that you think should be changed or added

This is soo awesome. Being new to this whole html stuff and setting up a page, Im sure I will put this tutorial to good use. Thank you for taking the time to create it.

I'm glad you all like it so much.

I want to share something with y'all that I hope you pass on.

The reason that I brought this up to Ivar (we had both had the same idea independently), is because of the experience I had in building my site. I got so much help from people, who went really far out of their way to help me realize my vision (twice, mind you, since I've customized my site 2x so far), that I knew that I had to "pay it forward." The people who helped me wouldn't accept payment, and really just did it out of a sense of generosity and helpfulness. So that's the same spirit that I brought to this document.

Anyway, I mention it in the hopes that all who read this continue to pay it forward, and to help the next person who comes along asking for help.

Thanks to both ivar and TO on this manual.
I've managed allot of projects involving js, but never got into the code since the initial learning curve is so steep.
This manual really helps bridge the gap so I can get the site I really want!

At the risk of sounding cliche. Sites like this make the web a better place

Cheers and happy easter!

-Jon

I read this document today, and I think it should be renamed "the lightbulb..." As in the one that will go on over your head when you read this.

Wow... very well done, well organized, inofrmative, and user friendly. I know it didn't make me a CSS expert, but at least it helped me understand the concepts and terms. The examples are excellent, and it's the kind of resource that seems capable of leading one to a much higher level of expertise and understanding when used in conjuction with practice.

Thanks again... nice job indeed!