Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

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

Stats

Views
7,789 (21 today)
Favourites
933 (who?)
Comments
245
Downloads
30
×
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 :rose:



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 )
:iconfenrisxwolf:
FenrisxWolf Featured By Owner Sep 23, 2014  Professional Traditional Artist
Wow this is great ^u^ Thanks a lot for posting this :meow:
I have one question though. With the donation button, can you get rid of the original default one? I've put in a new custom donate button, and it all looks fine, but I can still see the default one, and wondered if other people could see it as well?
Sorry if I've missed something ^^'
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Sep 23, 2014  Hobbyist Digital Artist
In the tutorial stays, that no one (except you) will see the button. :)
Reply
:iconfenrisxwolf:
FenrisxWolf Featured By Owner Sep 23, 2014  Professional Traditional Artist
Ah sorry, I must have missed that part ^^'
Thanks again for your amazing recourse and tutorials :meow:
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Sep 23, 2014  Hobbyist Digital Artist
:hug:
Reply
:iconfenhung:
FenHung Featured By Owner Sep 23, 2014  Hobbyist Digital Artist
(Sorry to bother you again..)
How do you make the button work? ^^ I tested it, but apparently mine doesn't work O:
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Sep 23, 2014  Hobbyist Digital Artist
The donate button? For me it's working in your profile :)
You can't donate to yourself :D
Reply
:iconfenhung:
FenHung Featured By Owner Sep 23, 2014  Hobbyist Digital Artist
It works? O: A friend of mine said before that it didn't work, but I did try to fix it in the mean time, so maybe I fixed it without knowing~ (sorry about that ^^'') But thank you! \(^^)/
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Sep 23, 2014  Hobbyist Digital Artist
Yeah, it works :) It's okay :D
Reply
:iconxavs-pixels:
xavs-pixels Featured By Owner Sep 22, 2014  Hobbyist Digital Artist
I used your code here for my donate widget, except I want to change the font color. But when I try to put in the code for new text color the whole code for the donate widget messes up. At what point in the donate widget code should I put the code to change the text to make sure both codes work.
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Sep 22, 2014  Hobbyist Digital Artist
You should put the beginning of the code after the <gr box genericbox> thing, and the finish of this code before the code of the button :)
Reply
Add a Comment: