CSS and XHTML tutorials and resources for standard compliant websites.

Managing Custom Post Types, Oh My!

I was extremely stoked to hear that wordpress 3.0 was bringing custom content post types into the mix. Which I guess were supported in 2.9 but I never really knew that, go figure. Anyways upon updating I was confused. Where is this custom post type management area I asked. Everything looked the same.

Upon googling the topic I soon realized it was not as easy as I imagined. While it was as easy as pasting some code from a tutorial. I really had no idea what I was pasting. So I gave it a few weeks and searched again and I found something helpful.

I found two plugins (not modules… drupal heh) that pretty much made it as painless as I imagined it being.

The first is the Custom Post Type UI plugin. It does just as the title would indicate: provides you with a UI for creating and managing your custom post types. It also provides a way for you to create and manage taxonomies for your custom post types.

The second is the Simple Custom Post Type Archives plugin. Now after I created a custom post type with the greatest of ease with the above plugin. When you create a custom post type (ie: albums) each album post would have the url: blah.com/albums/album-title. Naturally I thought if I went to blah.com/albums I would get a list of all the album post types. I was wrong and was left ponder how I would go about listing these of on a page in an aggregated fashion like a category page. I tried a few things and failed. After some searching around I found this plugin. It literally just does that. It makes so when you go to blah.com/albums you will get a list of all the album post types. Just install, enable and boom! It was that easy.

I wanted to get a tad bit fancy so I created a type.php which is the equivalent of category.php. It worked for me because I have only one custom post type but I think you can get more control if you use type-album.php (album being the name of your custom post type)

With all that said you may notice there is now an audio link in the main navigation and there is no longer an audio category. That’s right. The albums are all their own custom post type. So I guess kudos to wordpress, great work as always.

Internet Explorer Collection

“Internet Explorer Collection contains multiple IE versions, which are standalone so they can be used at the same time.”

http://finalbuilds.edskes.net/iecollection.htm

Um… greatness of all sorts, where the hell has this been all this time? My boss found it at work since our ie6 computer was taking a dive every time we fired up the virtual pc. Now you can look at internet explorer murder your code on all three versions of it current ugly self. The above link actually provides you with internet explorer all the way back to ie1 (why?)

Target IE6 and IE7 With Only CSS?!?

I stumbled upon this looking for something different but I found it to be a very interesting (and useful) approach to dealing with the notoriously useless internet explorer browser. This eliminates having to use conditional statements and style sheets just for specific browsers (dreamy). It seems almost too good to be true. The downside of it being your css won’t validate… sometimes I care sometimes I don’t, I dunno. It’s pure genius! Who would’ve known all it takes is a * and an _ in your css!?!?

Kudos to Brian Cray, the article was on his site. Here’s the link: http://briancray.com/2009/04/16/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

100% CSS Rollovers

This is one of my favorite little tricks I’ve managed to wrangle over the years of googling “css rollover.” It became a full proof thing when I figured out how ma.tt had done his rollovers on an older version of his site. Really though it isn’t rocket science (by any means) and anybody with moderate understanding of CSS and XHTML should have no problems figuring it out if they haven’t already.

I prefer doing it this way because it uses a plain unordered list so if something breaks they will always have the navigation in a plain unordered list. You also don’t have to do any ghetto stuff like use a transparent .gif as a place holder or use a sneaky span tag to have some sort of content associated to the button link (janky)… and it doesn’t need any javascript.

I use this method of making main navigation menus pretty when it’s a hand-coded website or when it’s a CMS with a fixed navigation. By fixed navigation I mean the client won’t be trying to change the main navigation all the time. Since every button needs an image with two or three states it can become a pain if the client keeps changing their mind.

So for starters you need a plain unordered list with some id’s for later on when styling the CSS. Every list item houses a link as a button is no good if it doesn’t link anywhere.

<ul id="nav">
<li id="one"><a href="#">one</a></li>
<li id="two"><a href="#">two</a></li>
</ul>

I created two buttons of equal width, this also works with various widths just be sure to add the width to the specific id. I use the sliding door method so each image has two button states (link and hover), if you were feeling slick you could add a third button for the active state to the same image. This avoids that annoying flicker upon hover when you haven’t cached the hover images yet because the hover is attached to the image that loads first.

Obviously you must be careful to align the buttons on the image so they don’t look like they jump when you hover. If your button is 25px tall the image must be 50px tall for two states and 75px if adding an active state. In my example here the images are 75px x 25px. Here are the buttons:

one two

Next is the CSS:

#nav li {display:inline;margin:0;padding:0;}
#one, #two {float:left;}
#one a, #two a {display:block;height:25px;text-indent:-9999px;width:75px;}
#one {background:url(one.png) no-repeat 0 0;}
#one:hover {background:url(one.png) no-repeat 0 -25px;}
#two {background:url(two.png) no-repeat 0 0;}
#two:hover {background:url(two.png) no-repeat 0 -25px;}

It’s all pretty basic and can be expanded upon to suit your needs (ie: kill the float:left and they stack on top of each other or position them absolutely). All it requires is a bit of math but it’s easy, just be sure your button size is reflected in the hover state background position (-25px in above example) Here is a break down line by line of the above:

  • #nav li {display:inline;margin:0;padding:0;} removes the bullets from the unordered list.
  • #one, #two {float:left;} makes the list items float left so they sit next to each other in a row.
  • #one {background:url(one.png) no-repeat 0 0;} and #two {background:url(two.png) no-repeat 0 0;} are the regular link states with their background positions at 0.
  • #one:hover {background:url(one.png) no-repeat 0 -25px;} and #two:hover {background:url(two.png) no-repeat 0 -25px;} are the hover states with the top background position to set to -25px, this number is the height of your button.

Here is a demo page with it all working in case my writing is pure gibberish and you find it easier to see it and take it apart. View the demo page.

I also compiled a zip archive in case you are as lazy as I am. Download zip archive.

Also I’m done with ie6 so if it works great if it doesn’t I’m sure you will figure it out 🙂

Internet Explorer Input Backgrounds

When creating snazzy search forms be sure to wrap the input field in a div and add the background image to the div while setting the input background to transparent with no border. Make the div the actual size of image and make the input field be the size of the image minus all padding added to center text in input field vertically.

If you don’t wrap the input field in a div and someone starts typing a search query longer than the background image, the background image will begin to scroll left as you type. If you type enough the background just scrolls right out of view. Code below should be enough to get you headed in the right direction, obviously make the background image url point to an image on your server.

#searchform .input-bg {
background:url(images/input.png) no-repeat left top;
height:28px;
width:92px;}

#searchform input {
background:none;
border:none;
height:22px;
padding:3px 3px 3px 6px;
width:83px;}

<form id="searchform" action="#">
<div class="input-bg">
<input type="text" value="search" /></div>
<input id="searchsubmit" type="submit" value="Search" />
</form>

Edit: I used a drupal tutorial I found on styling the submit button to create an all css submit button that doesn’t add a bunch of weird xy coordinates in the url after submitting like an input type=image and the button tags do(?). It basically just shifts the text out of the way and makes the text color same as background creating the illusion of a nice button. View tutorial here. That css code looked like this (below) and matches the form html above.

#searchform #searchsubmit {
border:none;
background: url(images/search.png) no-repeat left top;
cursor: pointer;
display:inline;
height:28px;
letter-spacing:100px;/*moves text out of way for ie*/
text-indent: -9999px;
width:32px;}