Shop Mobile More Submit  Join Login
×




Details

Submitted on
July 6, 2014
Image Size
891 KB
Resolution
900×5335
Link
Thumb
Embed

Stats

Views
11,837 (34 today)
Favourites
1,312 (who?)
Comments
441
Downloads
51
×
Donate widget customizing tutorial by UszatyArbuz Donate widget customizing tutorial by UszatyArbuz

It will NOT work for non-premium members!

Thank you all in advance for the favorites! Unfortunately because of lack of time I cannot thank you all personally Pixel Rose 



YES, THE ORIGINAL BUTTON WILL BE VISIBLE ONLY FOR YOU! Stop asking and read the tutorial!



Code used in the tutorial (you can use my background if you want, I don't mind):

<div class="popup2-moremenu"><div class="floaty-boat"><img src="http://fc01.deviantart.net/fs71/f/2014/187/1/0/bg_by_uszatyarbuz-d7pfme9.jpg"></div><div class="gr-box gr-genericbox"><b>In need of points!</b><div class="ctube ch"><i class="l"></I><div class="popup2-moremenu"><div class="floaty-boat"><br/><img width="300" align="left" height="34" src="http://fc01.deviantart.net/fs71/f/2014/186/1/5/purple_by_uszatyarbuz-d7pasja.png"/></div></div></div><small>200/255</small><br/><br/>I have to buy more cookies.
<div align="center"><div class="thumb-holder"><div class="c"><a class="smbutton smbutton-purple donate" href="#donate"><span> Donate :points: here</span></a></div>

Template:

<div class="popup2-moremenu"><div class="floaty-boat"><img src="YOUR-BG-URL"></div><div class="gr-box gr-genericbox">HEADER<div class="ctube ch"><i class="l"></I><div class="popup2-moremenu"><div class="floaty-boat"><br/><img width="300" align="left" height="34" src="http://fc01.deviantart.net/fs71/f/2014/186/1/5/purple_by_uszatyarbuz-d7pasja.png"/></div></div></div><small>YOUR / POINTS</small><br/><br/>YOUR-CONTENT
<div align="center"><div class="thumb-holder"><div class="c"><a class="smbutton smbutton-purple donate" href="#donate"><span> BUTTON-TEXT</span></a></div>

Tutorials mentioned:
Font colors | More font colors | Progress bar explanation & more colors | Buttons
Colored Text by SimplySilent Colored Text (Custom box) - More colors by CypherVisor Pastel progress bars (custom widgets) by UszatyArbuz Wide Curvy buttons by CypherVisor

Thanks for help SabakuNoShi and PicsByI :heart:

I'm doing commissions for icons, dA resources and coding! Check them out here: fav.me/d4wcpc2

Or visit my gallery to see other dA related resources: uszatyarbuz.deviantart.com/gal…

Add a Comment:
 

Daily Deviation

Given 2014-07-25
Donate widget customizing tutorial by UszatyArbuz
UszatyArbuz takes something so complicated for the average non-CSS coder like me and makes it very easy to understand and apply! This tutorial is well-written, well-organized and pleasing to the eye, and overall executed nicely. I will be sure to recommend this to anyone who wants to add some personality to their donation box.

Also suggested by Windklang ( Suggested by Inemiset and Featured by ginkgografix )
:iconbeiipaws:
BeIIPaws Featured By Owner Jan 23, 2015  Hobbyist General Artist
I've coded in a new button for the donate box, but i can't seem to get the link working to donate. I've used the coding template that you provided, but it still doesn't want to link right - are there any tips you could give me on how to get this working?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
you didn't put the world "donate" in the code of the button. so it should be like:
<a class="smbutton smbutton-white smbutton-wide smbutton-curvy donate" href="#donate">
Reply
:iconbeiipaws:
BeIIPaws Featured By Owner Jan 24, 2015  Hobbyist General Artist
thanks ^o^ I had the donate but i think another bit of it was slightly messed up - it's fixed now though ^o^
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
You didn't, I magically checked the code. :D
Reply
:iconbeiipaws:
BeIIPaws Featured By Owner Jan 24, 2015  Hobbyist General Artist
ah okay.... oooh i see, i only had 1 donate in there before, not too.... huh.... i'm a dummy ^^;
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
:D
Reply
:icongreenbolt-ponyartist:
GreenBolt-PonyArtist Featured By Owner Jan 23, 2015  Hobbyist Digital Artist
I did it, but how do I remove that old donate button??!
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 23, 2015  Hobbyist Digital Artist
THE ORIGINAL BUTTON WILL BE VISIBLE ONLY FOR YOU! :P
Reply
:icongreenbolt-ponyartist:
GreenBolt-PonyArtist Featured By Owner Jan 23, 2015  Hobbyist Digital Artist
I know!! But, in the tutorial you covered it with the new button. I cant seem to do that :/
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 23, 2015  Hobbyist Digital Artist
I didn't covered it. Did you really read the tutorial? Th background hides the default button.
Reply
:icongreenbolt-ponyartist:
GreenBolt-PonyArtist Featured By Owner Jan 23, 2015  Hobbyist Digital Artist
*sigh* yes I did, I just read the parts that I needed. thanks anyway ;-;
Reply
:iconslayingallhumans:
slayingallhumans Featured By Owner Jan 23, 2015  Hobbyist Traditional Artist
I have a question regarding this. The background I am using for my donation widget it over 900 pixels wide, but it still has the border like it does on your tutorial. How do I change that?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 23, 2015  Hobbyist Digital Artist
Whne you're using image from stash, you need to make sure it's full viewed and then take the url address. :)
Reply
:iconslayingallhumans:
slayingallhumans Featured By Owner Jan 23, 2015  Hobbyist Traditional Artist
Ahh that makes sense. Thank you.
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 23, 2015  Hobbyist Digital Artist
:D
Reply
:iconslayingallhumans:
slayingallhumans Featured By Owner Jan 23, 2015  Hobbyist Traditional Artist
:)
Reply
:iconfluffpluff:
FluffPluff Featured By Owner Jan 20, 2015  Hobbyist General Artist
is there a way to make the font completely black?
i know that there's a code in one of the other tutorials you linked, but it looks bolded. 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 20, 2015  Hobbyist Digital Artist
It shouln't look bld if used right. try to add </b> on the beginning of the text ;)
Reply
:iconfluffpluff:
FluffPluff Featured By Owner Jan 20, 2015  Hobbyist General Artist
i think it might just be the coding of it?..
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 20, 2015  Hobbyist Digital Artist
I don't think so. :D
Reply
:icondawntheartist:
dawntheartist Featured By Owner Jan 18, 2015  Hobbyist Artist
i can't get it to work with the turquoise colour, help please ;u;
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 18, 2015  Hobbyist Digital Artist
The code was messed up, it should works now :)
Reply
:iconwolfcookiequeen:
WolfCookieQueen Featured By Owner Jan 17, 2015  Hobbyist Traditional Artist
I want to use the pastel progress bar but I still don't get how to change how much it's filled up xc
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 17, 2015  Hobbyist Digital Artist
Read the description here: Pastel progress bars (custom widgets) :)
Reply
:iconwolfcookiequeen:
WolfCookieQueen Featured By Owner Jan 17, 2015  Hobbyist Traditional Artist
I did read it
Am I supposed to change the "300"?
Because no matter how big or small I make the number it doesn't change
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 17, 2015  Hobbyist Digital Artist
Yes :)
That means that you messed up coding somewhere :D
Reply
:iconwolfcookiequeen:
WolfCookieQueen Featured By Owner Jan 17, 2015  Hobbyist Traditional Artist
Ok
Argghh I hate coding xD
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 17, 2015  Hobbyist Digital Artist
:D
Reply
:iconwolflover1086:
Wolflover1086 Featured By Owner Jan 16, 2015  Hobbyist General Artist
My donation bar will not go away??? 
Could I have some help?
Capture by Wolflover1086  
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 16, 2015  Hobbyist Digital Artist
What do you mean? You don't want the donate bar?
Reply
:iconwolflover1086:
Wolflover1086 Featured By Owner Jan 16, 2015  Hobbyist General Artist
Ah sorry the donation button the original one not the custom one. 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 16, 2015  Hobbyist Digital Artist
I wrote with the biggest letters it's possible in the description. The original one is visible only for you.
Reply
:iconwolflover1086:
Wolflover1086 Featured By Owner Jan 16, 2015  Hobbyist General Artist
ok so sorry but would I be able to get rid of the huge gap between the original button and the bottom of the custom area?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 16, 2015  Hobbyist Digital Artist
It is a way to do so when you use a bit different code, but then the progress bar will be as wide as the widget :P
Reply
:iconwolflover1086:
Wolflover1086 Featured By Owner Jan 16, 2015  Hobbyist General Artist
Ah damn so it'll probs look weird oh well thx for the help ;P
Reply
:iconninja27boss:
Ninja27boss Featured By Owner Jan 14, 2015  Hobbyist Traditional Artist
Um, is there anyway to have just the background, content, and the button? Taking away the bar? I've been trying for a while by deleting that piece of the code, but it also deletes my donation button.
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 15, 2015  Hobbyist Digital Artist
Delete:
<small><div class="ctube ch"><i class="l"></i><div class="popup2-moremenu"><div class="floaty-boat"> <br><img width="300" align="left" height="34" src="http://fc01.deviantart.net/fs71/f/2014/186/1/5/purple_by_uszatyarbuz-d7pasja.png"/> </div></div></div></small> :)
Reply
:iconninja27boss:
Ninja27boss Featured By Owner Jan 15, 2015  Hobbyist Traditional Artist
Omg thank you so much!! It worked! :happybounce:
Reply
:iconrololi:
Rololi Featured By Owner Edited Jan 11, 2015  Hobbyist General Artist
I tried using the Pastel broken progress bars
i tried just changing the URL code on the Template above but:
Hg by Rololi   

What code should i use?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 11, 2015  Hobbyist Digital Artist
Don't paste it in the progress bar, just paste it as a normal image. and don't use the progress bar code at all :)
Reply
:iconrololi:
Rololi Featured By Owner Jan 11, 2015  Hobbyist General Artist
I cant seem to get it Right im sorry :iconrazycryplz:

Where does the code for the progress bar start and end in the template, that i need to remove?
//Im sooo sorry for the trouble
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 11, 2015  Hobbyist Digital Artist
Delete this after "HEADER"
<div class="ctube ch"><i class="l"></I><div class="popup2-moremenu"><div class="floaty-boat"><br/><img width="300" align="left" height="34" src="http://fc01.deviantart.net/fs71/f/2014/186/1/5/purple_by_uszatyarbuz-d7pasja.png"/></div></div></div>
it's till the "your/points"

and instead of it, just paste the image form the broken bar :)
Reply
:iconrololi:
Rololi Featured By Owner Jan 11, 2015  Hobbyist General Artist
Omaigoodness thank you, it worked :iconrazycryplz: I felt like i was gonna cry// thank youuuuuu
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 11, 2015  Hobbyist Digital Artist
xD No problem :D
Reply
:iconrololi:
Rololi Featured By Owner Jan 11, 2015  Hobbyist General Artist
Omaigoodness thank you, it worked :iconrazycryplz: I felt like i was gonna cry// thank youuuuuu
Reply
:iconxxsapphire-cloudxx:
xxSapphire-Cloudxx Featured By Owner Jan 11, 2015  Hobbyist Digital Artist
how can i change the length of the bar?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 11, 2015  Hobbyist Digital Artist
It's in the description of this deviation:
Pastel progress bars (custom widgets) by UszatyArbuz
:)
Reply
:iconsunnybunny1199:
sunnybunny1199 Featured By Owner Jan 9, 2015  Hobbyist General Artist
How do I change the font color of the header and points amount, and how do I stretch out my background image? It's 1024×4578.
This is what it looks like so far: deviantART donate thing by sunnybunny1199
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 10, 2015  Hobbyist Digital Artist
For the font color, use one fo the tutorials provided in the description.
For the background, I guess you used the one from sta.sh? Make sure that you pasted the link to the FULL VIEW of backgroung or you will get the small one like here :)
Reply
:iconsunnybunny1199:
sunnybunny1199 Featured By Owner Jan 10, 2015  Hobbyist General Artist
Where do I put the code for the font color?
And with the background; thank you, it worked! :D
Reply
Add a Comment: