The issue is that when you get the share widget from the ShareThis website, there are only a couple options for the styling of the button. And the javascript code that you get does not have an image URL in it that you could easily modify to your own image. I even tried copying the javascript that loads from the ShareThis site and loading it from my own site, with modifications. But that didn’t work. What I wanted was a large icon that when moused over would show the sharethis dropdown of all the social sharing options. However, there is no large icon option. Just a few different small icon options that were not going to match my client website icons. So, time to make it my way.

The image was going to appear in a group of icons for navigation. The sharethis icon needed to fit right into the middle of them. Since I was already using some hover css that I’m fond of using for icons like this, avoiding having to use jquery and for that, maybe making the site somewhat more accessible, I went ahead with that. I do this with an object tag to wrap a div inside a link tag, so it will validate.

Then all I did was create another div inside that one, to insert the sharethis javascript code. The HTML for the list menu item down to the javascript looked like this:

<li>
<a href="http://example.com/about">
<object>
<div class="menu-share">
---share this javascript goes here---
</div>
</object>
</a>
</li>


So there are the .menu-share div to show the button, as well as help me hide the image that sharethis will load, without hiding the functionality. All that’s left is the .css:

.menu-share {
background: url('images/share-icon.png') no-repeat 0 top;
height: 56px;
width: 57px;
float: left;
margin: 0 20px;
}
.menu-share:hover {
background-position: 0 -57px;
cursor: pointer;
}
.menu-share img {
display: none;
}


The last little bit just hides any image inside the div. It does not hide the background image, only images that load inside the div. However, all the javascript is still fully functional, loading the social media dropdown as it should.

Enter the simple elements that use nothing but HTML and CSS, and maybe some images.

What I want to demonstrate is a simple way to get a hover effect on an image, without using jquery or javascript. The way this works, basically, is the image will be the background of a div element that will reside inside a link. Actually the div does not have to be inside a link, but it does if you want the image to link to some other url. The background image actually contains two copies of your image, with the second copy having whatever hover effect you want, such as slightly darker or whatever. In the CSS code, you have the background image positioned at the top of the div, and in a hover of the same div, you have the background image positioned at the bottom. When you hover, voila! And unlike the javascript version of hover, you don’t have to wait a split second for the hover to work, since the image is already loaded!

To the rightyou can see a screenshot of the effect I’m going to show you. On the same screenshot you can also see a green button. I used the same effect on that. The button is part of a jquery slider, so it’s not like I never use jquery :)

I’m going to be using the coffee cup that’s available here. Actually I recommend this set of twitter icons, they are probably the coolest you can find.

First, I open Fireworks and find the coffee cup image I downloaded. Then I resize it to the size I need for the footer of my website. For me that’s 96px wide and 71px high. Then, I copy the image and paste it over itself. Next, move the second copy so that the top of the second copy just touches the bottom of the first copy. Then “Fit Canvas” so that the two images are now visible. Next, I select the bottom image and modify the color by reducing the saturation to nothing. This makes it greyscale. See the screenshot to the right.

Then save the image and optimize it. I save it as a transparent .PNG file, but you can also save it as a .jpg if you don’t need transparency. I personally use PNG Gauntlet to optimize the .PNG.

Then I load it into the image folder on my website, and put the following code in the CSS file:


.twitter {
float: right;
width: 96px;
height: 71px;
background: url('images/social/twitter-cup.png') no-repeat bottom;
margin: 17px 44px 4px 0;
}
.twitter:hover {
background: url('images/social/twitter-cup.png') no-repeat top;
}

My div has a class ‘twitter’. Then simply put the div in your website where you want it to appear. Just call it the same class and it will work like a charm. You can also wrap it with a link if you want it to be hyperlinked.

And that’s it! The simplest (I believe) way to have cool hover effects on your website, that works instantly since the image is already preloaded when the page loads.

See the footer of my web design site for a sample: See The Coffee Cup Here

If you implement this little trick, please let me know by commenting here or tweeting it!

BUT, as much as we all hate it, and struggle with it when we are new, if you can learn to design websites that work EVEN in IE6, then you will have become a much better designer.

Good web designers don’t care what their clients are going to use to look at their website, it’s just going to work.

Here are a few things I’ve learned in my struggle to tame the IE6 beast … Keep in mind, these are things I’ve learned through trial and error. And no rocket science here, just some simple rules to follow.

First, I always use pixels in sizing, never ‘em’s. Maybe this is something you never did, but I used to use tons of ‘em’s in my themes for spacing elements, with margins and padding. But somehow, ‘em’s aren’t correctly treated in older versions of IE. So I started using nothing but pixels for spacing, and got better results.

Second, I rely more on padding than on margins. Older IE versions tend to treat margins differently than other major browsers. So if there was an element that I could use either padding or margins, with the same effect, I would use the padding rather than the margin.

Third, wherever possible, I turn my .png files into .jpg files. I like to use transparency as much as anyone. But all too often I would be showing a cool new theme or website to a friend, on their computer, and the .png files would get a grey or pink background that totally messed up the look I was going for. So, if at all possible, I use .jpg files. Also, I don’t use transparent .css borders or font. IE6 doesn’t know what transparent means with anything at all!

Fourth, I don’t get crazy with creating graphical submit buttons or fields. IE has standard ones that they overlay onto the ones you create. So better to keep your submit buttons simple, either the default or some simple .css.

And my last tip is to test, test, test. Especially when trying a new technique and spending hours making it look perfect … in your favorite browser. There’s nothing more frustrating than getting it perfect and then finding out that in other major browsers (IE6 is not that major anymore but you get the point) it completely falls apart. Better to stick with simpler techniques that you can get to look good in all browsers.

Get an awesome web host!
Unlimited Domain Hosting Only $9.95 a Month

FileZilla is the program I’ve used for years, and I RELY on it. It’s pretty comprehensive, works on Mac or Windows, and it’s FREE!

Learn more or download it here:

http://filezilla-project.org/

1. Favicon Generator – some clients ask you to create a favicon, you know, that little icon that shows up in the address bar in the browser and in the bookmarks list.

What I do is first take a letter or two from their site title or logo, and put it into a .png file that is square. I use colors that match the site, and I try to be careful not to be tempted to use every last bit of space. I usually create a file about 100 x 100 pixels for easy working.

Then, all I do is go to the favicon generator that DynamicDrive.com has available and I generate a favicon from the .png file I created.

They also remind you of the code you need to include in the tag on the website.

Very handy, very simple, and I always use it.

Remember, the favicon might take a day to start showing up in the browser. Delete the browser cache to speed it up for yourself.

2. Forms WordPress plugin – Called Contact Form 7, this is the best way to generate contact forms, surveys, or whatever you can think of, to capture visitor information. I know, you can use a contact capture tool like iContact or Aweber. But if you don’t want to tell your client to spend money every month, Contact Form 7 is very robust and flexible.

First you download the plugin here, and install it on the website. Then, you use the link on the WordPress settings sidebar to create a form.

You use the same fields you created in the form to define the information you want to receive in the email, and every time someone fills out the form, an email is generated to the address you specify, so you can collect all the info.

Again, a simple solution, and once you get used to it, you use it a lot for your clients, and you love it.

In fact, you have a set of objectives with the website.

Maybe it has to make sales.

Maybe people have to feel comfortable on the website.

Maybe you want them to download something.

Whatever the goal, the idea is not to keep tweaking every little detail until it’s perfect. Hours … and Hours … and Hours … pass by.

And all you’ve got is a website that still does what you want, and it might look just a litle cooler.

Stop the tweaking and instead, focus on the objective.

Early on in my own design career I used to spend countless hours making little changes to the look of the websites I was working on. It would have been time much better spent on doing something else, more constructive.

Of course, if you are working for a client, and the client wants a change made to something, then that’s a change to make.

But there are much better things to do than do another take on that shadow in your banner.

What better things?

Marketing: increasing traffic to your website, and finding people interested in your services and engaging them

Getting some R&R: refresh your creativity by stepping away and spend an hour or two exercising or walking

Browsing other designers’ work: Get a fresh perspective, bask in the colors they choose and see if anything hits you.

Well yes … and no.

In the very early stages when you are trying to get things off the ground, you will be inclined to take jobs that are less to your liking and expertise. And as long as you can handle it well for the client, that’s ok.

But as time goes on, you need to define yourself so people know what you do really well.

A couple weeks ago, I said that specializing in one particular CMS of your choice was a good way to get really good at coding and theme building. Well why don’t you brand your web design business in the same way.

Wordpress theme specialty? Then be a wordpress web designer. Joomla your sweet spot? Why not be a Joomla web designer.

Then, you will not have the whole world beating down your door, but you are more likely to get jobs from those who are looking for someone who has that specialty.

Just do a search on their website or just browse the articles for really good insight and tips on making your design a lot better.

Here are a couple of my favorite articles:

‘Clever PNG Optimization Techniques’
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

‘60 Brilliant Typefaces For Corporate Design’
http://www.smashingmagazine.com/2008/03/20/60-brilliant-typefaces-for-corporate-design/

‘35 CSS-Lifesavers For Efficient Web Design’
http://www.smashingmagazine.com/2009/06/25/35-css-lifesavers-for-efficient-web-design/

So most people spend months or years searching for tools that can help them speed it up. That is if they can’t afford your web design fees. After a polite look, they will keep looking.

But there are tools that you can promote, that will solve the problems that newbies online face, and that you can make income from. If you have a list of people who have been on the fence about web design, try this tool. It’s a quick way for beginners to build a website and monetize it. And if you were the one to tell them about it, you make residual income.

Sounds like a good deal!

Learn more here, sign up for an account, and tell your fence sitters :)

Really Cool Web Design Tool You Can Make Residual Income From!

I’m a believer :)

Get the plugin free here:

http://ideasilo.wordpress.com/2007/04/30/contact-form-7/