Monday, November 7, 2011

Notes from a WordPress newbie

So my day job involves a lot of .NET and SQL, and I've worked with dozens of programming languages and software packages during my career, but I've never done anything with WordPress. Thanks to a volunteer project for the Youth Orchestra of Essex County, that's about to change. I've been asked to maintain some content on their website, which uses WordPress.

One problem I noticed was with the menu at the top of the site. It worked fine in Chrome, but in Internet Explorer 9, when I hovered the mouse over a menu tab, and the submenu was displayed, a small vertical gap appeared between menu and submenu. When passing the mouse over this gap to try to select a submenu item, the submenu disappeared. Very annoying!

I posted this problem to the WordPress forum, and got a response within hours. (Thanks, vtxyzzy!) The response said:
Try adding this to the end of style.css:
ul.children { top: 24px !important }


So I had to figure out how do to that, having never used WordPress before. Here's what I did...

  • Log in to the admin page for yoec.org, yoec.org/wp-admin.
  • There's a menu of links on the left. One of them is Appearance. I clicked that. and it expanded.
  • This displayed a menu of links related to Themes. One link was Editor. I clicked that.
  • This displayed a text editor pane in the middle of the screen, and a list of files on the right.
  • I scrolled through the list of files, found a category labeled Styles, and under that, a file labeled Stylesheet (style.css).
  • I clicked that filename, and the file was displayed in the text editor pane.
  • I scrolled through the (rather long) text of style.css until I reached the bottom.
  • I appended the recommended line, ul.children { top: 24px !important }.
  • I saved my changes by clicking the Update File button at the bottom of the page.
  • I viewed the website in IE9, and the problem was gone!
I will probably have more to say about WordPress, from a total noob perspective, in a future post.

No comments:

Post a Comment