HOME | DD

TimberClipse — Custom User Box Tutorial by-nd

Published: 2010-09-05 06:24:12 +0000 UTC; Views: 19594; Favourites: 307; Downloads: 112
Redirect to original
Description 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.






















Text can go here.





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

TenshiNoFuu [2010-11-29 22:38:49 +0000 UTC]

Overall

Vision

Originality

Technique

Impact


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

TimberClipse In reply to TenshiNoFuu [2010-11-29 22:44:20 +0000 UTC]

Thank you for your kind words!

TC

👍: 0 ⏩: 1

TenshiNoFuu In reply to TimberClipse [2010-11-29 23:01:22 +0000 UTC]

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

ArbiesArt [2014-06-08 19:55:41 +0000 UTC]

Please tell me if i can change the usual black writing into a white. 
Thank you. (: ♥

👍: 0 ⏩: 1

TimberClipse In reply to ArbiesArt [2014-06-08 20:02:40 +0000 UTC]

I do not believe so... 

👍: 0 ⏩: 0

Moiscen [2014-05-11 16:25:13 +0000 UTC]

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

TimberClipse In reply to Moiscen [2014-05-19 13:27:11 +0000 UTC]

will do that for you.

👍: 0 ⏩: 0

Billiam-X [2013-11-19 22:03:53 +0000 UTC]

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

TimberClipse In reply to Billiam-X [2013-11-19 22:07:20 +0000 UTC]

Can you send me a note with the code for the box?


Thanks!

👍: 0 ⏩: 0

SketchyCharmander [2013-04-12 17:26:41 +0000 UTC]

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 ) Now everything I write goes to the center. :c Can you tell me how to close it?

👍: 0 ⏩: 1

TimberClipse In reply to SketchyCharmander [2013-04-12 18:53:54 +0000 UTC]

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

SketchyCharmander In reply to TimberClipse [2013-04-12 18:54:34 +0000 UTC]

Ok, thank you!

👍: 0 ⏩: 1

TimberClipse In reply to SketchyCharmander [2013-04-12 18:57:04 +0000 UTC]

No problem
Glad I could help!

👍: 0 ⏩: 0

Atirum [2012-11-30 05:35:20 +0000 UTC]

Can you put two pictures in a box?

👍: 0 ⏩: 1

TimberClipse In reply to Atirum [2012-11-30 23:04:39 +0000 UTC]

yes use

👍: 0 ⏩: 1

Atirum In reply to TimberClipse [2012-12-01 01:14:45 +0000 UTC]

that just creates a picture. Not a background...

👍: 0 ⏩: 1

TimberClipse In reply to Atirum [2012-12-01 02:41:34 +0000 UTC]

Oh, no it is not possible to create two backgrounds.

👍: 0 ⏩: 1

Atirum In reply to TimberClipse [2012-12-01 03:16:34 +0000 UTC]

Oh, thanks, that was what I was asking.

👍: 0 ⏩: 1

TimberClipse In reply to Atirum [2012-12-01 06:15:59 +0000 UTC]

Ahh alright, sorry I wasn't clear on what you had meant.

👍: 0 ⏩: 1

Atirum In reply to TimberClipse [2012-12-01 06:49:16 +0000 UTC]

Its ok, i'm never clear. ^.^

👍: 0 ⏩: 0

Astrikos [2012-11-07 03:04:24 +0000 UTC]

Very hepful and useful. Well done Zev!
(your name is so lovely! )

👍: 0 ⏩: 0

Mysterio-san [2012-09-06 17:39:27 +0000 UTC]

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

TheInspectre In reply to Mysterio-san [2012-10-02 18:37:57 +0000 UTC]

Aaah, I'm looking for the exact same thing. I haven't found out how to do it yet. ;w;

👍: 0 ⏩: 1

Mysterio-san In reply to TheInspectre [2012-10-03 01:53:05 +0000 UTC]

Hopefully I get answered. If not, I'll try to keep looking. If I do find something, I'll let you know.

👍: 0 ⏩: 1

TheInspectre In reply to Mysterio-san [2012-10-03 21:02:54 +0000 UTC]

Aww, thank you ;w;

👍: 0 ⏩: 0

ForestGlade [2012-07-24 00:22:57 +0000 UTC]

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

Nindeanwa [2012-07-17 19:59:51 +0000 UTC]

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

TimberClipse In reply to Nindeanwa [2012-07-17 21:58:53 +0000 UTC]

Can you post the code here for me?

👍: 0 ⏩: 1

Nindeanwa In reply to TimberClipse [2012-07-17 22:31:26 +0000 UTC]

I probably mucked it up while tweaking it but here it is:



_________~♥~_________




:thumb299205119: :thumb313529898:





Dragon

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

TimberClipse In reply to Nindeanwa [2012-07-18 05:45:28 +0000 UTC]

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

CuteFlub [2012-07-09 21:51:41 +0000 UTC]

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

Kiytt [2012-06-11 22:15:26 +0000 UTC]

How do you put a box in the custom widget? ^^"
I mean like this - [link] (The box inside the custom widget)

👍: 0 ⏩: 1

TimberClipse In reply to Kiytt [2012-06-11 22:39:49 +0000 UTC]

Link didn't work.

👍: 0 ⏩: 1

Kiytt In reply to TimberClipse [2012-06-11 22:45:23 +0000 UTC]

[link]
Try this one.

👍: 0 ⏩: 0

tinybreeann [2012-05-23 03:44:46 +0000 UTC]

great tutorial

👍: 0 ⏩: 0

Love2bd1 [2012-05-01 22:24:02 +0000 UTC]

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

TimberClipse In reply to Love2bd1 [2012-05-02 01:30:22 +0000 UTC]

My pleasure

👍: 0 ⏩: 0

Fran-ney [2012-03-13 11:27:48 +0000 UTC]

how do I put a video in the custom box? :/

👍: 0 ⏩: 1

TimberClipse In reply to Fran-ney [2012-03-14 00:11:40 +0000 UTC]

You have to be a beta tester...

👍: 0 ⏩: 2

XavierFTWx In reply to TimberClipse [2012-05-19 03:32:05 +0000 UTC]

How do you become a beta tester?

👍: 0 ⏩: 1

TimberClipse In reply to XavierFTWx [2012-05-19 04:26:08 +0000 UTC]

FAQ #531: What is an Official deviantART Beta Tester? How do I become one?

👍: 0 ⏩: 1

XavierFTWx In reply to TimberClipse [2012-05-19 04:34:23 +0000 UTC]

Thank you so much!

👍: 0 ⏩: 0

Fran-ney In reply to TimberClipse [2012-03-14 11:40:33 +0000 UTC]

aww thanks~ dont worry I made it wasn't so complicated as I thought xD

👍: 0 ⏩: 0

FanficWarrior [2012-02-03 02:44:01 +0000 UTC]

How do you create a "link" to say a word?

👍: 0 ⏩: 1

TimberClipse In reply to FanficWarrior [2012-02-03 11:37:46 +0000 UTC]

WORD

👍: 0 ⏩: 1

FanficWarrior In reply to TimberClipse [2012-02-03 13:41:33 +0000 UTC]

Ty

👍: 0 ⏩: 0

NeonLuxray [2012-01-22 21:09:19 +0000 UTC]

Ahh thanks so much for this !

👍: 0 ⏩: 0

51rong [2012-01-22 16:44:23 +0000 UTC]

Thank you for this tutorial! All the other tutorials for custom boxes never really helped. Thanks again~

👍: 0 ⏩: 0

IHamby [2011-11-08 03:37:11 +0000 UTC]

Is there a way to tell the backgrounds to repeat themselves; a tile setting?

👍: 0 ⏩: 1

TimberClipse In reply to IHamby [2011-11-08 03:52:04 +0000 UTC]

sadly no, just gatta make them large enough.

👍: 0 ⏩: 1


| Next =>