Warning, please read Part I of How to make your own Firefox extension from scratch before trying this DIY.

In this Part II of How to make your own Firefox extension, we will change the icon button to something we like instead of the dumb looking blue default button.

Now, you will want to open up the overlay.css file under the skin directory of where you unzipped your extension files.

The default should look somewhat like this:

/* This is just an example. You shouldn’t do this. */
#shtoolbar-hello
{
color: red ! important;
}
#shtoolbar-toolbar-button
{
list-style-image: url(”chrome://shtoolbar/skin/toolbar-button.png”);
-moz-image-region: rect(0px 24px 24px 0px);
}
#shtoolbar-toolbar-button:hover
{
-moz-image-region: rect(24px 24px 48px 0px);
}
[iconsize="small"] #shtoolbar-toolbar-button
{
-moz-image-region: rect( 0px 40px 16px 24px);
}
[iconsize="small"] #shtoolbar-toolbar-button:hover
{
-moz-image-region: rect(24px 40px 40px 24px);
}

Now, you can change the button’s image by editing the toolbar-button.png. I actually simply replaced with another file name.

So first, I made my own logo. You will need one with height of 24 pixels and the other with 16 pixels.

I also made a “hovering” graphic so the logo will change and have the kangaroo holding a beer when you hover the mouse over it.

Here’s an example Png file I made using Photoshop:

As you can see, you the can use just 1 file to store all the logo images you need.

In my case, I made a 165×24 pixel icon button and 100×16 pixel icon button.

The 100×16 pixel icon button is actually used for the toolbar and the 165×24 pixel icon button is used when you tried to customize your toolbar.

So in total, the size of my file was 265×48 pixels.

Now comes the fun part. You simply need to mess with the -moz-image-region values so you grab the right parts of your customized PNG file.

So after all that, here’s the file I have for overlay.css:

/* This is just an example. You shouldn’t do this. */
#shtoolbar-hello
{
color: black ! important;
}
#shtoolbar-toolbar-button
{
list-style-image: url(”chrome://shtoolbar/skin/shtoolbar.png“);
-moz-image-region: rect(0px 165px 24px 0px);
}
#shtoolbar-toolbar-button:hover
{
-moz-image-region: rect(24px 165px 48px 0px);
}
[iconsize="small"] #shtoolbar-toolbar-button
{
-moz-image-region: rect( 0px 275px 16px 165px);
}
[iconsize="small"] #shtoolbar-toolbar-button:hover
{
-moz-image-region: rect(24px 275px 40px 165px);
}

I’ve highlighted the changes I made in BOLD.

You simply need to remember 4 things when editing the -moz-image-region:

TOP RIGHT BOTTOM LEFT

That’s right, for the first line:

-moz-image-region: rect(0px 165px 24px 0px);

I am simply telling the CSS file to grab the portion of the image from 0 to 24px from TOP to BOTTOM, and from 0 to 165px from LEFT to RIGHT.

Now you do the same for the hovering and the smaller image.

After you made those changes, Save and then restart the browser.

Your default blue button should now look like this:

Looks great doesn’t it?

And when you hover the mouse, you get a nice beer bottle for the sober kangaroo.

Next time, we will mess with more Javascripts that can be used for the icon button to actually do something…

Have fun and have a greeeeat weekend!

Wow, this has to be one of the cooler DIY robots I’ve seen in a long time. Basically, it plays drums. Not real drums, but it plays your household stuff like vases as drums. Beautifully done, we give it an A+ for the creators. (Btw, we are not selling the blog for $1000, our readers say it’s too cheap! How much should we sell it for? j/k April FOOLS!)

Notice how the robot first plays on the object it finds (or is forced to find by the angry cameraman), plays a small beat, and records the beat it plays on it. Then this recorded beat is played again, and it starts to play on the object (an belt tracks and everything else it has),and also playing this sampled beat

[via] letsmakerobots

Click to enjoy the video

Continue reading ‘DIY - Robotic Yellow Drum Machine plays Drums!’

This post was guest posted by Joe from HackNMod. (Do you have a tech blog and want to guest post? Send an email to zedomax at gmail.com)

With technology rapidly evolving, light emitting diodes are in virtually every single electronic device on the market. They don’t produce any heat, consume less power, and emit brighter light than conventional bulbs. Furthermore, they are incredibly inexpensive and are easy to solder, allowing any inventor to utilize them with ease.

1. New to LEDs? Not a problem, everyone has to start somewhere. Learn how to solder them, then build a few beginner projects. These three projects are great for anyone just getting into electronics and wiring.

2. Using a standard digital camera and a few infrared leds,you can make your own, high quality Night Vision Security camera for about $5.

The other day, my girlfriend’s brother wanted me to make him some address and shipping labels for his new Thai restaurant. Well, I didn’t want to pay taxes, I found a good site on Google called World Label. They got pretty good prices, much better than getting them at your OfficeDepot or OfficeMax. Since they are based in New York, I didn’t have to pay taxes (I am California) or pay the overpriced retail prices. Since the matter wasn’t urgent, I figured it’d be a good go.
You should check out their Generic Avery labels and Shipping Labels, the prices are much better than your local retail shop. World Label also has many other interesting labels such as the CD/DVD Labels or Starburst Labels, which I might use in the near future.

Why do you ask? I never buy anything retail or at least at retail prices. There are so many great online stores you can visit, why bother even wasting your gas? Especially books, I saved a bunch of money by becoming an Amazon affiliate and buying it from myself. (Although I think their ToS says not to, I figure I couldn’t get caught in their gigantic system. Besides, I am not making any money being an Amazon affiliate.) Amazon has a great discount on books even if you are not an affiliate, it’s 25-30% cheaper than buying from your local Borders or Barnes & Noble.

Well, the point of the story is that I did try to use Microsoft Word to make the labels but I encountered a problem. Most of the time when I make labels, I usually end up spending 5 hours trying to align my address to the labels. It’s a big headache even if I think about it. I did used to use a label machine but that was at my old job and I was stuck with my good ol’ HP Deskjet F380.

The greatest part about this experience is that the labels I bought from World Label also provides free templates for all the labels they sell. I did try to download it from the Avery site, but they make you register and you know how I hate to put any personal information on any site or even bother registering.

Anyways, here’s how you can make Avery Labels and Shipping Labels in a whopping 30 seconds!

1) Download the free Avery Label template = 5 seconds.

2) Open up the template in Microsoft Word = 5 seconds.

3) Type in the address, then copy & paste to all the 36 label spots = 20 seconds.

4) Hit the print button! (Okay, we didn’t include the time to print since you can do other things while it’s printing.)

I like to save a lot of time when I do stuff, and these free templates just saved me like 5 hours of stupid alignment work. I wonder who’s behind the company, they did a great job of making these labels and save me a bunch of time. (Will they send me a sample? Lol…everytime I add this line, I get free stuff, isn’t that crazy?)

Maybe you can bookmark this post for your next label printing time and make sure to subscribe to Zedomax for more little DIYs that will save you time around the office.

This video shows how vulnerable an RFID credit card is because it’s not very well encrypted signals. I am sure the makers of RFID credit cards will change this soon but until then, make sure to keep your RFID credit cards in your metal business case or an Altoids can. Great thing, I am still old-school and haven’t used an RFID credit card.[via] Consumerist

Check out this cool little hack, it’s an open-source motor controller for an electric bike. There’s no pictures of a finished version but can’t wait to see this circuit in action!

n brief the PicOx is a PicAxe 08M based digital Controller that performs an ADC of a Hall-effect throttle and an ADC of a Hall-based current sensor. These two parameters determine the “Mark” value of a 15Khz PWM signal that does the switching to the Output stage. At the end of the project the Controller can sustain 48V @ 75 Amps repeatedly for approx 5 second bursts and is really only limited by the In-Line breaker that cuts the supply voltage, though the entire system’s overall design objective is met reliably at 48V 50Amp operation…

via HackedGadgets

Click Here to View in Full Screen Mode

Here’s a funny cheap lie detector you can make. I don’t know if it really works since there’s no circuit diagrams but you can find lots of lie detector circuit diagrams on the internet like this one I found in about 5 seconds:

Yes, these lie detectors probably won’t work on cats, maybe try dogs.

via dailyapps

The other day, my home had power-outage for like 6 hours. I could go buy a UPS (Uninterruptible Power Supply), or I can make my own UPS using a car battery.

Well, I am just hoping this DIY UPS lasts 6 hours so I can keep using my spare laptop, which shouldn’t need that much power anyways to run off the UPS. But if I tried to run my desktop PC, it’d probably last only 2-3 hours at most, maybe even less.

This DIY is for 220 Volts so you will have to make some calculations to make sure you are providing the correct number of invertors and etc…etc… Btw, if you do use it for powering up your laptop, you don’t need an invertor as most laptops are around 12VDC anyways, which is what car batteries are at. (But you will need to hack an adaptor to the laptop for sure)

In this article we look at how you can cobble together a 220 Volt power supply using components you can buy at your local automotive store. But first it is important to understand a few basics about batteries, and how to convert 12 Volt DC battery supplied electricity into 220 Volt AC current that your household appliances can use.

A twelve Volt battery is a storage device that, when charged, stores electricity in chemical structures that can reverse and release electricity if required. Batteries are typically rated in Amp Hours (AH) - ie how many Amps for how many hours the battery will perform. An inverter is a device which can take the DC current from a battery and convert it into 220V AC current for your appliances.

To calculate how many batteries you need, and how big an inverter is quite simple. Investigate the specification plates on the back of each appliance. In the case of my laptop, the power supply is a 90W unit.

For an inverter one can work on a rule of thumb that to produce 100W will require approximately 10 Amps, hence in reality the lap top requires about 10 AH of battery life per hour. With a 90 AH battery one can therefore expect about 9 hours of power before the battery provides too little current to keep the inverter going. But it is not this simple.

[via] scienceinafrica