Shop Forum More Submit  Join Login
Donate widget customizing tutorial by UszatyArbuz Donate widget customizing tutorial by UszatyArbuz

It will NOT work for Non-Core members!

Thank you all for the favorite in advance!:rose:

Premium Content contains a template code as well, but a purchase option is considered more as a support. No need to "Purchase" to use it!


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
Colored Text (Custom box) - More colors
Pastel progress bars (custom widgets)

Thanks for help SabakuNoShi and Positic :heart:


My other dA resources:
Pastel progress bars (custom widgets) by UszatyArbuz Custom box: Super condensed,responsive devID (CSS) by UszatyArbuz Custom box: Responsive Four columns devID (CSS) by UszatyArbuz Custom box: Tabs devID (CSS) by UszatyArbuz dA profile: Cute fox theme by UszatyArbuz
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 )
:iconalesuyin:
AlesuYin Featured By Owner 1 day ago  New Deviant Hobbyist Digital Artist
Thank you, it's pretty usefull
Reply
:iconnightmaredesign-yu:
NightmareDesign-Yu Featured By Owner Sep 13, 2018
Thank you <3
Reply
:iconfreyedkail:
FreyedKail Featured By Owner 6 days ago  Hobbyist Digital Artist
I believe I've got mine working,  could you check the button for me please?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 6 days ago   Digital Artist
In <a class="smbutton smbutton-purple  donate" href="#donate"> remove the extra space, so it should be:

<a class="smbutton smbutton-purple donate" href="#donate">

That's al I can see right now ^^;
Reply
:iconfreyedkail:
FreyedKail Featured By Owner 6 days ago  Hobbyist Digital Artist
How about now?

It shows up fine on my side.
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 6 days ago   Digital Artist
It works now :)
Reply
:iconfreyedkail:
FreyedKail Featured By Owner 6 days ago  Hobbyist Digital Artist
Thank you!
Reply
:iconfreyedkail:
FreyedKail Featured By Owner 6 days ago  Hobbyist Digital Artist
Huh Oki doki, thank you. It shows up fine on mine I'll check it out
Reply
:iconkousie:
Kousie Featured By Owner Sep 21, 2018  Student Digital Artist
Hello, thank you so much for this, and can you check if my button is working?
It seemed like it wasn't but I can't tell for sure.
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Sep 22, 2018   Digital Artist
It works :B
Reply
:iconkousie:
Kousie Featured By Owner Sep 22, 2018  Student Digital Artist
Thanks!
Reply
:iconmochitila:
mochitila Featured By Owner Sep 6, 2018  Student General Artist
I tried this, can you see if my button works?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Sep 6, 2018   Digital Artist
It works :)
Reply
:iconmochitila:
mochitila Featured By Owner Sep 7, 2018  Student General Artist
Thank you!
Reply
:iconsunbaemins:
SunbaeMins Featured By Owner Edited Sep 2, 2018  Student Digital Artist
mine looks really- weird ;w; i don't know why tho

✧・゚: *✧・゚:* "다른 사람에게 의지하는건 끊임없이 실망만 가져다 줄 것." *:・゚✧*:・゚✧

<img width="300" align="left" height="34" src="fc09.deviantart.net/fs71/f/201…"/>
2000 / 10000

☆.。.:* thank you for visiting my page! every small comment, fav, watch or donation helps me to get better and improve .。.:*☆
 

^ here's my code
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Sep 2, 2018   Digital Artist
This can be used by Core members only!
Reply
:iconsunbaemins:
SunbaeMins Featured By Owner Sep 2, 2018  Student Digital Artist
oH right! i completely forgot ;;
thanks again!
Reply
:iconadrianecasini:
AdrianeCasini Featured By Owner Aug 27, 2018
I guess my button Isn't working ;-; I personalized it, maybe was that?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 27, 2018   Digital Artist
But you didn't added a button at all ^^;
Reply
:iconadrianecasini:
AdrianeCasini Featured By Owner Aug 27, 2018
I did before... but my computer messed up and I lost all the coding I had worked the entire afternoon!
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 27, 2018   Digital Artist
Why in your button URL do you have such weird address? yuo suppose to add just #donate as the URL.

<a class="smbutton-red commission-rating-total-container purchasable-tooltip" href="https://www.deviantart.com/users/login?ref=https%3A%2F%2Fwww.deviantart.com%2Fadrianecasini"><span> Click Here to Support Me</span></a>

should be -> <a class="smbutton-red commission-rating-total-container purchasable-tooltip" href="#donate"><span> Click Here to Support Me</span></a>


and then you also need to add additional "donate" in the button type, so:

<a class="smbutton-red commission-rating-total-container purchasable-tooltip donate" href="#donate"><span> Click Here to Support Me</span></a>

This should work in THEORY, but I didn't tested the tooltip buttons with this code. The ones I have used in tutorial works for sure and have different sies, too.

Reply
:iconadrianecasini:
AdrianeCasini Featured By Owner Aug 27, 2018
The #donate wasnt working! but i'll try yours
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 27, 2018   Digital Artist
Maybe it has to be with different button code. As i said, I haven't tested the tooltip buttons ;D and you need to add additonal "donate" to the button code, too.
Reply
:iconadrianecasini:
AdrianeCasini Featured By Owner Aug 27, 2018
'-' the donate word you mean? it influences the coding work or not? (sorry i suck at programming)
Reply
(1 Reply)
:iconm-ukki:
M-ukki Featured By Owner Aug 21, 2018
any way to keep the donation-bar visible? :<
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 22, 2018   Digital Artist
The original one? You could cut out a part of the background where the bar is placed (so on top kind of), so it's peeking from the under it ;D
Reply
:iconm-ukki:
M-ukki Featured By Owner Aug 22, 2018
AHH, nice idea, thank youu ;V;
Reply
:iconsolrac0:
Solrac0 Featured By Owner Aug 19, 2018  Student Digital Artist
Can you check if my button works please? Thanks ;w;
Also, could you tell me if you can still see red button? I know you said others can't but I went on a different browser and I could still see it.

Sorry to bother you ;w;
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 19, 2018   Digital Artist
It works, red buttons is showing for yo and when yo log out - I never heard it's visible for logged in people on a certain browser :P
Reply
:icondwaginis3rr0r418:
DwaginIs3Rr0r418 Featured By Owner Aug 18, 2018  Hobbyist Digital Artist
Gonna drop a question here and ask, is there a way to centre the content section of the box?? I can't get it to centre aa
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 19, 2018   Digital Artist
<div align="center"> on the very beginning of where you suppose to put your content doesn't work?
Reply
:icondwaginis3rr0r418:
DwaginIs3Rr0r418 Featured By Owner Aug 19, 2018  Hobbyist Digital Artist
Sorry, I sorted it out- I had broken the code but fixed it by pasting part of the blank code so it reset and I worked on it from there :D
Reply
:iconm-ukki:
M-ukki Featured By Owner Aug 4, 2018
Dumb question and I'm sure the answer is "you can't"
but is there a way to hide the donation bar without Core? x'D
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Aug 4, 2018   Digital Artist
No, sorry :B
Reply
:iconm-ukki:
M-ukki Featured By Owner Aug 5, 2018
Sad 8( ty! <3
Reply
:iconyuuena:
Yuuena Featured By Owner Jul 31, 2018
Spytam, jeśli nie masz nic przeciwko, tekst na temat przycisku darowania jest pogrubiony, jak to zrobić? Nie pogrubiony?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 31, 2018   Digital Artist
Spróbuj podstawić </b> tuż przed tekstem ;D czasem niestety nie da się tego ominąć na dA ^^;
Reply
:iconyuuena:
Yuuena Featured By Owner Jul 31, 2018
Nie ma problemu, Dzięki tak czy inaczej! ^ U ^
Reply
:iconpanda-production:
Panda-production Featured By Owner Jul 26, 2018  Professional Photographer
Bonjour,
Je vous remercie beaucoup pour votre travail et de le partager.

J'ai installé votre code, pouvez-vous le tester ? Merci d'avance
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 26, 2018   Digital Artist
Sorry I don't speak French. Could you reply in English perhaps?
Reply
:iconpanda-production:
Panda-production Featured By Owner Jul 26, 2018  Professional Photographer
Traduction sur Google 

Hello,

Thank you very much for your work and share it.

I installed your code, can you test it?

A small question: Is there a code to put down the names of the donors

Thank you very much
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 29, 2018   Digital Artist
The button doesn't work - you need to put it in the Donate widget :P
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jun 6, 2018   Digital Artist
Please REPLY TO THIS COMMENT so it will stay on top!
:redalert: If you have a question, see if it's answered below first!! :redalert:


Bullet; Red How I can get rid of the transparent red button? / It's showing additional button.
Bullet; Green You can't. Button is visible only for you and when you log out.

Bullet; Red How to change color of the button?
Bullet; Green Read last section of tutorial!

Bullet; Red How to change font color?
Bullet; Green Follow links for font: Colored Text or Colored Text (Custom box) - More colors

Bullet; Red How to get rid of Core Member Symbol?
Bullet; Green You can't, tutorial was made before the change for the star symbols for core.

Bullet; Red Can you check if my button works? / My button doesn't work..
Bullet; Green Please REPLY to this comment!

Bullet; Red Progress bar shows different amount of points than in my my point balance!
Bullet; Green It's just an IMAGE, you have to change it manually (check out section 3 of the tutorial)

Bullet; Red How do I edit color of progress bar?
Bullet; Green Check out this link: Pastel progress bars (custom widgets)

Bullet; Red Can I add image instead of the button? / How to make an image work as a Donate button?
Bullet; Green You can either 1) Add an image in standard HTML with a link to yourusername.deviantart.com/?g… link, but your Donators won't be appearing on the bottom of the widget; or 2) paste the image into the button instead of the "Donate!" text on the button.
Reply
:iconshamanly:
Shamanly Featured By Owner Jul 27, 2018  Hobbyist General Artist
Hello! I'm having a problem where I try to add my code outside of the text area box but it won't show up. Do you know any way I can fix this..? D:
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 27, 2018   Digital Artist
I think you haven't closed the boxes properly, try to add several </div> s in the end, before adding button code :P
Reply
:iconshamanly:
Shamanly Featured By Owner Jul 27, 2018  Hobbyist General Artist
I tried this and it still doesn't seem to work :C
Reply
:iconbijoublue:
BijouBlue Featured By Owner Jul 14, 2018  Hobbyist Traditional Artist
Hello!
could you see if my code working?
thank you for your time!
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 15, 2018   Digital Artist
It works :)
Reply
:iconbijoublue:
BijouBlue Featured By Owner Jul 15, 2018  Hobbyist Traditional Artist
Thank you!
Reply
Add a Comment:
 
×
50 Purchase Purchased Download Purchase Soon
238 bytes ZIP File. Includes
Template Code
Add Your Rating! Thanks for Rating! Change Your Rating
Download PNG 867 × 5365




Details

Submitted on
July 6, 2014
Image Size
905 KB
Resolution
867×5365
Link
Thumb

Stats

Views
60,638 (6 today)
Favourites
4,012 (who?)
Comments
1,744
Downloads
220