Designing drop down menus with CSS on WordPress

I designed a WordPress site for my friend Andy at No Boundaries.org some months ago, and the final version that we settled on really pushed my personal boundaries of knowledge in terms of PHP and CSS to get some of the things to work that he was wishing for. Never wanting to let a good friend down, I got something to work that came up tonight at WordCamp Fraser Valley.

I’m not sure what the original question was, but my design for No Boundaries had custom drop down menus added to the header so that Andy could easily add and remove pages from where ever he was in the world and have them show up in those menus.

And to be honest, I can’t really tell you how I got it all to work because it was that long ago. However, Stu Nicholls made a great blog post about how to do this with simple CSS. I used this post to hack together my concept for Andy’s site, and the final design turned out to be what he wanted.

Now doing a quick Google search to find this resource again, I came across this WordPress plugin, WordPress CSS Drop-down Menu, that could do this for you without getting into all the code. I have no experience using it, but the author makes reference to the same blog post that I just did, so it might be worth checking out first before you get into the code.

Using CSS to attribute photos in your blog posts

Rebecca recently made a post about using the AddQuickTags plugin for WordPress to display captions on photos in her blog posts, I would elaborate on the CSS styling it takes to get this. The WordPress plugin makes this easier, but I thought it would be useful to share how you can do this with some simple CSS, especially if you don’t have WordPress at your disposal.

First, how do you get this…

John and Becks by duanestorey on Flickr
Photo credit: duane storey on Flickr

to work?

To start with, you need your image and then link it to its origin or creator to attribute credit to. This is just good practice and makes the original author happy. We’ll have to peak at some quick HTML to get a sense of what’s going on here because we don’t like using visual editors. Code might be tough to work with for some, but it’s second nature to us.

<a href="http://website.com"><img src="http://photosharingsite.com/photo/image.jpg" /></a>

Your HTML might look different, but the premise should be the same. It’s a linked image, but how do you get the “Photo by:” tag underneath the image? Let’s start by adding some code to your CSS.

.captioncentered {
display: block;
text-align: center; /*centers text & image*/
margin: 10px auto; /*centers the whole div*/
padding-bottom: 1px; /*this depends of your design*/
font-size: 0.85em;
color: #ccc;
}

This will make like somewhat simple for you in the long run because this will set the design of your blog to work for all posts you use this styling for. So now what do you do with it?

You just setup a “class” to use in the “div” tag. It works like this.

<div class="captioncentered"><a href="http://website.com"><img src="http://photosharingsite.com/photo/image.jpg" /></a></div>

That centers the image, so now you need to add a little more HTML to this in order to get the credit where it deserves to be. This just requires some text and then linking the words you want linked. However, this extra text must be inside the div tags in order for this to work!

<div class="captioncentered"><a href="http://website.com"><img src="http://photosharingsite.com/photo/image.jpg" /></a>
<br />Photo by: <a href="http://website.com" />author</a> on PhotoSharingSite.com</div>

Once you have this, you are able to to display an image, such as a photo from Flickr, with proper attribution. Why? Because it’s the right thing to do, not to mention a legal way to not get yourself into trouble with the original author for taking their content.

The next thing you can do is edit your CSS to make some adjustment to the look of your text or perhaps the background. It really comes down to what you want to do. There might be a better way to do this, but this is how we get this function to work.