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 )
:iconartnote:
ArtNote Featured By Owner Edited 1 day ago  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 1 day ago   Digital Artist
Only you and people who are not logged in will see this button :B
Reply
:iconartnote:
ArtNote Featured By Owner 1 day ago  Hobbyist Digital Artist
AH now I feel really stupid  > v < Thank you very much! ^ v ^
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 3 hours ago   Digital Artist
It's okay :)
Reply
:iconkakarigeikogirl:
KakariGeikoGirl Featured By Owner 1 day ago  Student General Artist
This was extremely helpful, thank you very much^^
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 1 day ago   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
:iconxxartchemicalxx:
XxArtChemicalxX Featured By Owner Jul 26, 2015
Okie! :3
Reply
:iconchrisnoth-penigas:
Chrisnoth-Penigas Featured By Owner Jul 23, 2015  Student Interface Designer
Thank you :D
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 23, 2015   Digital Artist
You're welcome :)
Reply
:iconchaolamity:
Chaolamity Featured By Owner Jul 20, 2015
Hi,
I've followed the instructions as best as I could, but adding the progress bar was the only thing that worked for me.

When I added in the background (Db) and put text, it wouldn't show up. I have tried making the text white so it'd be visible through the darker colors; however, nothing's working.
It just looks like this:

 Dnatinbx by Chaolamity

Sorry to be a bother... it's my first time working with codes for my Donation box.
Is there anything I can do?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 21, 2015   Digital Artist
I guess you added to much /div s but I can't do anything when I don't see the code :P
Can you send it via text hosting site, for ex. tny.cz ?
Reply
:iconchaolamity:
Chaolamity Featured By Owner Jul 21, 2015
Sure! I appreciate the help Happy cry (Tears of joy) 
pasted.co/b04ea17b
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 22, 2015   Digital Artist
It's gr-box, not dr-box :XD:
And don't make enters in the button code because it will look weird.
I also changed font everywhere to white so it's more readable :)

pasted.co/93f784c7
Reply
:iconchaolamity:
Chaolamity Featured By Owner Jul 22, 2015
Oh.. whoops Sweating a little... 
Thank you so much for helping! Little Pixel Heart 
Reply
:icondark-scratcher:
Dark-Scratcher Featured By Owner Jul 20, 2015  Hobbyist General Artist
Thank you very much for this tutorial :hug: I don't know how to code, so I'm very grateful for all useful info :)

I've created 900px wide background, but it doesn't fit my own screen (my widgets are 600px wide). And I've found a solution in other tutorial [Custom box code] Wide content :D
Now I can adjust my background by adding wіdth="100%"
For me and other people who don't know, it should look like this:

<dіv class="popup2-moremenu"><dіv class="floaty-boat"><іmg src="your-background-url.jpg" wіdth="100%"/></dіv>

But I still have a question: if I use some image in this code

<а hrеf="URL address"><іmg src="Image URL address" alt="Name of Image" /></а>

and insert

http://dark-scratcher.deviantart.com/#donate
as URL address, will it work as proper donation button :?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 20, 2015   Digital Artist
Yes but you can streach it accidentally too much and it would look awful :P

Never tried this, but I think it can work. But only in Donate widget. :)
Reply
:icondark-scratcher:
Dark-Scratcher Featured By Owner Jul 22, 2015  Hobbyist General Artist
My widgets are 600px wide, and I often see people who have larger widgets. Some of them use custom backgrounds without width 100%), so part of their content is cropped and not visible to me (and other people with smaller resolutions)... It is a real problem :(

One person suggested me to create a 1000px background and said that such width should be enough for most of high resolutions. Unfortunately I don't know what is the ultimate width of DA's widgets on huge displays :worry: I have to keep my 1000px background very simple - it looks okay after some stretching or shrinking.

And image links as "custom buttons" don't work :XD: I've also tried many standard DA buttons, but only buttons with class "smbutton donate" open donation window. Well, at least we can edit them a bit :)
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 22, 2015   Digital Artist
Yes it is, unfortunately.

I think it's a bit over 900px but it's a really uncommon, huge resolution for huge screens. I do my backgrounds 900px wide :)

I think that present button, the red one with a Christmas present and text "Give" works as well. :P
Reply
:iconrussabelle:
russabelle Featured By Owner Edited Jul 19, 2015
♥DONATE♥

<img width="300" align="left" height="34" src="

<img width="300" align="left" height="34" src="

<img width="300" align="left" height="34" src="fc02.deviantart.net/fs71/f/201…"/>
"/>
/>
2560/900

♥Saving up for a rainy day! (aka a closed species)♥

could you help me fix this? i am trying to put in a white progress bar, but its not seeming to show up 
i left it on my profile so maybe you could go see? im not sure what is the problem, any help would be appreciated! thanks edit: nevermind this doesn't seem to be working
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 19, 2015   Digital Artist
Please send me the code via text hosting site, ex. tny.cz or something because in the comment section I can't see the whole code :P
Reply
:icongrowlie26:
Growlie26 Featured By Owner Jul 17, 2015  Hobbyist Digital Artist
My donation box looks so pretty! Thank you. 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 18, 2015   Digital Artist
Glad you find it helpful :huggle:
Reply
:icongrowlie26:
Growlie26 Featured By Owner Jul 18, 2015  Hobbyist Digital Artist
Now all I need is to customize my custom boxes. 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 18, 2015   Digital Artist
:lol: !
There is a lot of tutorials on that matter :hug:
Reply
:iconnerdystarrygrub:
NerdyStarryGrub Featured By Owner Edited Jul 15, 2015  Hobbyist General Artist
Could you help me..?

My donation pool always look wrong... for some weird reason.


NVM!
Reply
:iconbeapanda:
BEAPANDA Featured By Owner Jul 11, 2015  Hobbyist Digital Artist
thank you very much! you make it see its really simple!
amazing! good work ♥
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 12, 2015   Digital Artist
You're welcome! :hug:
Reply
:iconxsilvercrownx:
xSilverCrownx Featured By Owner Jul 5, 2015  New Deviant Hobbyist General Artist
On step 6, you mentioned something about donate and give points box, can you please elaborate more on it because I think I'm almost there but not quite there yet xD

This is what I understand (please correct me if I'm wrong):

When a person donates, it's like a "Give Points Box". Meaning the donate box (or button in this case) is similar to the Give Points box and you will receive points if a person donates by clicking on your/my donate button? 

I'm sorry if I didn't make any sense by the way...
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 6, 2015   Digital Artist
I'll try... :P

This pop-up shows when you click "Donate": Zrzut ekranu 2015-07-06 10.57.34
And the people that donated to you will be visible on that box below the widget, the last donators or something :nod:

And this box when you click the "Give points" link/button : Zrzut ekranu 2015-07-06 10.59.09
And they won't be visible in the last donators box.
Reply
:iconxsilvercrownx:
xSilverCrownx Featured By Owner Jul 7, 2015  New Deviant Hobbyist General Artist
OHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

Thank you so much FREE Bottled Heart Avatar by IgnisArdor  
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 8, 2015   Digital Artist
No problem :)
Reply
:iconpiirmy:
piirmy Featured By Owner Edited Jul 4, 2015
Would you have the code to just the 'donate points here' button? Like, without the background QwQ
//edit-- never mind, figured it out!! thank you~
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 4, 2015   Digital Artist
It's actually provided in the tutorial. Also in the description:
<div class="thumb-holder"><div class="c"><a class="smbutton smbutton-purple donate" href="#donate"><span> Donate :points: here</span></a></div></div>
Reply
:iconbakagummi:
Bakagummi Featured By Owner Jul 3, 2015  Student Digital Artist
omg ty so much ! <3
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 4, 2015   Digital Artist
No problem :)
Reply
:iconterramiq:
Terramiq Featured By Owner Jul 3, 2015  New Deviant Hobbyist Digital Artist
I'm not sure how to get the donate button to actually work, my friend has tried, but nothing happens.
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 3, 2015   Digital Artist
The URL shouldn't be "terramiq.deviantart.com/#donat…" but only "#donate"
Reply
:iconterramiq:
Terramiq Featured By Owner Edited Jul 5, 2015  New Deviant Hobbyist Digital Artist
I don't know how to change it ><
Because it's only #donate in the code.

It may just not be working anymore, or for all people, since somebody who has it working on their own page logged on to my account themselves, and the code was the same as theirs, as in, it should work. But it's clearly not. ><"
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jul 5, 2015   Digital Artist
It is working, and it works on your page as well as I click it o.O
Reply
:iconterramiq:
Terramiq Featured By Owner Jul 5, 2015  New Deviant Hobbyist Digital Artist
Yeah, i sorted it now ^^ :D
Reply
:iconturtle-raptor:
Turtle-Raptor Featured By Owner Jun 29, 2015  Hobbyist Digital Artist
Thank you so much for this~ This really helped me pull my profile together 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jun 29, 2015   Digital Artist
I'm glad it helped! :)
Reply
:iconaquasparkles:
AquaSparkles Featured By Owner Edited Jun 13, 2015
Thank you so much for this tutorial!!!
I was searching the end of the earth to try make the button work!
Bunny Emoji-66 (Thank you arigatou) [V3] Neko Emoji-37 (Yay) [V2] Hamtaro Mouse Emoji-02 (Kawaii) [V1] 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jun 13, 2015   Digital Artist
No problem! :)
I was suggesting adding the info about the button to CustomBox+Journal Tips n Tricks-Updated 25-Sep-14 but they said it's not important and no one uses it. No wonder why - because no one knows about it :|
Reply
:iconaquasparkles:
AquaSparkles Featured By Owner Jun 13, 2015
Well, thanks again!~ ^^
Reply
:iconthefiddlinghyena:
TheFiddlingHyena Featured By Owner Jun 10, 2015  Professional General Artist
What do I do if I wanted to use the points that were donated to me?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jun 10, 2015   Digital Artist
FAQ #234: What are Points?

You can use them to buy your premium membership, commissions for others, or to buy stuff from dA shop , or you can purchase premium content with them :) You can also give them to others via "Give" button that is on their profile page. Or donate to others :P There are many options :P

FAQ #181: Can I still buy prints if I don't have a credit card?
FAQ #148: What methods of payment are accepted for purchasing deviantART Premium Membership Packages?
FAQ #371: When do I have to pay for a commission?
Reply
Add a Comment:
 
×
Download PNG 900 × 5335




Details

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

Stats

Views
18,933 (11 today)
Favourites
1,857 (who?)
Comments
607
Downloads
80
×