Shop Mobile More Submit  Join Login
Custom User Box Tutorial by TimberClipse Custom User Box Tutorial by TimberClipse

Custom User Box Tutorial by =TimberClipse



Special Thanks to $Ayame-Kenoshi, =SparkLum, and =Psychedelicsodacan for their help!

Edit Log:



Made major viewing changes

The Code:



Below is the code I used in the tutorial. The bold areas are places you can change as I demonstrated in the tutorial.

For more resources see below.

<div class="popup2-moremenu"><br /><div class="floaty-boat"><br><img src="IMAGE SOURCE"></div></div><div class="popup2-moremenu"><div class="floaty-boat"><br /><br /><br /><a href="http://timberclipse.deviantart.com/"><img src="http://fc01.deviantart.net/fs50/f/2009/291/c/3/F_e_l_l_a___DeviantART_Tour_2_by_greatLP.png" align="left" width="200"/></a><br /></div></div></div><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="gr-box gr-headless"><i class="gr1"><i></i></i><i class="gr2"><i></i></i><i class="gr3"><i></i></i><div class="gr-body"><div class="gr"><div align="center" class="p"><div align="left">

Text can go here.


</div></div></div></div><i class="gr3 gb"></i><i class="gr2 gb"></i><i class="gr1 gb gb1"></i></div></div></div>



Deviations


The deviations I showed include:


by =SparkLum


by =prosaix


by ¢greatLP

More Resources



Awesome Boxes by `Commander-Luminaire

Other Boxes and Buttoms by =Somrat

FAQ:



Q: What is a Cloud App?
A: A Cloud App in this case, is an online way to make documents. For example [link]

Q: What does "Links are always surrounded by “and” mean?"
A: It means that when you type a link with a URL it must be enclosed in "and"

For example: "http://timberclipse.deviantart.com"

If you have any questions, comment below!

Add a Comment:
 
:icontenshinofuu:
This is probably the clearest, most complete and easy to understand tutorial I've come across on DA.

It references at the same time links, backgrounds, text align and stamps in a complete and detailled way, while also providing a simple exemple. In that sense, it is very original since other tutorials often deal with one of these elements without entering into details about the others.

The use of official DA background colours and chibi avatars also reinforce its credibility while the presentation stays clear and in order.

The presence of the CSS code in the author comments is also a great help since user can copy and paste it after knowing what each line of code represents.

The only suggestion for improvement would be the use of a slightly different red colour for the comment lines, since depending on the quality of the computer screen, the contrast can appear a bit blurry between the red font and the green background.

Overall: the perfect tutorial with the biggest impact I've come across, thank you for taking time in building it up (^_^)
What do you think?
The Artist thought this was FAIR
38 out of 39 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconarbiesart:
ArbiesArt Featured By Owner Jun 8, 2014
Please tell me if i can change the usual black writing into a white. 
Thank you. (: ♥
Reply
:icontimberclipse:
TimberClipse Featured By Owner Jun 8, 2014  Professional Filmographer
I do not believe so... 
Reply
:iconmoiscen:
Moiscen Featured By Owner May 11, 2014  Student Traditional Artist
Thank you for this, so much! I'm happy that this explains what each part of the code does, it's extremely helpful! thank you!

I only have one question: Is there a way you can align the images used for the background if there are multiple? It's hard to explain for me; I have a group of 3 images on one of my custom boxes, and they are big images (3 links), but I can't get them to align as a group (I want them to center in the custom box, but they float/align to the left).
Reply
:icontimberclipse:
TimberClipse Featured By Owner May 19, 2014  Professional Filmographer
<div align="center"></div> will do that for you.
Reply
:iconbilliam-x:
Billiam-X Featured By Owner Nov 19, 2013  Student Digital Artist
Question: I've tried the codes for the background image yet it keeps slashing my image, showing only the topmost parts. Is my image too big (2000x3000) or  is there something I'm missing? And for the record, I uploaded my image to stash, went on full view and followed the whole "Copy Image URL" thing.
Reply
:icontimberclipse:
TimberClipse Featured By Owner Nov 19, 2013  Professional Filmographer
Can you send me a note with the code for the box?

Thanks!
Reply
:iconsketchycharmander:
SketchyCharmander Featured By Owner Apr 12, 2013  Hobbyist General Artist
Hey, I have a question: I used this little code for my header <.div class="header"><.div align="center"> (with no dots, just did that to show) but I'm not so sure how to close it.. (Ex: for closing this type of writing, I type </i>) Now everything I write goes to the center. :c Can you tell me how to close it?
Reply
:icontimberclipse:
TimberClipse Featured By Owner Apr 12, 2013  Professional Filmographer
Alright so you have two div class things so they would be ended with:

<./div><./div>
(ignore the dots)
as you have two divs to close.
Reply
:iconsketchycharmander:
SketchyCharmander Featured By Owner Apr 12, 2013  Hobbyist General Artist
Ok, thank you! :)
Reply
:icontimberclipse:
TimberClipse Featured By Owner Apr 12, 2013  Professional Filmographer
No problem :)
Glad I could help!
Reply
:iconatirum:
Atirum Featured By Owner Nov 29, 2012
Can you put two pictures in a box?
Reply
:icontimberclipse:
TimberClipse Featured By Owner Nov 30, 2012  Professional Filmographer
yes use <img src="LINK">
Reply
:iconatirum:
Atirum Featured By Owner Nov 30, 2012
that just creates a picture. Not a background...
Reply
:icontimberclipse:
TimberClipse Featured By Owner Nov 30, 2012  Professional Filmographer
Oh, no it is not possible to create two backgrounds.
Reply
:iconatirum:
Atirum Featured By Owner Nov 30, 2012
Oh, thanks, that was what I was asking.
Reply
:icontimberclipse:
TimberClipse Featured By Owner Nov 30, 2012  Professional Filmographer
Ahh alright, sorry I wasn't clear on what you had meant.
Reply
:iconatirum:
Atirum Featured By Owner Nov 30, 2012
Its ok, i'm never clear. ^.^
Reply
:iconastrikos:
Astrikos Featured By Owner Nov 6, 2012   General Artist
Very hepful and useful. Well done Zev! :hug:
(your name is so lovely! :w00t:)
Reply
:iconmysterio-san:
Mysterio-san Featured By Owner Sep 6, 2012   Digital Artist
I have a question on the custom boxes: I have a separate custom box for my stamps, and from what I see, it does three stamps at a time before it moves them to another row. On some other deviants' page, they have stamps that cover most of their custom box; stamps covering the box from left to right, instead of having three stamps centered in the middle at a time.

Anyways, my question is: is there a code or something so I can have my stamps cover most of the custom box, instead of just having three at a time centered?
Reply
:icontheinspectre:
TheInspectre Featured By Owner Oct 2, 2012  Student General Artist
Aaah, I'm looking for the exact same thing. I haven't found out how to do it yet. ;w;
Reply
:iconmysterio-san:
Mysterio-san Featured By Owner Oct 2, 2012   Digital Artist
Hopefully I get answered. If not, I'll try to keep looking. If I do find something, I'll let you know. :)
Reply
:icontheinspectre:
TheInspectre Featured By Owner Oct 3, 2012  Student General Artist
Aww, thank you ;w;
Reply
:iconforestglade:
ForestGlade Featured By Owner Jul 23, 2012  Student General Artist
Great tutorial! But how come my image at the top overlaps the box where I put text? And how do I fix it?
Reply
:iconnindeanwa:
Nindeanwa Featured By Owner Jul 17, 2012  Hobbyist General Artist
So I have a question! I've been googling all over trying to find an answer to my question but it wasn't working out very well.

I have my custom box and I've put a background image on it. Then I created another box inside the custom box ontop of the background image Below the second box I wanted to put an image that I drew to act as a footer essentially but for the life of me it always ends up inside the second box and that isn't where I want it to go. Or it ends up not showing up at all. Can I put images at the bottom? or can I only put them on the top?

I tried aligning it to "bottom" but that made it disappear completely Dx

thanks in advance
Reply
:icontimberclipse:
TimberClipse Featured By Owner Jul 17, 2012  Professional Filmographer
Can you post the code here for me?
Reply
:iconnindeanwa:
Nindeanwa Featured By Owner Jul 17, 2012  Hobbyist General Artist
I probably mucked it up while tweaking it but here it is:

<div class#="popup2-moremenu"><div class#="floaty-boat"><img src="ht#tp://fc05.deviantart.net/fs71/f/2012/198/5/1/background_by_nindeanwa-d57mw1f.png" repeat="repeat-y" /></div></div></div><div class#="gr-box">

<div clas#s="gr-box gr-headless"><div# class="gr-b#ody"><div clas#s="gr"><div# class="p"><div# align="center"><div align#="top">_________~♥~_________<div# class="gr-top"></DIV>



:thumb299205119: :thumb313529898:

</div>
</div>
</div>

<img src="h#ttp://i6.photobucket.com/albums/y246/Tanina/dragon888888.png" alt="Dragon" align="bottom" align="left" />


without the "#" the underlined "repeat" was me trying to be cool, I only half expected it to work and it didn't xD I think thats all of it anyway it wouldn't show up without the # signs though
Reply
:icontimberclipse:
TimberClipse Featured By Owner Jul 17, 2012  Professional Filmographer
Hmm, the code won't show up here correctly... Can you actually just do a copy all and paste all, don't change anything right into a note to me?

Thanks
Reply
:iconcuteflub:
CuteFlub Featured By Owner Jul 9, 2012  Hobbyist Digital Artist
Mine wont let me add text. do i put this code to add text

and if so do i put it in frount of the text after the text or with all that other stuff
Reply
:iconkiytt:
Kiytt Featured By Owner Jun 11, 2012  Hobbyist Digital Artist
How do you put a box in the custom widget? ^^"
I mean like this - [link] (The box inside the custom widget)
Reply
:icontimberclipse:
TimberClipse Featured By Owner Jun 11, 2012  Professional Filmographer
Link didn't work.
Reply
:iconkiytt:
Kiytt Featured By Owner Jun 11, 2012  Hobbyist Digital Artist
[link]
Try this one.
Reply
:icondiphylla:
diphylla Featured By Owner May 22, 2012  Professional Digital Artist
great tutorial :blackrose:
Reply
:iconlove2bd1:
Love2bd1 Featured By Owner May 1, 2012  Hobbyist Writer
I have been looking and finding ways to do this eversince i got memeber ship and i now just find this
well i am going to imply it and i thank u kindly
Reply
:icontimberclipse:
TimberClipse Featured By Owner May 1, 2012  Professional Filmographer
:ahoy: My pleasure
Reply
:iconfran-ney:
Fran-ney Featured By Owner Mar 13, 2012  Hobbyist Digital Artist
how do I put a video in the custom box? :/
Reply
:icontimberclipse:
TimberClipse Featured By Owner Mar 13, 2012  Professional Filmographer
You have to be a beta tester...
Reply
:iconxavierftwx:
XavierFTWx Featured By Owner May 18, 2012  Hobbyist Photographer
How do you become a beta tester?
Reply
:iconxavierftwx:
XavierFTWx Featured By Owner May 18, 2012  Hobbyist Photographer
Thank you so much!
Reply
:iconfran-ney:
Fran-ney Featured By Owner Mar 14, 2012  Hobbyist Digital Artist
aww thanks~ dont worry I made it ;P wasn't so complicated as I thought xD
Reply
:iconfanficwarrior:
FanficWarrior Featured By Owner Feb 2, 2012  Student Artist
How do you create a "link" to say a word?
Reply
:icontimberclipse:
TimberClipse Featured By Owner Feb 3, 2012  Professional Filmographer
<a href="LINK">WORD</a>
Reply
:iconfanficwarrior:
FanficWarrior Featured By Owner Feb 3, 2012  Student Artist
Ty
Reply
:iconneonluxray:
NeonLuxray Featured By Owner Jan 22, 2012
Ahh thanks so much for this :D!
Reply
:icon51rong:
51rong Featured By Owner Jan 22, 2012  Hobbyist Digital Artist
Thank you for this tutorial! All the other tutorials for custom boxes never really helped. Thanks again~
Reply
:iconihamby:
IHamby Featured By Owner Nov 7, 2011  Hobbyist Digital Artist
Is there a way to tell the backgrounds to repeat themselves; a tile setting? :confused:
Reply
:icontimberclipse:
TimberClipse Featured By Owner Nov 7, 2011  Professional Filmographer
sadly no, just gatta make them large enough.
Reply
:iconihamby:
IHamby Featured By Owner Nov 7, 2011  Hobbyist Digital Artist
*goes to make it large enough*

Thanks anyways. =D
Reply
:iconthemooseshark:
themooseshark Featured By Owner Aug 3, 2011  Hobbyist General Artist
Can you use this as DevID backrounds or Donation Box backrounds? I've tried but then my DevID doesn't show up just the text does. Same with the Donation Box. The donation bar doesn't show up but the text does.

Do you think you could help me?
Reply
:iconmattsykun:
MattsyKun Featured By Owner May 17, 2011  Hobbyist Artisan Crafter
THIS DESERVES A DAILY DEVIATION.

I AM GOING TO RECCOMEND THIS.
Reply
Add a Comment:
 
×
Download PNG 800 × 4181




Details

Submitted on
September 4, 2010
Image Size
689 KB
Resolution
800×4181
Link
Thumb
Embed

Stats

Views
15,110 (1 today)
Favourites
319 (who?)
Comments
81
Downloads
106

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-No Derivative Works 3.0 License.
×