1. PixelToolbox

PixelToolbox is an 8-bit image editor for creating small 8-bit images, icons, patterns, and cursors. Now, the images you use do not have to be 8-bit; PixelToolbox converts them for you. To top it off, it’s got the option to have a transparent background. If you miss this feature, you’ll wind up with a cursor or icon with an ugly, square, white background – and who wants that?! If you don’t mind 8-bit graphics for your icons and cursors, this is a great product, and REALLY easy to use! You can use existing images that you may have – OR – you can draw your own as if you were using Paint. It’s really fun!

2. @icon sushi

I’ve been looking for a program like this for a long time. It creates high quality 32-bit icons with or without a transparent background. All you need to do is save your image as a jpg, png, bmp, psd, exe, icl, or dll file with an image size no greater than 256×256 pixels and it will do the rest. You have to import more than one image, for some odd reason – but the feature I find quite great is you can make an icon set. So, say you had a folder somewhere on your computer designated for each member of the family – you could literally design a custom icon for each folder and save that set as one .ico file. I was amazed at how easy it is to use – and honestly, when it comes to making icons, I prefer it over PixelToolbox by far. Use this to make desktop icons or your favicon.ico icon for your website – and it will have a great quality look.

So, below are the links to get to these great, free programs:

PixelToolbox

@icon sushi

Be sure to download these free programs right away, they’ll help you customize the look and feel of your PC!  I’m on vacation in Oregon right now, so me writing this article for you means these MUST be awesome programs.

What Do You Think?

Do you like these programs?  Got any questions about how to use these programs?  Know any other cool, free programs like these?  Whatever you have on your mind, let me know about it!  My e-mail is david@funkytower.com and I look forward to hearing from you!

Take it easy,
David Crandall

We tend to take lightly the warnings that our own online protection software notifies us about.  We don’t take the time to read where these files are located and what programs these files are associated with.

Recently, my sister had a problem – she had some massive spyware/adware problems; she had alot of pop-ups, which, in my opinion, were caused by some P2P (Peer-to-peer) softwares she had downloaded.  So, she took my advice and downloaded Spybot S&D on her Windows XP SP2 machine, downloaded it definition updates, ran a full scan, and deleted all unfixed files.  The result – extremely slow and incomplete bootup.  It seemed as if all that booted up was a black screen and the mouse cursor.  She called me and asked me to look at it to see what I could do.

Well, I went to her house and did the typical things: I booted up normal, but to only encounter the black screen.  I booted up in safemode, and got the same thing.  I booted up in safemod with DOS, but STILL couldn’t do anything.  After hours of trying different methods WITHOUT reinstalling Windows, at the end of the night, we decided to turn the computer on in the morning and just let it sit.

About a 30 min to an hour after booting up normally, we got a backgroundless desktop with the normal icons, but no start menu.  This told me that the taskbar (start menu) was having trouble booting up and was using up all the PC’s memory.  So, I conjured up some more ideas.

First, I tried to pull up the MSConfig menu and keep some programs from running on startup – sadly, MSConfig just wouldn’t pull up – it said I had to be running an Administrator account.  So, I restarted the computer and waited awhile, except this time, I tried to pull up MSConfig earlier on in the process.  It still did not work.  I tried this also in safemode and safemode with DOS – both got me nothing – no msconfig, no desktop icons, nothing.

So, since this alone took HOURS, I decided to come back the next day.  So, keep in mind, this is day number THREE.  The computer was painfully slow.  I decided that since explorer.exe was partially working (evident by the desktop icons) that I would pull up Windows Explorer to browse files and find the System Restore program.  If anything could fix the problem, one would think this would be it.

After an hour of browsing, I finally got to the folder where the System Restore program was located.  I tried opening the program, but an error came up telling me that System Restore could not repair my computer and to try again another time.  By this time, I was getting really frustrated.  Since we didn’t have the tools at hand to back up files, and since my sister really didn’t care anymore about losing files, I got a Windows XP SP2 disk to reinstall Windows.  I put the disk in the drive, restarted the computer, hit F8 for boot options, and booted from the CD Drive.

Now, this disk has the option to fix Windows, or install/replace windows on a hard drive.  The “fix” mode took me to a DOS screen, and all that really did was tell me useless information.  I exited THAT and rebooted back to the disk drive, and selected to reinstall Windows XP.

Now here’s where the SOLUTION is:

When you select a hard drive to install windows, it recognizes that there is already another version of Windows XP on that hard drive – so, it asks if you would like to repair that version, or replace it.  Well, if I replace it, all the files on the computer would be gone – which would stink, but repairing would keep all my sister’s programs, settings, and files installed.  So, obviously, since I had nothing to lose, I chose repair.

It went through the whole process and acted as if it was completely reinstalling Windows XP, it even took around 40 minutes – just like I was reinstalling windows!  How fun!

Well, the wait was worth it, because at the end of the day, I was able to boot up the machine like it used to boot up before encountering any problems.  I decided to get her AVG Free Antivirus – since she didn’t have that.  I installed it, ran it, and had all problems fixed.  There was a good chunk of “unfixable” files that could be deleted, which I checked to see what they were for.  I found they were not essential to the PC’s performance, and had them deleted.

Finally after midnight of the 3rd day, my work was done.

So what’s the point?

Simple, be smart and use common sense when dealing with  your PC’s safety.  Don’t delete things you don’t know about unless you’re sure it won’t effect your PC’s performance.  This applies to many things like messing with msconfig’s start up options.  Also, don’t use P2P programs, they are dangerous.  You can read about all these things in another one of my articles about speeding up your computer.

Also, when your at wit’s end and are about to take the step to reinstall windows, choose the drive to reinstall it on, AND THEN CHOOSE REPAIR!  This way, you can at least save your files.

So if you’re having that wretched problem of a black background and white cursor with no start menu or desktop icons, pop in that Windows install disk, pick the hard drive to reinstall it on, and choose the repair option.  I hope that helps ANYONE who has had this problem – which I have done some reasearch and know that there are many who have had the same issue – nothing seemed to work, so they just reinstalled windows completely, and sadly, lost all of their files. 

Again, be sure to use this repair option that the disk offers after you pick a hard drive to reinstall windows on, it could save you some head aches.

Note:  This solution was tested on Windows XP, nothing older, nothing newer.  I’m sure any newer version of windows would have the same option, but as far as an older version of Windows – I’m not completely sure.  Anyways, if you have a computer THAT old, you need to upgrade.  Just do it, you’ll aprreciate it

What Do You Think?
Did this help you out at all?  Do you have any questions?  Have you found a different solution to this “black screen and cursor only” problem?  Whatever you have to say, let me know.  You can e-mail me at david@funkytower.com and I’ll be happy to get back to you.

Take it easy,
David Crandall

Woah hold on now, for this tutorial, you have to see it for yourself.  So, I’ve gone ahead and made a small navigation bar that you can download and observe for yourself.  Click this link to download it: buttons.zip

Once you’ve saved it and extracted the files, we can get started!

Step 1:  Creating the buttons:

As you can see inside the folder, we have 2 images:

1.jpg

2.jpg

1.jpg is going to be the button’s original appearance; 2.jpg is what you will see when the mouse cursor is hovering over the button.  Note that there is no text: the reason is that we will use text in our HTML document and modify it with our CSS document.

In order to create buttons, start by creating one image that you think would look best as a button.  Save the image as “1.jpg”  Then, modify it to how you want it to look when the mouse cursor is hovering over the button, then save it as “2.jpg”  It is important that the overall image size does not change when saved.  Both of these images are 100 pixels wide and 34 pixels in height.  We must know the size of our images as it becomes greatly important in the overall product of our buttons.

So now we have 2 button images saved in one directory

Step 2:  Creating the HTML Document:

This step is easy.  Create a n HTML document with a link, and save it to the same directory as the button images, and name it “navbar.html” for now.  That’s it.  In this case, I wanted to show you how a navigation bar might look using the button – so I made a table of one row and 5 collumns with no size defined in the HTML, and put one link inside each column.  The reason I didn’t define a size in the HTML is because we will define the size in our CSS.

The HTML code you should have in the navbar.html file, that came with the buttons.zip file that you downloaded, should look like this:

<html>
<title>Navigation Bar with Buttons Example!</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>

<body>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
  <tr>
    <td class=”nav”><a href=”navbar.html” class=”nav” >Page 1</a></td>
    <td class=”nav”><a href=”link.html” class=”nav”>Page 2</a></td>
    <td class=”nav”><a href=”link.html” class=”nav”>Page 3</a></td>
    <td class=”nav”><a href=”link.html” class=”nav”>Page 4</a></td>
    <td class=”nav”><a href=”link.html” class=”nav”>Page 5</a></td>
  </tr>
</table>
</body>
</html>

There are a few things to note in this code that you must do to your OWN code, if you are making your own HTML document.

1. The <td> tags class is “nav”:  This will be the name of the class we will be editing in our CSS document to modify the table cells.
2. The <a> tags class is “nav” as well, to apply the button and edit the text.
3. We are linking to an external CSS file, hence the <link href=”style.css”….> tag.  Using external stylesheet(s) should become a common practise for you, if it isn’t already.  Be sure that if you are making your own HTML document and CSS document from scratch that the “style.css” corresponds to a local stylesheet called “style.css” just like in the buttons.zip file that you can download.

Just in case you don’t know by now, “class” is like a name that can be identified on different things.  The CSS document will have these names in it, and “class” calls the names to function in the HTML document.

Step 3:  Creating Our CSS document:

Using notepad, type in your CSS code. 
If you’re following along with the buttons.zip file, here is our CSS Code in our CSS document:

a.nav {
 font-family: Helvetica, Arial, sans-serif;
 color: #FFFFFF;
 text-align: center;
 background-image: url(1.jpg);
 background-repeat: no-repeat;
 background-position: center top;
 height: 34px;
 width: 100px;
 font-size: 16px;
 padding-top: 7px;
 text-decoration: none;
 display: table;
}

a.nav:hover  {
 background-image: url(2.jpg);
 background-repeat: no-repeat;
 background-position: center top;
}

td.nav {
 height: 34px;
 width: 100px;
}

Let’s break this down.

FIRST SECTION: “a.nav”
The main properties of the button

1. font-family:  this will be the font you choose for your text.
2. color:  this is the color used for your text only
3. text-align: this is the horizontal alignment for your text; it can be left, right, center, or justify.
4. background-image:  the url of the button we want to appear when you first load the page.
5. background-repeat: leave this property as “no-repeat.”  If you change it, the picture could repeat itself, destroying the whole design of your button.
6. background position: leave this as it is too, this will center your image and align it to the top of the table cell, leaving it looking nice and clean.
7. height AND width: these properties MUST match the size of the button images!!!
8. font-size:  however big or small you want your font; it is best you choose a font that will leave the text fitting inside the button.
9. padding-top:  this is the ammount of space from the top of the table cell in which your text will appear.  In this case it is being used to put the text right in the middle of the button.
10. text-decoration:  change this to whatever you want.  I chose “none” so that there wouldn’t be an underline when we first see the button.  I personally find the underlines, typically, to be tacky.
11. display: I chose “table” because this causes the background to be displayed throughout the entire table cell.

SECOND SECTION: “a.nav:hover”
This is what we want the button to do when we put our mouse cursor on top of the button.  Because we’re only working with the button, I changed only the properties of the button image.  You can change the properties of the text, too, if you’d like.

1. background-image:  the url of the button image we want to appear when we put our mouse cursor over the button.
2. background-repeat:  same as above
3. background-position: same as above

THIRD SECTION: “td.nav”
The properties of the table cell – we only need to adjust the table cells size.  This is really only needed if you put the button inside a table cell to use as a navigation bar.  If you’re not making a navigation bar or putting your link/button in a table cell, you can skip this section.

1. height:  This is the table cell’s height which MUST match the height of our button images.
2. width:  This is the table cell’s width which MUST match the width of our button images.

These are ALL the properties we need to complete our CSS document for our button.  Save this CSS document as “style.css”  As mentioned before, we are linking to a separate stylesheet called “style.css” and this will be that stylesheet.  Save your stylesheet to the same folder/directory as your button images and HTML document.

Step Three:  Testing

Now, if you’ve followed along properly, you should have 2 button images, an HTML document with one or more links, a CSS document covering the specs of our button, the specs of our button when we hover our mouse cursor over it, and (if you’ve chosen to make a navigation bar using a table with table cells) specs on the navigation bar’s table cells.

If so, open up your HTML document (navbar.html) and see how it looks.  If you coded the CSS and HTML properly, then it should look just right!  If your button doesn’t look right, make sure you defined the size of your images in the CSS documents properly – and that they are the same.

If your button doesn’t work, double check to make sure you identified the classes properly in the HTML document, and that the images’ URLs are correct in your CSS document.

Extra Tips:

If you want to change the font-color, font-weight, and text-decoration during your hover effects, be sure you define the way you want your text to look using these properties in both “a.nav” and “a.nav:hover”  If you don’t, you could confuse some browsers and your button won’t work properly.

If you want to use crazy text font, instead of a common text font – apply that font to your button images, NOT the HTML document.  When you do your HTML document, simply type a space for a link, like so:

<a href=”link.html”> </a>

In doing this, you won’t have to worry about any text properties in your CSS document.

If you are copying and pasting code from this page into notepad, this could sometimes cause a negative effect: the best thing to do is download the buttons.zip file and work with that.  It is always best so hand-type the code.  If you use dreamweaver, use “auto-html” features, or hand type the code.  This ALWAYS works best.

That’s it!!!  Now you have a functioning button and/or navigation bar with a rollover image effect!  Pretty neat, don’t you think?  AND it was easy!!!

What Do You Think?
Was making a roll-over image type button with CSS easy?  Did you try this out and couldn’t get it to work?  Did you use this method on your website?  If you did, I wanna see it!  Let me know if you have any questions or comments about this tutorial, and I’ll be happy to get back to you!  Send me an e-mail at david@funkytower.com,  or leave a comment below! 

Take it easy,
David Crandall