Shop Mobile More Submit  Join Login
×




Details

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

Stats

Views
12,924 (24 today)
Favourites
1,394 (who?)
Comments
487
Downloads
54
×
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 )
:iconmuffinz01:
Muffinz01 Featured By Owner 1 day ago  Hobbyist Digital Artist
AHH this is really helpful :)
though on my page i can see a faint "donate" button  canyou?
and do you know how to stretch your bg url out to fit it??? ]]
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 19 hours ago   Digital Artist
The button is only visible for you :P

Um on the beginning where you have the code for background add width="100%", ex: <img src="http://fc02.deviantart.net/fs71/f/2014/250/6/b/bg_2_by_uszatyarbuz-d7y9it0.png" width="100%"></bocde> I think it should help.
Reply
:iconmuffinz01:
Muffinz01 Featured By Owner 19 hours ago  Hobbyist Digital Artist
Ah tyvm♥ for both making these tutorials and that:)

(( yea i figured that out a bit lol ;P ) ]]
Reply
:iconpainbowcrash:
PainbowCrash Featured By Owner 4 days ago  Hobbyist Digital Artist
This helped me out a TON! Thank you!!! :)
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 4 days ago   Digital Artist
No problem :)
Reply
:iconlovely9727855:
lovely9727855 Featured By Owner Feb 18, 2015  Student Digital Artist
Something is messed up with my button..

I'll Note you my code if you want
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 19, 2015   Digital Artist
Sure. But i can't check it out niw because i have serious problems with my dA account and i can use it only on my phone now..
Reply
:iconlovely9727855:
lovely9727855 Featured By Owner Feb 19, 2015  Student Digital Artist
Maybe i'll just comment the code?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 20, 2015   Digital Artist
No, the dA will eat some of it :P
Reply
:iconlovely9727855:
lovely9727855 Featured By Owner Feb 20, 2015  Student Digital Artist
Oh, aaaaaaaaaaaaa dang it
Reply
:icondazzling-dream:
Dazzling-Dream Featured By Owner Feb 15, 2015
How to strech it?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 15, 2015   Digital Artist
Use the fullview of the background. If it's smaller than 900 pix wide, you can use <img src="ulr background" width="900"/> but it will look awful :P
Reply
:iconcapricciosio:
Capricciosio Featured By Owner Feb 12, 2015  Hobbyist Digital Artist
So my donate button is being awkward--

Untitled by Capricciosio  
I want the button to be small, and the text to be centered.
Pretty sure I messed up coding somewhere, but I have no idea where.
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 13, 2015   Digital Artist
Me neither, but I think you missed one </div> somewhere before the button code :P
Reply
:iconcapricciosio:
Capricciosio Featured By Owner Feb 18, 2015  Hobbyist Digital Artist
Huh.
Couldn't figure out where it went, so I'm probably just gonna leave it like that ^^;
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 19, 2015   Digital Artist
:dummy: i can't check it out now because i have sone problems with my account..
Reply
:iconcapricciosio:
Capricciosio Featured By Owner Feb 20, 2015  Hobbyist Digital Artist
Ah, I see!
Thanks anyways! 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 21, 2015   Digital Artist
But I can do it now XD Send me the code via note for example? Just use the text hosting site.
Reply
:iconarichy:
Arichy Featured By Owner Feb 11, 2015  Hobbyist General Artist
:icontrollfaceplz: can i ask it again? :lol: 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 12, 2015   Digital Artist
STARE SCROLLSTARE SCROLLSTARE SCROLLSTARE SCROLLSTARE SCROLL 
Reply
:iconarichy:
Arichy Featured By Owner Feb 12, 2015  Hobbyist General Artist
:giggle:
Reply
:iconthe-gaywolf:
the-gaywolf Featured By Owner Feb 11, 2015  Hobbyist Digital Artist
works great, thank you very much :)
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 11, 2015   Digital Artist
:huggle:
Reply
:iconlana-h:
Lana-H Featured By Owner Feb 11, 2015  Hobbyist Digital Artist
Can you check out my profile? there are 2 donate buttons
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 11, 2015   Digital Artist
I can't find the second donate button :P
Reply
:iconforestfire7890:
ForestFire7890 Featured By Owner Feb 7, 2015  New member Hobbyist Digital Artist
Looks good to me, if I had premium membership. Hehe
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 7, 2015   Digital Artist
:D
Reply
:iconforestfire7890:
ForestFire7890 Featured By Owner Feb 7, 2015  New member Hobbyist Digital Artist
too baddie for me! :D
Reply
:iconfluffylemoncake:
FluffyLemonCake Featured By Owner Edited Feb 4, 2015  Student Traditional Artist
I can't get it to work v_v

EDIT: Never mind I was just being dumb ^ ^;
Reply
:iconfoxy-boo-adopts:
Foxy-Boo-Adopts Featured By Owner Feb 3, 2015  New member Hobbyist Digital Artist
Hi there, my donation button is not working. UvU
Is there a way we can fix it?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 4, 2015   Digital Artist
It's working, I checked :)
Reply
:iconfoxy-boo-adopts:
Foxy-Boo-Adopts Featured By Owner Feb 5, 2015  New member Hobbyist Digital Artist
(DIfferent person talking here, this is a collab account OuO ) Yeah idk what the problem would be, i suspect that was binti or foxy 
Reply
:iconrainbow-kitten-candy:
Rainbow-Kitten-Candy Featured By Owner Edited Feb 3, 2015  New member
if i do 845 x 1200 will it still work?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 4, 2015   Digital Artist
It will :)
Reply
:iconrainbow-kitten-candy:
Rainbow-Kitten-Candy Featured By Owner Feb 4, 2015  New member
ok good
Reply
:iconaglassofbluelemonade:
aglassofbluelemonade Featured By Owner Feb 3, 2015  Hobbyist General Artist
augh i cant get it to look right im confused :P
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 3, 2015   Digital Artist
What do you mean?
Reply
:iconaglassofbluelemonade:
aglassofbluelemonade Featured By Owner Feb 3, 2015  Hobbyist General Artist
i candt get it
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 4, 2015   Digital Artist
If you don't tell me what is going on, I can't help you :shrug:
Reply
:iconlittlechewrrie:
LittleChewrrie Featured By Owner Feb 2, 2015  Hobbyist Digital Artist
my aqua progress bar doesnt work ; ;
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 2, 2015   Digital Artist
What do you mean?
Reply
:iconlittlechewrrie:
LittleChewrrie Featured By Owner Feb 2, 2015  Hobbyist Digital Artist
yes for examble y wrote "1000/2000" but the bar doesn't work with  the points that others donate me
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 2, 2015   Digital Artist
You have to change the width manually. Follow this for the tutorial : Pastel progress bars (custom widgets)
Reply
:iconlittlechewrrie:
LittleChewrrie Featured By Owner Feb 2, 2015  Hobbyist Digital Artist
yes but it doesn't work :c and now i copy your and changed it but the bar still in the same (doesn't show the points added  that others donate me )
and when i want to change the color of the bar it totally changes
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 2, 2015   Digital Artist
It's working fine. You have to change the width="300" for another number here: < img width="300" align="left" height="34" src="htt p://fc01.deviantart.net/fs71/f/2014/186/1/5/purple_by_uszatyarbuz-d7pasja.png"/>
Reply
:iconlittlechewrrie:
LittleChewrrie Featured By Owner Feb 2, 2015  Hobbyist Digital Artist
thanks :D
Reply
: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   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   Digital Artist
You didn't, I magically checked the code. :D
Reply
Add a Comment: