Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

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

Stats

Views
13,014
Favourites
310 (who?)
Comments
81
Downloads
101

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-No Derivative Works 3.0 License.
×
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
36 out of 37 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  Student 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  Student General Artist
Ok, thank you! :)
Reply
:icontimberclipse:
TimberClipse Featured By Owner Apr 12, 2013  Professional Filmographer
No problem :)
Glad I could help!
Reply
Add a Comment: