HOME | DD
TimberClipse — Custom User Box Tutorial by-nd
Published: 2010-09-05 06:24:12 +0000 UTC; Views: 20673; Favourites: 307; Downloads: 112
Redirect to original
Description
Custom User Box Tutorial by =TimberClipseSpecial 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!
Related content
Comments: 85
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 (^_^)
👍: 0 ⏩: 1
Thank you for your kind words!
TC
👍: 0 ⏩: 1
I tried to be fair, so the kindness in entirely deserved!!! Your tutorial is exceptional, and I feel lucky to have found it (^_^)
👍: 0 ⏩: 0
Please tell me if i can change the usual black writing into a white.
Thank you. (: ♥
👍: 0 ⏩: 1
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).
👍: 0 ⏩: 1
<div align="center"></div> will do that for you.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 1
Can you send me a note with the code for the box?
Thanks!
👍: 0 ⏩: 0
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?
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
No problem
Glad I could help!
👍: 0 ⏩: 0
that just creates a picture. Not a background...
👍: 0 ⏩: 1
Oh, no it is not possible to create two backgrounds.
👍: 0 ⏩: 1
Oh, thanks, that was what I was asking.
👍: 0 ⏩: 1
Ahh alright, sorry I wasn't clear on what you had meant.
👍: 0 ⏩: 1
Its ok, i'm never clear. ^.^
👍: 0 ⏩: 0
Very hepful and useful. Well done Zev! 
(your name is so lovely! 
👍: 0 ⏩: 0
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?
👍: 0 ⏩: 1
Aaah, I'm looking for the exact same thing. I haven't found out how to do it yet. ;w;
👍: 0 ⏩: 1
Hopefully I get answered. If not, I'll try to keep looking. If I do find something, I'll let you know.
👍: 0 ⏩: 1
Great tutorial! But how come my image at the top overlaps the box where I put text? And how do I fix it?
👍: 0 ⏩: 0
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
👍: 0 ⏩: 1
Can you post the code here for me?
👍: 0 ⏩: 1
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
👍: 0 ⏩: 1
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
👍: 0 ⏩: 0
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
👍: 0 ⏩: 0
How do you put a box in the custom widget? ^^"
I mean like this - [link] (The box inside the custom widget)
👍: 0 ⏩: 1
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
👍: 0 ⏩: 1
My pleasure
You have to be a beta tester...
👍: 0 ⏩: 2
How do you become a beta tester?
👍: 0 ⏩: 1
FAQ #531: What is an Official deviantART Beta Tester? How do I become one?
👍: 0 ⏩: 1
aww thanks~ dont worry I made it 
👍: 0 ⏩: 0
<a href="LINK">WORD</a>
👍: 0 ⏩: 1
!
Thank you for this tutorial! All the other tutorials for custom boxes never really helped. Thanks again~
👍: 0 ⏩: 0
Is there a way to tell the backgrounds to repeat themselves; a tile setting?
👍: 0 ⏩: 1
sadly no, just gatta make them large enough.
👍: 0 ⏩: 1
1 | Next =>