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

Commission info | Instagram | Society6 | PixelJoint | Tumblr |


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

Thanks for help SabakuNoShi and Positic :heart:


My other dA resources:
dA widget code - devID with menu and colums by UszatyArbuzdA widget code - dev ID by UszatyArbuzdA widget code - complex dev ID by UszatyArbuzdA widget code - dev ID with long menu by UszatyArbuz*purchasable* dA profile code - Cute fox theme by UszatyArbuzMORE Journal 'skins' for NON-PM users and groups by UszatyArbuz

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 )
:iconbiby-san:
Biby-san Featured By Owner 6 days ago  Hobbyist Artist
Hi! Thank you 4 the tutorial! I've a question, is normal if my bar doesn't fit well in the widget? Idk how to explain it xD The progress bar is "out" of the widget [half of it (?)] ;; It's because i haven't modified the size? TY!
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 6 days ago   Digital Artist
You talk about the broken bar code?:D
Reply
:iconbiby-san:
Biby-san Featured By Owner 6 days ago  Hobbyist Artist
Yeeeeeeessssss ^^
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 6 days ago   Digital Artist
There are a bit outdated ^^;  I will update them in a few minutes :P
Reply
:iconbiby-san:
Biby-san Featured By Owner 6 days ago  Hobbyist Artist
OHHHHHH REALLY? *0* Thank you so much! I will be waiting the update! :heart:
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 6 days ago   Digital Artist
It's already done ;D
Reply
:iconbiby-san:
Biby-san Featured By Owner 5 days ago  Hobbyist Artist
^^ Ok! I will check ur profile later :)
Reply
:iconbb-bee:
bb-bee Featured By Owner Jan 29, 2016  Hobbyist General Artist
Thank you! Do I need to credit you for the donate button? 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 30, 2016   Digital Artist
No :XD:
Reply
:iconbb-bee:
bb-bee Featured By Owner Jan 30, 2016  Hobbyist General Artist
Alright, just making sure ^^;
Reply
:iconxoennah:
Xoennah Featured By Owner Jan 22, 2016  Hobbyist General Artist
Something that is really confusing me about the donation widget, is why do the backgrounds seem.. Zoomed in all the time? I'm trying to make all my custom box backgrounds match but the donation widget's is always.. Zoomed in.. Is therea nyway to fix this?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 22, 2016   Digital Artist
I'm not sure, it looks okay on my screen.. can you make a screenshot?
Reply
:iconxoennah:
Xoennah Featured By Owner Jan 22, 2016  Hobbyist General Artist
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 23, 2016   Digital Artist
And.. what is the problem again? I see that the background covers the sides as well :P
Reply
:iconxoennah:
Xoennah Featured By Owner Jan 23, 2016  Hobbyist General Artist
The background seems zoomed in more than the others x.x
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 23, 2016   Digital Artist
I see it now! Okay. If you are familiar with HTML, just find a code of the background image, and add width="100%" property to the code of the image, like so:
<img src="http://....."> ----> <img src="http://....." width="100%">

If you don't know how to do that, just send me the code of the donate widget and I will fix that. :)
Reply
:iconxoennah:
Xoennah Featured By Owner Jan 23, 2016  Hobbyist General Artist
That worked! Thank you very much!~ ^-^ :glomp:
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 23, 2016   Digital Artist
No problem :)
Reply
:iconguncatgirl:
GunCatGirl Featured By Owner Jan 21, 2016  Hobbyist Digital Artist
I don't mean to be a bother.. 
But could you just add a gif to the donation pool without doing any other of the coding? 
((Gif as in page doll, etc.)) 

like, just keep the green, and everything etc, but just adding to it.. Is there another code to it? Or is it just really simple? 
Im not really sure, I'm trying to make page dolls, and trying to see if the one I made actually works. 
guncatgirl.deviantart.com/art/…
Is there's something I may have to fix ? 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 21, 2016   Digital Artist
Sure! Well, in this case pasting a thumb code will do :) Do you know how to do that?

Otherwise you can use a simply HTML code for pasting images :P Do you want this code?
Reply
:iconguncatgirl:
GunCatGirl Featured By Owner Jan 21, 2016  Hobbyist Digital Artist
Maybe.
But for the gif, just copy the thumb code into the donation widget and it should work for it?
((Like it will still move and all))

And thanks for the help c:
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 21, 2016   Digital Artist
Not sure, it really depends... if it wont work, teh code for the image is:

<img src="http://orig06.deviantart.net/131f/f/2016/020/2/7/pagedoll_by_guncatgirl-d9onzqb.gif"/>
Reply
:iconguncatgirl:
GunCatGirl Featured By Owner Jan 21, 2016  Hobbyist Digital Artist
It worked!
Could I have the code alone itself? Just for the future if I ever wanted to edit my page and everything cx
//Like the template of it, If i ever need it//

Thank you so much for the help!
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 21, 2016   Digital Artist
You just change the http://........ thing that is between " and " for the URL address of other picture. :)
Reply
:iconguncatgirl:
GunCatGirl Featured By Owner Jan 21, 2016  Hobbyist Digital Artist
Okay! 
Thanks so much! C:
Reply
:iconmother-noroi:
mother-noroi Featured By Owner Edited Jan 7, 2016
for some reason, my core star shows up in the top left corner in the donation widget. how do i get rid of that???

also, the original donate button is still there whether its me or not. the button i added wont lower itself to cover the original :<
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 7, 2016   Digital Artist
The star is because dA changed coding and cannot be removed.

The button is visible for you only and when you log out.
Reply
:iconmother-noroi:
mother-noroi Featured By Owner Jan 7, 2016
ah okay

and apparently not cause i logged out, used my old account and its still there under the new button
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 8, 2016   Digital Artist
That shouldn't happen, I visited your account and everything looks fine.
Reply
:iconmother-noroi:
mother-noroi Featured By Owner Jan 8, 2016
maybe it just doesnt like me?
Reply
:iconspectral-bases:
Spectral-Bases Featured By Owner Jan 6, 2016
Thanks! I used your pretty background. Now I don't have that green, but I still have that 200/255 text bit, and I can't find it in the code. Could you help with that? Or is it meant to be like that?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 7, 2016   Digital Artist
The easiest would be if you:
1. edit the Donate widget so you can write in the code, make sure the cursor is in that window
2. hit "CTRL + F" on your keyboard
3. a tiny text box on the bottom of the page will pop up. It's a search box for the browser. Paste here:

<small>200/255</small>

4.It should highlight this part of the code. Simply select it with your mouse and delete.
5. Save the changes and it would work fine! :)
Reply
:iconcattbon:
CattBon Featured By Owner Jan 5, 2016  Student General Artist
I used an image that was bigger than 900 and it shrunk it in the donate box. Is it because it's too big maybe?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 6, 2016   Digital Artist
Not sure ; if you added width="100%" to the code of the background, it will fill the box with whole image, not just a part. If you didn't do that, I really don't know :shrug:
Reply
:iconcattbon:
CattBon Featured By Owner Jan 6, 2016  Student General Artist
it worked! Thank you! <3333
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 7, 2016   Digital Artist
;)
Reply
:iconcattbon:
CattBon Featured By Owner Jan 6, 2016  Student General Artist
Oh! I probably didn't. Thank you! <3
Reply
:iconbakagummi:
Bakagummi Featured By Owner Jan 5, 2016  Student Digital Artist
And when I want to add a white box (like a custom) what is the code ? 0.0
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 7, 2016   Digital Artist
It should be added like:

<div class="popup2-moremenu"><div class="floaty-boat"><img src="YOUR-BG-URL"></div><div class="gr-box gr-genericbox"> PASTE-OPENING-CODE-FOR-THE-BOX 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> PASTE-CLOSING-CODE-FOR-THE-BOX</div></div></div></div>
Reply
:icondreya-san:
Dreya-san Featured By Owner Dec 28, 2015  Hobbyist General Artist
Thank you so much for this! It's really helpful!
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Dec 29, 2015   Digital Artist
No problem :)
Reply
:iconrainbowmoonbunny:
RainbowMoonBunny Featured By Owner Dec 27, 2015  Student Digital Artist
ok what did i do wrong 
the red DA donate button is there as well as the purple one 
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Dec 28, 2015   Digital Artist
The original button is viisble only for you as well as when you log out.
Reply
:iconarzika:
arzika Featured By Owner Dec 23, 2015  Hobbyist Digital Artist
The donate button doesn't work ;-;
is that how it was supposed to be?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Dec 24, 2015   Digital Artist
It's working, you had to do something wrong :P
Reply
:iconarzika:
arzika Featured By Owner Dec 24, 2015  Hobbyist Digital Artist
yeah, I had used the "give points" link XD

because the # donate code did nothing
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Dec 25, 2015   Digital Artist
You need to add the donate word in the code of the button as well. :) check out for example this code for the button:

<div class="thumb-holder"><div class="c"><a class="smbutton smbutton-purple donate" href="#donate"><span> Donate :points: here</span></a></div>
Reply
:iconamiexlucas:
AmiexLucas Featured By Owner Edited Dec 23, 2015  Professional Digital Artist
How do we put it
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Dec 23, 2015   Digital Artist
Excuse me? :P
Reply
Add a Comment:
 
×




Details

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

Stats

Views
26,236 (12 today)
Favourites
2,336 (who?)
Comments
789
Downloads
106
×