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,337 (21 today)
Favourites
886 (who?)
Comments
221
Downloads
30
×
Donate widget customizing tutorial by UszatyArbuz Donate widget customizing tutorial by UszatyArbuz

It will NOT work for non-premium members!


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 )
:iconm-t0wn:
M-T0WN Featured By Owner 5 hours ago
What if we want a different colored progress bar?
Reply
:iconmischievousraven:
MischievousRaven Featured By Owner 2 days ago  Hobbyist General Artist
Thanks for this! Is there a similar tutorial created for customizing the gallery widget? If so, I haven't had any luck finding it. :( I want to use my gallery widget on my page, but I'd like to incorporate a background, but putting in the background code puts it above/pushes everything else down, due to the "first layer of the cake" being the default gallery coding built in.  Thanks in advance! ^_^
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 2 days ago  Hobbyist Digital Artist
You're very welcome! I'm afraid that it won't work for gallery widget at all, because dA has some special codes that are choosing your last / random deviations and that can't be coded in the description of the widget.
But, you can always paste some thumbs or images from your gallery in the "Custom" widget and call it as a "Gallery" review and add a button that will provide to your gallery :D I did something similar in this commission, see the "GALLERY" widget in left column:
COM - profile design for NH97 by UszatyArbuz
As you can see on this example, the "Feature deviation" and "DevID" widgets works as the "Donate" widget in this tutorial and you can customize them as you like. :)
Reply
:iconmischievousraven:
MischievousRaven Featured By Owner 2 days ago  Hobbyist General Artist
Yeah, I had resorted to utilizing the custom widget to make my own "gallery" displayed; guess I'll just do that again! :) I'll also look into the Feature Deviation and DevID widgets working like the donate one. Thanks for the tutorial link and timely reply! Thanks so much <3
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 1 day ago  Hobbyist Digital Artist
You're welcome! :) For the devID box, you'll have to use again <div class="popup2-moremenu"><div class="floaty-boat"> instead of <div class="gr-box gr-genericbox"> used in this tutorial, and expand the widget by adding multiple of <br/> code on the beginning of the description. :) And you can basically copy and paste your code that you have in "Paint the Skies" widget :D
Reply
:iconmischievousraven:
MischievousRaven Featured By Owner 1 day ago  Hobbyist General Artist
Will totally play around with this later! Thanks so much, Uszaty!
Reply
:iconkinggigabyte:
KingGigabyte Featured By Owner 4 days ago  Student General Artist
Thank you a ton for this
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner 4 days ago  Hobbyist Digital Artist
You're very welcome! :la:
Reply
:iconinfinitai:
Infinitai Featured By Owner Sep 3, 2014  Student Artist
very useful, thank you!
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Sep 3, 2014  Hobbyist Digital Artist
Welcome, I'm happy :)
Reply
Add a Comment: