(Reading time: 2 – 3 minutes)
Everybody loves screenshots… especially accurate screenshots! A few good screenshots can really save you some time when you’re learning anything on a computer.
The problem is when it’s hard to track of everything. When I’m working, I have everything open together, so I can see the entire task all at once. Screenshots aren’t so good at seeing the entire task.
Screencasts and videos can work well, but suffer from the same linear, can’t-see-it-all-at-once, just like screenshots.
So, take the next step: The Visual, All-In-One Guide Illustrating Easy CSS Menu Items.
1000 pixels wide. You will need to click through to see it in all its true glory.
Making the CSS menu was easier than making the visual guide!
Warning: you will have to study this picture like a map. Find the steps 1, 2 and 3 first. These will be keyed to the explanation following the picture.
Custom CSS menu for splash screen, click to get full size.
Ok, it’s a little busy I admit.
Here’s how to read it. First thing, find the three steps. Step 1 is roughly 4 o’clock in the picture, with Step 2 at 3 o’clock, and step 3 at 11 o’clock. In other words, start from the bottom, proceed widdershins.
By steps:
- Firebug is your friend, open it up to find the correct CSS elements.
- Once you have the rule as shown by the hierarchy in Firefox, write it out in your CSS file.
- Reload your CSS file and test.
That’s all there is to it.
A few minutes work… once you have done it a few times.
If you haven’t ever changed your css, use this as a nice little exercise. I’d budget 2-3 hours for it as well. You want to relax and have fun and learn, and not get all in a swivet when you break something. (And you will break something)
Over to you
Here’s a couple of questions for you:
- What kind of work do you do that could be explained in an All-In-One visual map?
- In your opinion, how could this picture map be improved?
I need to add more explanation to this, like how the colors reverse, but it’s Zero Dark Thirty in The City By The Bay and it’s time to Call It A Day.
Dave,
I just read this post and am completely bewildered. I don’t know what you are talking about, how you would use whatever it is, where is the explanation to follow steps one, etc, Did I come in late to class?
.-= Ralph´s last blog ..Shameless plug for Cantankerous Old Coots =-.
Ralph, this is one of a series of “DIY WordPress” articles: http://website-in-a-weekend.net/tag/diy-wordpress/
Often, I follow very technical articles with much lighter fare which are stickier in the short term. This article won’t garner many comments today. It will collect comments and search traffic over the long term. It won’t be my most popular article, but it will be one of the more popular articles eventually.
I’ll have something a little more accessible for you tomorrow or the next day.
.-= Dave Doolin´s last blog ..How to WPTouch Your Way to a Mobile Friendly WordPress Blog =-.
Me too. In fact I read it twice… LOL… anyway, I’ll check out these DIY stuffs again once I’m already into WP.
.-= Cebu Tech Blogger´s last blog ..Best Alternative Commenting System for Blogger =-.
Ok, ok, this turned out to be a #graphics #fail.
Fine.
Expect to see a LOT more of these all-in-one picture maps.
#youvebeenwarned.
.-= Dave Doolin´s last blog ..The Starfish Principle – Trying counts as success =-.
So who did you intend this for?
.-= Ralph´s last blog ..Shameless plug for Cantankerous Old Coots =-.
Developers and DIY folks.
Ralph, I write for a narrow (WordPress) audience with a skill set ranging from, well, “zero,” to “hero.”
This is more along the lines of a “hero” article.
This is not a feel-good article. The article resulted from several hours work on related material. The graphic took around two hours to create (at least) and I had to do it over several times.
No one is expected to read this picture at a glance. To understand it, you have to study it. But everything you need for doing custom CSS rollovers is there, all-in-one. An hour’s work.
I’m not trying to feel good. I don’t dispute the value of the content. Just curious why or when it would be important for me to understand.
.-= Ralph´s last blog ..About Asking and Howard Roark =-.
Why: not yet.
When: when you’re digging into WordPress menu handling.
OTOH, the general notion of creating a “visual article” is very powerful. And hard, too.
I think I get it, not something I want to delve into at the moment though. Nice to know it’s here when I need it.
.-= Heather´s last blog ..Overload; Here’s Why You Stop Listening =-.
I hope your paying attention here… as I get thoroughly tooled… =)
I find it kinda interesting. :) You might want to make the sections more obvious next time and re-order them.. in fact… *steals image for a sec*
I’ll be back.
.-= Heather´s last blog ..Overload; Here’s Why You Stop Listening =-.
Probably not perfect, but check out the file in your email.
.-= Heather´s last blog ..Overload; Here’s Why You Stop Listening =-.
Things huge pics like this are not good for: People with vision impairments.
At the size I need to zoom the picture to comfortably read the text it’s approximately 8 screen-widths wide (this is on my 20″ monitor) and there’s so much scrolling in every direction that I keep getting lost. Also, text buried in pictures doesn’t wrap nicely like zoomed-in text usually does so instead of having a bunch of nice readable lines wrapped at about 40 characters, I have a bunch of lines all shooting off the right hand side of my screen :(
I know that we are a minority group, especially in terms of developers, but perhaps inaccessible learning materials are some of the reasons that more people with disabilities don’t get into developing?
Food for thought,
Ricky
.-= Ricky Buchanan´s last blog ..What Version Of iPhone OS Am I Running? =-.
#fail #fail #fail
Ok, this went over like a lead balloon, which makes me absolutely determined to get it right the next time. Or the time after that. Or whenever.
Prepare to be thoroughly used… as a consultant for the next effort. (Which I’m already planning.)
.-= Dave Doolin´s last blog ..5 Foundational Plugins, Critical Infrastructure for Your New WordPress Blog =-.
Accessibility consulting I can definitely do.
Keep trying!
r
.-= Ricky Buchanan´s last blog ..Ventrilo For Communication For The Chronically Ill =-.
I must agree, Firebug is a must have tool for me. Allows me to edit on the fly. Then if I like it save it! Saves so much time instead of editing, save, reload. Then having to repeat it all over again.
Not sure on the big picture either, might be been better with a few small ones but then again the big picture works too…
Yeah yeah… I know… the big picture bombed. I’m writing a bit about that right now, will publish on Saturday.
Just makes me determined to do another one. Better!
Personally I liked it. I can see where the confusion comes from though.
It gave me some ideas for my SEO tutorials. I usually use something like bubbl to make charts, but I like how you charted it on a web page. Of course, I will have to map SEO inside the code view, so mine may be more confusing than yours. lol
Chris Owen´s last post ..The Traffic Cipher Report