• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization CSS (Customizing SmugMug Simplified)

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Page 1  of  5
1 2 3 4 5
Old Feb-24-2007, 12:40 PM
#1
ivar is offline ivar OP
I'd be happy with a cookie
ivar's Avatar
CSS (Customizing SmugMug Simplified)
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
__________________
Ivar
www.ivarborst.nl & smugmug
Old Mar-06-2007, 09:37 AM
#2
Andy is offline Andy
Bicameral
Andy's Avatar


Thanks DavidTO and Ivar, nice job!
Old Mar-06-2007, 12:41 PM
#3
Cindy is offline Cindy
Major grins
Cindy's Avatar
Absolutly Awesome
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.
__________________
Cindy Colbert (Utterback) Wishing You Co-Bear Love, Hugs & Laughter!!!
Follow Along: Co-Bear Photography Website Facebook Twitter
Old Mar-06-2007, 12:47 PM
#4
DavidTO is offline DavidTO
Mod Emeritus
DavidTO's Avatar
Quote:
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!
__________________
Moderator Emeritus
Dgrin FAQ | Me | Workshops
Old Mar-07-2007, 07:09 PM
#5
jerryr is offline jerryr
Smugmug Customization
jerryr's Avatar
Hi - I was able to read through a portion of the document last night - good job !!!

- jr
__________________

Old Mar-08-2007, 03:09 AM
#6
ivar is offline ivar OP
I'd be happy with a cookie
ivar's Avatar
Quote:
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
__________________
Ivar
www.ivarborst.nl & smugmug
Old Mar-09-2007, 02:24 AM
#7
jerryr is offline jerryr
Smugmug Customization
jerryr's Avatar
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
__________________

Old Mar-09-2007, 10:26 AM
#8
gilbert is offline gilbert
Major grins
Good job!
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
__________________
Still working on it!
Old Mar-09-2007, 10:01 PM
#9
Oakley is offline Oakley
ThePupil.ca
Oakley's Avatar
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.
__________________
Ryan Oakley - www.ryanoakleyphotography.ca [My smugmug site]
www.photographyontheside.com [My blog about creating a part-time photography business]
Create A Gorgeous Photography Website with Smugmug in 90 Minutes [My free course if you need help setting up and customizing your SmugMug site]
Old Mar-10-2007, 01:23 PM
#10
Ann McRae is offline Ann McRae
SmugMug BizDev|Educator
Ann McRae's Avatar


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!!!

Last edited by Ann McRae; Mar-10-2007 at 03:43 PM.
Old Mar-14-2007, 04:50 PM
#11
Flyinggina is offline Flyinggina
To see and not be seen
Flyinggina's Avatar
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
__________________
_______________________________________________
"A photograph is a secret about a secret. The more it tells you, the less you know." Diane Arbus

Email
Old Mar-15-2007, 06:42 AM
#12
ivar is offline ivar OP
I'd be happy with a cookie
ivar's Avatar
Quote:
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
__________________
Ivar
www.ivarborst.nl & smugmug
Old Mar-15-2007, 06:43 AM
#13
ivar is offline ivar OP
I'd be happy with a cookie
ivar's Avatar
Quote:
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!
__________________
Ivar
www.ivarborst.nl & smugmug
Old Mar-15-2007, 06:44 AM
#14
ivar is offline ivar OP
I'd be happy with a cookie
ivar's Avatar
Quote:
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
__________________
Ivar
www.ivarborst.nl & smugmug
Old Mar-15-2007, 06:47 AM
#15
ivar is offline ivar OP
I'd be happy with a cookie
ivar's Avatar
Quote:
Originally Posted by Ann McRae


Printed.
Firefox installed.
Away I go.

Thanks sooo much, Ivar and David
On behalf of both, you're welcome

Quote:
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.
__________________
Ivar
www.ivarborst.nl & smugmug
Old Mar-15-2007, 06:48 AM
#16
ivar is offline ivar OP
I'd be happy with a cookie
ivar's Avatar
Quote:
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
__________________
Ivar
www.ivarborst.nl & smugmug
Old Apr-05-2007, 01:43 PM
#17
Chiller is offline Chiller
Big grins
Chiller's Avatar
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.
Old Apr-05-2007, 01:49 PM
#18
DavidTO is offline DavidTO
Mod Emeritus
DavidTO's Avatar
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.
__________________
Moderator Emeritus
Dgrin FAQ | Me | Workshops
Old Apr-08-2007, 11:19 AM
#19
SloYerRoll is offline SloYerRoll
Major grins
SloYerRoll's Avatar
Talking To add to the accolades
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
__________________


Last edited by SloYerRoll; Apr-08-2007 at 11:33 AM.
Old Apr-18-2007, 11:58 AM
#20
sskoutas is offline sskoutas
could-be-thinner grinner
sskoutas's Avatar
"the Lightbulb"
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!
__________________
__________________
Stephen Skoutas
http://stephenskoutas.com
sskoutas@gmail.com Certe, toto, sentio nos in kansate non iam adesse

Please feel free to retouch and repost my images. Critique, Suggestions, and Technique tips always welcomed.
Page 1  of  5
1 2 3 4 5
Tell The World!  

Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump