Shop Mobile More Submit  Join Login
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 )
:icontwigiehh:
Twigiehh Featured By Owner 3 days ago  Hobbyist Digital Artist
I don't get how to customize the progress bar it, you get what I mean?
and on the button there is a little box with a arrow in how can that be removed?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 3 days ago   Digital Artist
You can read on how to customize the progress bar size check out the description here: Pastel progress bars (custom widgets)

You need to write #donate instead of URL that you have in the button, see the example in tutorial.
Reply
:iconhedwig81:
Hedwig81 Featured By Owner 5 days ago  Hobbyist Digital Artist
Hey, I'm a bit of a coding noob, but I followed the template and for some reason, nothing will show up under the bar?
This is the code I've got, any idea where I screwed up? Thanks

code:
< div class="popup2-moremenu">< div class="floaty-boat">< img src="fc01.deviantart.net/fs71/i/201…">< /div>< div class="gr-box gr-genericbox">< span class="smbutton-purple popup2-clear">< div align="center">< b>PLEASE DONATE< /b>< /div>< /span>< div class="ctube ch">< i class="i">< /i>< div class="popup2-moremenu">< div class="floaty-boat">< br/>< img width="300" align="left" height="34" src="fc02.deviantart.net/fs71/f/201…"/>< /div>< /div>< /div>< /div>< /div>< /div>< small>69 / 6969< /small>< br/>< br/>: bigthumb556676532:< div align="center">< div class="thumb-holder">< div class="c">< a class="smbutton smbutton-white donate" href="#donate">< span> donate : points: here!< /span>< /a>< /div>

I added spaces so it would show up, too :)
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 5 days ago   Digital Artist
Too many </div>s after the progress bar :P
pasted.co/5b82d5b9
Reply
:iconhedwig81:
Hedwig81 Featured By Owner 2 days ago  Hobbyist Digital Artist
Hah, thanks! 
Reply
:iconxtickie-tockx:
xTickie-Tockx Featured By Owner Aug 21, 2015
how do you make the background repeat? ;;;
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 21, 2015   Digital Artist
You can't. You need to make very long image :P
Reply
:iconxtickie-tockx:
xTickie-Tockx Featured By Owner Aug 21, 2015
ahhh that sucks oh okay thank you ;;w;
Reply
:iconmem-schuriscloa:
mem-schuriscloa Featured By Owner Aug 18, 2015  Professional Digital Artist
:D Oo neat, thank you.  u 3 u 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 19, 2015   Digital Artist
:)
Reply
:iconartnote:
ArtNote Featured By Owner Aug 18, 2015  Hobbyist Digital Artist
ehm it seems that my donation button -I mean donating doesn't work, one commissioner couldn't donate and I tried it once with my little sister's account after redoing the code, but I can't figure out what's wrong, I made a screenshot of it: Html Donation Box sorry if I'm bothering|
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 18, 2015   Digital Artist
You need to put "donate" in the <a class="smbutton smbutton-wide smbutton-curvy...."> class :P

<a class="smbutton ........ smbutton-wide smbutton-curvy donate" href="#donate">
Reply
:iconartnote:
ArtNote Featured By Owner Aug 18, 2015  Hobbyist Digital Artist
ah it works! thank you very much! ^ v ^
Reply
:iconthe-pegasus-katja:
the-pegasus-katja Featured By Owner Aug 17, 2015  Hobbyist Digital Artist
this really helped me! thank you for making this! :meow:
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 17, 2015   Digital Artist
:hug:
Reply
:iconyamipingu:
YamiPingu Featured By Owner Edited Aug 16, 2015  Hobbyist Digital Artist
eeeee thanks so much ;u;

is there anyway i can get this to work in a custom box instead of a donation box?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 17, 2015   Digital Artist
The progress bar will be looking like here only if you're gonna have Donate widget on your page, and the button will not work but you can use the Give Points link instead, for the donations :)
Reply
:iconyamipingu:
YamiPingu Featured By Owner Aug 17, 2015  Hobbyist Digital Artist
Sorry what? I'm kinda confused ;;
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 17, 2015   Digital Artist
If you're gonna paste th code from this tutorial to custom box, it won't work :P
Reply
:iconyamipingu:
YamiPingu Featured By Owner Aug 17, 2015  Hobbyist Digital Artist
Ahh, wait, I understand now. ;; So...for the donate button to work, do I replace donate with givepoints?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 17, 2015   Digital Artist
Yes; actually, you replace the

a href="#donate"

with

a href="http://yamipingu.deviantart.com/?givepoints"

;)
Reply
:iconyamipingu:
YamiPingu Featured By Owner Aug 17, 2015  Hobbyist Digital Artist
Thank you! but it's not showing who donated... ;-;
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 17, 2015   Digital Artist
Yes, only in Donate you have this option.
Reply
(1 Reply)
:iconfussyfeline:
FussyFeline Featured By Owner Aug 10, 2015  Hobbyist Traditional Artist
Hi there, sorry to bother, but I had finished mine awhile ago, and someone had decided to donate points to me.
Instead displaying the donors, it just continues to say no one has donated yet.
Forgive me if I did something wrong that can be easily fixed, but I can't seem to figure it out. Sweating a little... 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 11, 2015   Digital Artist
That's because you used ?givepoints link instead of #donate. :P It's described in the tutorial.
Reply
:iconfussyfeline:
FussyFeline Featured By Owner Aug 11, 2015  Hobbyist Traditional Artist
I've switched it back and forth from that, it didn't seem to work. I'll try again and ask a friend.

Thank you for responding. :)
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 12, 2015   Digital Artist
You also need to put "donate" to the "sm-button" thing as well, just check out the button code in teh tutorial ;)
Reply
:iconfussyfeline:
FussyFeline Featured By Owner Aug 15, 2015  Hobbyist Traditional Artist
Sorry, again the credits are still not working. This is the code I have.
< span class="smbutton-purple popup2-clear">< div align="justify">< div class="popup2-moremenu">< div class="floaty-boat">< img src="i62.tinypic.com/1zwhszm.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="fc08.deviantart.net/fs70/f/201…"/>< /div>< /div>< /div>< small>0/100< /small>< br/>< br/>
 < div align="center">< div class="thumb-holder">< div class="c">< a class="smbutton smbutton-blue smbutton-big smbutton-curvy" href="#donate">< span> Donate : points: here< /span>

Without the spaces.

Again I apologize for taking up your time.
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 15, 2015   Digital Artist
I told you that it's explained in the tutorial, you just need to add the "donate" word in the proper place in the code as in the tutorial. Here in the button code:
< a class="smbutton smbutton-blue smbutton-big smbutton-curvy donate" href="#donate">
Reply
:iconfussyfeline:
FussyFeline Featured By Owner Aug 15, 2015  Hobbyist Traditional Artist
Oh! Sweating a little...
I feel like an idiot right now... 
I didn't realize I needed to add another donate.
Thank you, the tutorial was much more helpful then any others, I usually don't ask questions, sorry about that!
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 15, 2015   Digital Artist
It's okay, just remember to read everything and then ask questions :lol:
Reply
:iconfussyfeline:
FussyFeline Featured By Owner Aug 12, 2015  Hobbyist Traditional Artist
Oh! Okay, that's what was giving me issues then, it was driving me nuts.
Reply
:iconlmclexi:
LMCLexi Featured By Owner Edited Aug 9, 2015  Hobbyist General Artist
I logged out of my account and looked at my donate widget to find that the red donate button is still there, just faded. Is there any way to fix it?
nevermind my question was answered in someone else's comment.
whoops
Reply
:iconninixshadow:
NinixShadow Featured By Owner Edited Aug 7, 2015  Student General Artist
Can you change the progress bar color length shorter? You know, the purple length? :?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 8, 2015   Digital Artist
Only when you will put the code for progress bar in the column :P Like for example here: 
*purchasable* dA profile code -Pastel wonder theme by UszatyArbuz
Reply
:iconninixshadow:
NinixShadow Featured By Owner Aug 8, 2015  Student General Artist
Okay, thank you~! :aww:
Reply
:iconnodakime:
Nodakime Featured By Owner Aug 4, 2015  Hobbyist Writer
Hi! After the last icon update, the orange icon is showing up in the top left hand corner of my donation's box even though I haven't changed any code at all. Do you know of any fixes that might get rid of it?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 5, 2015   Digital Artist
No. :shrug:
Same here. Looking like hideous pimple. I hate those new icons!
Reply
:icontrevenants:
Trevenants Featured By Owner Aug 5, 2015  Hobbyist Digital Artist
Yeah it's showing up on mine too ew, it looks really strange. I'm hoping it might just be a glitch that they haven't fixed since updating D':
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 5, 2015   Digital Artist
Don't know really. But I hate it :P
Reply
:iconartnote:
ArtNote Featured By Owner Edited Jul 31, 2015  Hobbyist Digital Artist
I'm sorry for bothering you since you're probably overflowed with comments about coding > v >| but I have a problem with the original donate button, I checked after logging out on deviantart if it didn't show but it looks the same as I see it (a bit transparant-ish like in the tutorial) I also checked on my mom's tablet apart from my computer since I didn't want to bother you with a question you must've heard so much already| I wanted to ask other users how they see it to be sure too but no one's online anyway again sorry > v < thank you for making this tutorial! ^ v ^ 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 31, 2015   Digital Artist
Only you and people who are not logged in will see this button :B
Reply
:iconartnote:
ArtNote Featured By Owner Aug 1, 2015  Hobbyist Digital Artist
AH now I feel really stupid  > v < Thank you very much! ^ v ^
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 2, 2015   Digital Artist
It's okay :)
Reply
:iconkakarigeikogirl:
KakariGeikoGirl Featured By Owner Jul 31, 2015  Student General Artist
This was extremely helpful, thank you very much^^
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 31, 2015   Digital Artist
:hug:
Reply
:iconxxartchemicalxx:
XxArtChemicalxX Featured By Owner Jul 25, 2015
Is It 900 px By 900 px?
Is That The Size?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 26, 2015   Digital Artist
The width is 900px, the height I make longer, like 2000p or something. :)
Reply
Add a Comment:
 
×




Details

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

Stats

Views
20,358 (14 today)
Favourites
1,943 (who?)
Comments
651
Downloads
86
×