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
11,923 (2 today)
Favourites
306 (who?)
Comments
77
Downloads
100

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
35 out of 36 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconbilliam-x:
Billiam-X 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 Nov 19, 2013  Professional Filmographer
Can you send me a note with the code for the box?

Thanks!
Reply
:iconsketchycharmander:
SketchyCharmander 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 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 Apr 12, 2013  Student General Artist
Ok, thank you! :)
Reply
:icontimberclipse:
TimberClipse Apr 12, 2013  Professional Filmographer
No problem :)
Glad I could help!
Reply
:iconatirum:
Can you put two pictures in a box?
Reply
:icontimberclipse:
TimberClipse Nov 30, 2012  Professional Filmographer
yes use <img src="LINK">
Reply
:iconatirum:
that just creates a picture. Not a background...
Reply
:icontimberclipse:
TimberClipse Nov 30, 2012  Professional Filmographer
Oh, no it is not possible to create two backgrounds.
Reply
Add a Comment: