as always, we have widescreen and standard versions available and this time we included a variant for your iphone as well.  the zip file contains calendar and non-calendar versions in the following sizes:

widescreen
1920 x 1200
1440 x 900

standard
1600 x 1200
1280 x 960
1024 x 768

iphone (calendar-only)
320 x 480

download terminal now 2.2 MB
downloaded 408 times

This wallpaper is available for widescreen and standard resolutions in the following sizes:

standard
1600 x 1200
1024 x 768

widescreen
1920 x 1200
1440 x 900

download eternal september 1.9 MB
downloaded 295 times

First, a little setting: this will work in any <input> box — that is a box that you type into.  So a search box, email submission form, whatever.  Also, you will need to edit code.  I am going to use WordPress as an example, and I am going to use the search box, but this can be applied to any input box once you know the basics.  Ready?  Here we go:

Find the default search form (searchform.php).  If your theme doesn’t have one, you can make one by copying searchform.php from the WordPress Default theme (or, really, any WP theme).  The searchform.php just handles the actual search box itself, so you’re not likely to mess anything up.  Once you have it, open searchform.php in your favorite text editor, HTML editor, or the Theme Editor in the WordPress admin.  You’ll probably see something like this:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label class="hidden" for="s"><?php _e('Search for:'); ?></label>
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s"  />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

That’s your search form.  To make text display in the input box (which is where you type stuff), replace this line:

<input type="text" value="<?php the_search_query(); ?>" name="s" id="s"  />

with this:

<input type="text" value="Search this website..." name="s" id="s" onfocus="if (this.value == 'Search this website...')
{this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />

If you want, you can change the “Search this website…” to be whatever text you want, but make sure you change it everywhere.  What it’s doing is a simple if statement that is triggered when you click inside the box (onfocus) or somewhere else (onblur): if the text in the box says “Search this website…” change the text to ” ” (i.e. nothing).  if the text in the box is ” ” (i.e. nothing), change it to “Search this website…”  Easy.  And now you can get rid of this part entirely:

<label for="s"><?php _e('Search for:'); ?></label>

thereby saving space.  Handy, and also visually interesting.  Also, as I said, no external javascript files to upload, and can be applied just about anywhere, once you get the hang of it.

If you liked this post, feel free to share with one of the links below, or follow our RSS feed.  Also, we’re on Twitter, and you can follow us there.  Thanks!

The problem

To understand the problem, first you need to have a brief lesson in WordPress (and probably HTML in general) structure.  What we commonly refer to as bullet points when talking about a PowerPoint presentation, or an outline, or a Word document, is known as a “list-item” (<li>) in geekspeak.  List items come in two flavors: unordered lists (bullet points, <ul>), and ordered lists (numbered lists, <ol>).

In web design, lists have far-reaching usefulness, above and beyond just a list of stuff that you’d put in your slideshow or report.  <ul>’s are used for sidebars, drop-down menus, links, pretty much any instance in which there is a series of several of the same kind of thing.  The problem, then, is that a lot of those things (say, sidebars, for instance) aren’t the type of thing that you would want to slap a • in front of.  This is resolved by putting this into the stylesheet:

li {
list-style-type: none;
}

Now you can have a sidebar and not have a bullet in front of every box in the sidebar, and every item within each box.

So what happens if you want bullets or numbered lists?  Because, as a side effect of declaring that all lists have “none” for their “list-style-type” you’re applying that declaration for list items that may want the bullets, like in a post.

The thing that I’ve noticed is that this is especially (and somewhat unnecessarily) prevalent in WordPress themes.  It doesn’t have to be this way.  You could just say something like:

.sidebar li {
list-style-type: none;
}

and not have it affect all the lists known to man (or at least known to your site).  But a lot of WordPress themes are based, to one degree or other, on one theme: the Kubrick theme that is the WordPress default theme.  Among other things, Kubrick has this in the style.css:

html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

What Kubrick does is replace the standard bullet points with » which is written in CSS as:

.entry ul li:before, #sidebar ul ul li:before {
content: "\00BB \0020"
}

What I’ve noticed, though, is that a lot of theme designers will take this out, not wanting the » in front of all bulleted lists, and either leave it out completely or replace it with “content: none;”.

How to fix it

Well the easy solution to fix it is to search for “.entry ul” (CTRL + F to find specific phrases is your friend), and see if you can find the “list-style: none” or “list-style-type: none” in there.  If it is, then you can just delete that line, or, if you’re afraid of breaking things you can’t fix later, comment it out like this:

/* list-style: none;*/

If you can’t find it anywhere, or don’t want to modify the original code, you can use this method which will recreate the standard bullets down to three levels (you can smack this at the very bottom of your stylesheet, not touch any other code, and everything will still be hunky dory):

html>body .entry li {
list-style-type: disc; /* this starts with the standard bullet point for all <li>'s */
}
html>body .entry ol li {
list-style-type: decimal; /* for ordered lists, use a number */
}
html>body .entry ol ol li {
list-style-type: upper-roman; /* for the second level of ordered lists, use uppercase roman numerals */
}
html>body .entry ol ol ol li { /* for the third level of ol's, use lowercase roman numerals */
list-style-type: lower-roman;
}
html>body .entry ol ul li {
list-style-type: disc; /* for an unordered list inside an ordered list, use a bullet */
padding-left: 10px; /* and give it a bit more room than the others */
}
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style-type: disc; /* for regular unordered lists, we use bullets */
padding-left: 10px;

}
html>body .entry ul ul li {
list-style-type: circle; /* for the second level, we use an open circle */
}
html>body .entry ul ul ul li {
list-style-type: square; /* for the third level, we use a square */
}

This also makes it so that anything beyond 3 levels (that’s not an ordered list) will default to a regular bullet point.

Isn’t this overkill?

Well, yes, since as I established, if you can find the line that is taking the bullet points out of post entries, it’s a whole lot of code vs. one line.  HOWEVER, if, say, you wanted your default bullets to be something other than a disc, say a square, you can use this code and swap around the options.  W3CSchools.com has an excellent document that talks about all the options you can use for the “list-style-type” property.

Alternately, you can use an image that you define, rather than the default circle, square, roman numeral, decimal, etc.  Using this:

list-style-image: url('path.to.your/image.gif')

instead of this:

list-style-type: square;

There’s also a W3Schools article on that, too.

There’s a few things that will be missing with this move.  I had a lot of development and test and sandbox environments on the old site and I don’t think I’ll be moving those over.  However, for theme development, I’m planning on using WordPressMU and giving each theme it’s own blog — which will include themes we build for clients.

The other thing that will be making the move (although it may be down for a bit) is erin’s sketchbook, which I’m really trying to push as a way to showcase her art.  My own blog and domain, jazzsequence, will stay on our local server for the time being, but eventually I’ll move that, too.