New Buttons

in
Subscribe to New Buttons 3 posts, 2 voices



Wes M User

The default grey lights bulb icons were kind of bothering me, so I decided to make some new ones that match the blue and yellow buttons. I also made a new play button that's closer to the one you see hovering over embedded YouTube videos. If anyone wants to use them, feel free.

Blue icons:

http://i40.tinypic.com/14tbh2g.png
http://i39.tinypic.com/vo4ria.png

Yellow icons:

http://i44.tinypic.com/1zog5f6.png
http://i41.tinypic.com/i2sshk.png

Play button:

http://i44.tinypic.com/ftesy8.png

For anyone who doesn't know how to use these, you'll have to convert these to base64 and embed them into the script. Just head over to this site: http://www.greywyvern.com/code/php/binary2base64
Once you have them converted, you'll have to replace the original code in the script. For the light bulb icons, find this section:

.lights-on { background: url(...) no-repeat 0 0; }\
.lights-off { background: url(...) no-repeat 0 0; }\

Replace the url inside the parenthesis with the entire block of code you got when you converted the file. Lights-off is the normal icon (lights out is off), and lights-on is the activated one (lights out is on). The only downside is they'll stand out even more if you decide to switch colors, but you can always just edit the code and change them again. If you want to replace the play button, find this section:

var play_btn = $E('img',
{ 'id': 'play_btn',
'src': 'data:image/png;base64...' });

Then replace the entire section of base64 code with the new code you generated. The new button will be slightly off-center since it's a different size, so scroll up until you find this:

addStyle("\
#play_btn { ... }\

And change the padding to this:

padding: 152px 198px;

After that everything should work.

 
RunAway User

Hi, fantastic finally a nice replacement for play and lights buttons :D
Just one precisation: if you replace lights on/off icon this line should be changed too to fit with new icon:
text-decoration: none; display: inline-block; height: 24px; width: 32px; }\

from 24 to 25 and from 32 to 33 and voilà :D

 
Wes M User

Ah... I knew I was forgetting something. I made the light bulb icons 1 pixel taller and wider so they'd be the same size as the other buttons. Glad you like them and thanks for pointing that out.

Cross
Presentational HTML allowed.
Use <code> for inline code and <pre> for code blocks. Use &lt; and &gt; for literal < and >.
We help break paragraphs and link your links.
or cancel