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 GinkgoWerkstatt )
:iconatara-parakitty:
Atara-parakitty Featured By Owner 4 days ago  Hobbyist General Artist
I just want to add an image (mostly just add an image) and change the donate button color but every time I try to do the code it come up kinda wrong
Reply
:iconatara-parakitty:
Atara-parakitty Featured By Owner 4 days ago  Hobbyist General Artist
wait nevermind
Reply
:iconmischiefur:
Mischiefur Featured By Owner May 10, 2019  Student Digital Artist
Is there a way I could do this but only with the donate button? I don't want the progress bar, just the BG and the button but can't manage to do it, whenever I take out the bar code the button also disappears :(
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner May 11, 2019   Digital Artist
Just add codes from step 2 and 6 :B
Reply
:iconeliya-elimelech12:
Eliya-Elimelech12 Featured By Owner Apr 14, 2019  New Deviant Hobbyist Digital Artist
thats so hard to make XD
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Apr 14, 2019   Digital Artist
Maybe because it's for Core members only :P
Reply
:iconeliya-elimelech12:
Eliya-Elimelech12 Featured By Owner Apr 14, 2019  New Deviant Hobbyist Digital Artist
Yea maybe
Reply
:iconwillow-the-wispz:
Willow-the-Wispz Featured By Owner Mar 31, 2019  Hobbyist Digital Artist
My button isn’t cutting off? Idk what I did but 
F3b5daf3-3c50-4957-90c6-ff391cc5da80 by Willow-the-Wispz
Here's the code:
986600c7-b3d9-4f5c-96fe-192cfb743d05 by Willow-the-Wispz
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Apr 4, 2019   Digital Artist
Possibly somewhere earlier there's not enough </div>s , but I see just a part of the code :B
Reply
:iconwillow-the-wispz:
Willow-the-Wispz Featured By Owner Apr 4, 2019  Hobbyist Digital Artist
Here is the full code ^^;
pastebin.com/8H4pSgTa
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Apr 14, 2019   Digital Artist
This should work!
Reply
:iconwillow-the-wispz:
Willow-the-Wispz Featured By Owner Apr 15, 2019  Hobbyist Digital Artist
It does!! Tysm! :D
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Mar 8, 2019   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
:iconchokuletu:
Chokuletu Featured By Owner Apr 12, 2019  Hobbyist Digital Artist
I screwed up my donation widget so remembering you
made this tutorial kept me from panicking lol

This helped me out so much!! <3

I'm having trouble centering the image in the button for some
reason though, dunno what exactly went wrong with it :/
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Apr 13, 2019   Digital Artist
Yep ;D
Maybe the image itself is not even regarding transparent pixels on it's sides? coding on dA is very buggy :no:
Reply
:iconchokuletu:
Chokuletu Featured By Owner Apr 17, 2019  Hobbyist Digital Artist
It is very weird and buggy... didn't have this issue before so I didn't
know what to think of it.

Maybe it's cuz the only coding I know is by following tutorials step by step xD
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Apr 18, 2019   Digital Artist
Yeah it's never been easy here ;D
Reply
:iconchokuletu:
Chokuletu Featured By Owner Apr 20, 2019  Hobbyist Digital Artist
Definitely! 
Reply
:iconalmostperfectpoppy:
AlmostPerfectPoppy Featured By Owner Apr 5, 2019  Hobbyist General Artist
aa wow this was so helpful!! thank you for making this <3
Reply
:icondoetoons:
DoeToons Featured By Owner Apr 1, 2019  Student General Artist
Is mine working? I am pretty sure I edited the code right. But I am not great at that kind of thing.
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Apr 1, 2019   Digital Artist
Nah there's no additional button! you need to add whole button code in there after the white box you did :)
Reply
:icondoetoons:
DoeToons Featured By Owner Apr 1, 2019  Student General Artist
Ahhh, how do I do that?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Apr 1, 2019   Digital Artist
Just add the code from last step :P
Reply
:icondoetoons:
DoeToons Featured By Owner Apr 1, 2019  Student General Artist
I had it there, but thank you. I realised I was missing a couple of “”s from the part before.
Reply
:icondrampchamp:
DrampChamp Featured By Owner Mar 7, 2019  Hobbyist Digital Artist
Rest in peace Positic :,(
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Mar 8, 2019   Digital Artist
Yeah.. he made a new account but I didn't save or watched it and dA deleted all my comments from it so now I don't even have a contact with him. Bunny Emoji-09 (Cry) [V1] 
Reply
:iconnezzioe:
nezzioe Featured By Owner Feb 22, 2019
I copy and pasted your code to test it but it said 'Field `goal`: goal should be a number, without commas or other separators' what should I do??
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 22, 2019   Digital Artist
yeah just write a number :B
Reply
:iconnezzioe:
nezzioe Featured By Owner Feb 23, 2019
sorry, what do you mean? write a number into the goal? I did that and it still didn't work
Reply
:iconu-tena:
u-tena Featured By Owner Feb 28, 2019  Student Artist
if your target is 100 points for example then you write 100 in the goal box ^^
Reply
:iconcolonelbriad:
ColonelBriaD Featured By Owner Feb 16, 2019
On second thought, nothing worked.
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 16, 2019   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
:iconcolonelbriad:
ColonelBriaD Featured By Owner Feb 16, 2019
Used! It totes worked.
Reply
:iconhoshii-po:
Hoshii-po Featured By Owner Feb 9, 2019  Hobbyist Digital Artist
i am really struggling with setting the background. it shifts to the side and is too big and doesn't sit over the donation button and meter it just stays underneath. plz help
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Feb 10, 2019   Digital Artist
You sure you pasted it in the proper place? I can't see the code on your profile so I don't know what happened.
Reply
:iconhoshii-po:
Hoshii-po Featured By Owner Feb 10, 2019  Hobbyist Digital Artist
yeah... i couldnt figure it out so i just used a template. i might try again later but atm i am happy with my page i guess
Reply
:iconhoshii-po:
Hoshii-po Featured By Owner Feb 10, 2019  Hobbyist Digital Artist
also i didn't see that i could've bought the template code oof
Reply
:iconhoshii-po:
Hoshii-po Featured By Owner Feb 10, 2019  Hobbyist Digital Artist
 jeez i didn't realise it was in the description and now i wasted 50 points :( also the page the zip file takes you too doesn't exist aparently
Reply
:iconalesuyin:
Alesuyin Featured By Owner Oct 21, 2018  Hobbyist Digital Artist
Thank you, it's pretty usefull
Reply
:iconnightmaredesign-yu:
NightmareDesign-Yu Featured By Owner Sep 13, 2018
Thank you <3
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 29, 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
:iconspoopl:
SPOOPl Featured By Owner Jan 24, 2019  Student General Artist
heya, do you mind checking if my button works?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 25, 2019   Digital Artist
it does :B
Reply
:iconspoopl:
SPOOPl Featured By Owner Jan 25, 2019  Student General Artist
thanks
Reply
:icondoomabyss95:
DoomAbyss95 Featured By Owner Edited Jan 14, 2019  Hobbyist General Artist
sorry i am quite new to this but how do you put a background in the donation pool?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 17, 2019   Digital Artist
It's literally first step of the tutorial.
Reply
:iconkrazy-times:
Krazy-Times Featured By Owner Jan 14, 2019  Student Digital Artist
How do you get rid of the donator avatars? 
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
65,335 (9 today)
Favourites
4,069 (who?)
Comments
1,822
Downloads
224