Example

ul { list-style-image:url(picName.jpg); }

Done in one short line. This will simply make every un-ordered list have an image in place of the dot. So then an un-ordered List in XHTML such as:

List Item 1
List Item 1
List Item 1

would look like

(Note my list image is )

The only problem with this is that every unordered list will use this image. To fix this we will give the unordered list a class name this way we get to choose which list will show the image and which will use the default dot.

CSS:

ul.imgList { list-style-image:url(picName.jpg); }

XHTML

List Item 1
List Item 1
List Item 1

Here is what we want to end up accomplishing.

Adding images to your form fields is actually very simple. It works just like adding images to any other item on your page. Here is the CSS for how it is done.

 input {<br />
background:url(img/redStar12.gif) left no-repeat;<br />
padding: 3px 3px 3px 15px;<br />
}

This gives us something like this

View it in action Here

You see that the input class specifies that I want to define this style to all input fields, This includes check boxes, radio buttons ect, with the exception of text areas. So this is a problem.

In my example here I am adding a red star to the input field to specify that the field is required. You notice the padding for the left is at 15 so that the user does not type over the image. This is a great way to indicate a required field.

But there is still the one problem. This is applied to all form input fields. So we need to declare it as a sub class instead. I am going to change the above CSS to solve this problem.

 input {<br />
padding: 3px;<br />
}

 input.req {<br />
background:url(img/redStar12.gif) left no-repeat;<br />
padding: 3px 3px 3px 15px;<br />
}

So now you see that I have changed the input class to only add a little padding and a small border and I have added the second piece to only add the image on fields I specify with the class=req.

Here is the final result.

I have seen this technique used on many websites. Some of the more common uses is for required fields like above, for username and password fields. As well as just making the input fields look better.

If you take a look at the search form here on osguide.net it uses this same technique for the search icon.

Enjoy.

“I made a paging navigation plugin for WordPress that will be an alternative to the “Next page” and “Previous page“. Instead it uses numbers which makes it easier for users to choose what page to go to. It also makes a tighter internal link structure which makes it easier for search engines to find your posts.”

He included a couple basic themes, But earlier today I re-stylized the “tiny” theme to be this dark grey color scheme. So now I am going to share this with you.

Here is a preview of the style.

Now the css for the style. After you set up this plugin for yourself change the “tiny” style to the css I provided.

To get this wordpress plugin for yourself head over to http://www.jenst.se/2008/03/29/wp-page-numbers and follow his instructions.

Recently at work one of the sites that we inherited, and now maintain, asked for me to change the way their website looks when it is being printed out. The site itself was using very basic css, is still using tables for alignment, and has a flash header at the top of all the pages. I have never needed to stylize the way a web page prints so I was quite new to this. I did however know it could be done using an alternate css sheet.

So I was off to search for my answers, I quickly came across 4 or 5 crappy attempts at explaining these alternate style sheets, and after piecing information together and some trial and error I managed to figured it out. Its turned out to be very simple for a basic site like the one I was editing. I could see how a much larger site such as my osguide.net would be a little tougher, and take longer. So that will wait until another day.

Regardless it all starts with a simple 1 line of code to call my new style sheet when the page is being printed:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Its your normal call to an external CSS page except I changed the media to print, instead of screen.

That’s all fine and dandy, my new sheet is called only when I print the page out. Now the more annoying problems popped up, no background images were printed, as well as no flash. I expected the flash not be printed, but I figured it would print background images.

I did not want to print the navigation so I set the display for my navigation to none. The CSS for that is simple:

display:none;

So my next goal is to get the flash to print. Up until now I have only been looking at the print preview in Opera, and so I decided it was time to take a look at in IE 7, Firefox 2 and Safari 3. IE 7 does print the flash, so does Firefox, but safari does not. This is definitely a large problem.

So I have Opera and Safari without a header, and IE 7 and FF with a header on the print previews. I am not one for CSS hacks, or alternate style sheets, so I had to come up with a different way to properly display my page.

I checked out a couple work-around’s using lists but they did not seem to work like they said it should… go figure. So I had to resort to a pretty lame workaround, until the browsers themselves get on the same page, or I find a better way to do this.

I ended up placing two new div tags. The first one around my flash header and the second around a new jpeg image right above my flash with a display of none.

So Now on my screen css I have a hidden image right above my flash, and then on the print css I hide my flash. This seems like a crappy work-around, but it works in all browsers without any css hacks.

My question now is does anyone else have a better way to do this without css hacks, or alternate style sheets? I know this can’t be the best way.