Need a WordPress website this weekend? Start here...

DIY WordPress: Super Easy Custom CSS for Menus (Huge pic)

(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

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:

  1. Firebug is your friend, open it up to find the correct CSS elements.
  2. Once you have the rule as shown by the hierarchy in Firefox, write it out in your CSS file.
  3. 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?

Comments

  1. Dave Doolin says:

    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.

  2. Ralph says:

    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 =-.

  3. Ralph says:

    So who did you intend this for?
    .-= Ralph´s last blog ..Shameless plug for Cantankerous Old Coots =-.

    • Dave Doolin says:

      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.

  4. Ralph says:

    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 =-.

    • Dave Doolin says:

      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.

  5. Heather says:

    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 =-.

  6. 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? =-.

  7. 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…

    • Dave Doolin says:

      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!

  8. Chris Owen says:

    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

Trackbacks

  1. [...] bar (the shiny thing where all your links hang out). Dave Doolin of Website in a Weekend has an excellent tutorial on customizing the CSS for any WordPress navigation (and helpful graphics to boot!). He’s using Thesis 1.5 on his end but the theory is the same, [...]