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

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

March 30, 2010 By

(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?
Filed Under: Extending WordPress Tagged With: , , , , , ,

Practical WordPress Tip #4: Use inline styling for testing CSS

August 31, 2009 By

(Reading time: 2 – 3 minutes)

Great website design results in return visitors.

Problem: Making small changes to the design of a web page sometimes results in large effects.

Practical WordPress Tip: Test small style changes in your website design using inline styling before hacking your CSS file.

Here’s how to override the styles you’re interested inline:

  1. Here’s an example inline style which colors text within a paragraph red: <p style="color: red;">. Colors are easy. Experiment with borders, padding and margins for more challenge.
  2. Once your inline style is correct then create a class in your style file with those atttibutes. For example: 
    1
2
3

    p.redtext {
   color: red;
}

    Make sure to back up your CSS stylesheet before you make modifications.

  3. Then replace the inline style: <p class="redtext">.
  4. If it doesn’t work, check your spelling, try again. Spelling is a very common cause of blunders.
  5. If it still doesn’t work, check how the style sheets are being loaded.
  6. Then check how the selectors are being used. For example, Thesis theme for WordPress requires a .custom class when you modify the CSS in a custom style sheet.

Why: When you’re operating on a running site, and I know that’s what you do because I do it too, it’s a little like doing open heart surgery with the whole family in the audience. If you mess it up, your site goes into cardiac arrest, publicly. Using inlines to handle small style tests reduces the risk to your website. If you are going to make major changes, you should install a local working environment and rebuild your CSS first, then deploy.

Previous Practical WordPress Tip: Practical WordPress Tip #3: Keep A Few Spare Posts Handy

Next Practical WordPress Tip: Practical WordPress Tip #5: Keep rough drafts ready to publish at any time

Do you have a Tip? Would you like to write a Practical WordPress Tip? Each Tip is very short, and focuses on a single action that anyone can use right away, no programming required! If you have a Tip that fits into this series, and you’d like to publish it here on Website In A Weekend, send it on!

Filed Under: Extending WordPress Tagged With: ,
« Older Posts