The Icon Deposit Blog

Media Playback Buttons

vectormediabuttonspromo.png

Our First set of playback buttons! This set includes a Photoshop .PSD file template, a Gimp .XCF file template, and .PNG button sprite file available in 6 different colors. This is sprite image made in vector format.

If you would like to use this button set for a Blog post or personal use feel free to do so, as long as it is linked back to this blog post… http://www.icondeposit.com/blog:vector-media-playback-buttons

This button set was designed and created by Matt Gentile (Site Creator).
Resale or Re-distribution of this icon set is forbidden!

Download This File!

Custom CSS Button Sprite

promo2.jpeg

Here is a huge freebie that will be extremely useful for web developers and graphic designers. This is a custom designed CSS3 styled button sprite. For the definition of an "image sprite" please refer to Wikipedia's definition of Sprite (computer graphics).

This download is a .zip file that includes a Read Me file, a promotion image, promotion thumbnail, very large .png image that contains an already made "Download Now!" text inside the button area. Also comes with a .PSD file for people that own Photoshop, and a .XCF file for people that have Gimp. The Photoshop and Gimp files can be used to re-color, and edit completely. This is licensed under the Creative Commons Attribution 3.0 License so you are free to edit this as long as this work is linked back and given all credit to Icondeposit.com and the graphic designer Matt Gentile. It must be linked back to this page.

This work also comes with an already designed CSS stylesheet for the buttons, you will just need to customize it how your site is configured. If you do not know how to use these buttons on your site then please feel free to contact us.

If you would like to use the big download button on your site then here is the CSS code for it:

/* CSS code designed by Matt Gentile - Creator of Icondeposit.com */
.download_button {
    width: 492px;
    height: 120px;
    background: transparent url(images/downloadnowspriteback492.png) 0 0px no-repeat; /* When not hovered over */
}
.download_button:hover {
    width: 492px;
    height: 120px;
    background: transparent url(images/downloadnowspriteback492.png) 0 -121px no-repeat; /* When hovered over */
}
.download_button:active {
    width: 492px;
    height: 120px;
    background: transparent url(images/downloadnowspriteback492.png) 0 -243px no-repeat; /* When you press down on the icon or the icon is activated (clicked on) */
}

Download This CSS Button!

Top 20 Free Amazing JQuery Plugins

This list of jquery plugins is in no specific order, it's just our pick of the Top 20 free amazing JQuery plugins from across the internet. It features everything from login and contact forms, to image and content sliders. Enjoy!

1. Animated Content Menu With JQuery

amconten%20menu.png

View Code/ Download

2. Creating a Facebook-like Registration Form with JQuery

fblikerg%20form.png

View Code/Download

3. How to Make Your Own Twitter Timeline

twittertimeline.png

View Code/Download

4. Beautiful Slide Out Navigation

slideout%20nav.png

View Code/Download

5. Shutter Effect with Canvas and jQuery

shutter%20effect.png

View Code/Download

6. Flicker Powered Slide Show

fpslide%20show.png

View Code/Download

7. How to make a Rotating Billboard System using JQuery and CSS

rbbsystem.png

View Code/Download

8. Fullscreen Gallery with Thumbnail Flip

gallery.png

View Code/Download

9. Website Tour with jQuery

webtour.png

View Code/Download

10. Ajax based Shopping Cart JQuery Plugin

shoppingc.png

View Code/Download

11. Speeding Up Google Analytics times with a JQuery Plugin

analytics.png

View Code/Download

12. Animated Page Scroll With JQuery

jqscroll.png

View Code/Download

13. Quick Feedback form with PHP and JQuery

Quick%20Feedback.png

View Code/Download

14. JQuery Cross Browser Right Click Vertical Menu

right%20click.png

View Code/Download

15. Sprite Up the Web

sprite%20up%20the%20web.png

View Code/Download

16. Simple Lava Lamp Menu Tutorial with jQuery

lavalamp%20menu%281%29.png

View Code/Download

17. Create a Realistic Hover Effect With jQuery

hoverreflect.png

View Code/Download

18. Fancy Thumbnail Hover Effect w/ jQuery

designb.png

View Code/Download

19. Facebook Style Footer Admin Panel Part 2

fbsap.png

View Code/Download

20. Create an amazing music player using mouse gestures & hotkeys in jQuery

mplayer.png

View Code/Download

Blue Ribbon Website Template

mytemplate.png

As mentioned before in the early development stage of our site, we will be creating tons of website templates, website specific backgrounds and tons more! So to start off this design extravaganza of website and website background templates, here is our very first website specific background template that can be used for any website.

This Download(.zip) includes the following:

  • Photoshop .psd template
  • Gimp .xcf template
  • Read me .txt File
  • "Blue Ribbon" .png promotion image

How to use this on your website?

Make sure you center the background to the top center of the image. Once centered you then have to make the #content-wrap on your site 200px from the top. Lastly, you then have to make the with of your content no larger than 960px in width! Now your all set to customize your website, with a Unique customizable background image to go with it, Enjoy!

Download This Website Background Template!

*Note: you need either GIMP 2.6 or Adobe Photoshop to view and customize this template.

New Wikidot Rating Module CSS Coding

Wondering how we changed our Wikidot rating module to this one below?…

rating: +1+x

To start off lets head over to your site manager to get this specific rating module to work properly. Click the "Page Ratings" link on the "Manage Site" side bar like so…

ratinginfo1.png

Next, scroll down to the default rating style selection table. Lets just start out with the _default category rating selections, but make sure all the categories that you have rating modules on is the same as the _default category for this to work right…

ratinginfo2.png

Make sure the "Type" is selected to "+ only"! As soon as we customize it for the "rate-down" class we will post another tutorial but for now please select "+ only" for this to work right…

ratinginfo3.png

Lastly here is the wonderful CSS override so we can get the style of it like this one. You may style your own but this is how we made our CSS code for it. Use this code as a template, also link back to this blog post if you are going to use it.

Here is the code…

/*
- Rating CSS override -- This is to be linked back to this post if used elsewhere 
- Coding by Matt Gentile - Creator of Icondeposit.com
- Thumbs up icon by visual-blast.com
*/
 
.page-rate-widget-box .rateup a {
    position: relative;
    background: transparent url(https://www.icondeposit.com/local--files/dev:wikidot-rating-module-design-pack/thumbs_up_22x22.png) 0 0 no-repeat !important ;
    width: 22px !important;
    height: 22px !important;
    color: transparent !important;
    border: none !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow:  none;
    top: -5px !important;
    text-shadow: none !important;
    left: -65px;
}
.page-rate-widget-box .rate-points { 
    position: relative;
    height: auto;
    padding: 5px 10px;
    font: bold 12px Arial, sans-serif;
    border-radius: none !important;
    border: none !important;
    color: #666 !important;
    margin: 0 5px;
    -webkit-box-shadow: none !important;
    background: none !important;
    text-shadow: none !important;
}
.page-rate-widget-box .rateup a:hover {
    background: transparent url(https://www.icondeposit.com/local--files/dev:wikidot-rating-module-design-pack/thumbs_up_22x22.png) 0 0 no-repeat !important;
    color: transparent !important;
    border: none !important;
    box-shadow:  none;
    cursor: pointer;
    content: none !important;
    border-radius: none !important;
}
.page-rate-widget-box .rateup a:active {
    position: relative;
    top: -4px !important;
    margin-left: 6px !important;
    background: transparent url(https://www.icondeposit.com/local--files/dev:wikidot-rating-module-design-pack/thumbs_up_22x22.png) 0 0 no-repeat !important;
    color: none !important;
    border: none !important;
    box-shadow:  none;
}
.page-rate-widget-box {
    position: relative;
    color: none !important;
    padding: 0px 10px;
    font-size: 1.1em;
    border-radius: none !important;
    border: none !important;
    background-color: transparent !important;
    text-shadow: none !important;
    width: 70px !important;
    overflow: hidden !important;
    text-align: right !important;
    border-bottom: 1px solid #cecece !important;
    text-align: center !important;
}
.page-rate-widget-box a {
    padding: 3px 10px;
    background-color: transparent !important;
    text-shadow: none !important;
    color: none;
}
#prw54353.number {
    color: #2191d1 !important;
    display: inline !important;
    font-size: 225%;
}
.page-rate-widget-box .rate-points {
    color: transparent !important;
    display: inline;
    overflow: hidden !important;
    text-align: right;
    left: -53px;
}

Glass Social Icon Set Release

SOCIALGLASSPROMO.png

This is our latest icon set design! We also made a .psd file for the complete icon set template so you can make alternate versions of this icon set with ease. There was a .xcf file added as well for people that have GIMP. We strongly recommend using dark backgrounds with this icon set. This is only because it was meant for dark backgrounds.

The lightest background color allowed for this icon set is the (hex color number) #303030. As we were designing our sites background image, we created the icons at the same time. That's why this set is meant for darker backgrounds. This icon set looks wonderful with the background color #151515.

  • This icon set is licensed under the Creative Commons Attribution 3.0 Liscense.
  • If you would like to use this icon set in a blog post or more then link back to this blog post, Not the Download link.
  • Re-Sale or Re-Distribution is prohibited!
  • This icon set download is NOT to be hosted off another site other than Icondeposit.com.

Download Our Icon Set!

Copyright © 2011-2015 Icon Deposit - All rights Reserved