HOME | DD

DeathTripp — Custom Box Background Tutorial

Published: 2010-01-28 18:10:12 +0000 UTC; Views: 158247; Favourites: 5079; Downloads: 1472
Redirect to original
Description EDIT 2 Okay, I am aware that DeviantART has changed a little since I did this tutorial...and I haven't had a change to update it yet and include gallery BG's...but please bare with me...

If you aren't able to get the right URL by just "clicking download" on your BG image, then please do the following

IF YOU ARE USING FIREFOX:

Click Download on your BG Image that you want to use...
Next right click and click "View Image" (the image should now refresh or open in another window)
The URL that you need should now be at the top, paste this code along with the Custome BG code into your box and follow the rest of the instructions.

(or a shorter way which I haven't tested yet: right click, copy image location, and you get the link you need.)

IF YOU ARE USING INTERNET EXPLORER:

Click download on the image and then click "View Sorce".

IF YOU ARE USING GOOGLE CHROME:

Click download on your BG imagine, then right click the image, and copy the URL. (thanks to ~http //silvershadowhdgehog: for this info! ).

------------------------------------------------------------------------

Next highlight the text between the inverted commas

src="HIGHLIGHT THIS TEXT">

Like this - [link]

This is the URL you need to use! Now follow the rest of the steps in the tutorial!

I hope that this helps!

-----------------------------------------------------------------------

EDIT Please refer to the original sorce of the CSS codes for more information on the backup account for Commander-Luminaire here --> ~Backup-Lunari Thank you
-----------------------------------------------------------------------
Ever wanted to know a simple way of changing the background colour or design in a custom box on your DA page? Well here you go....Originally requested by ~Chibi-Zelly but I thought I should upload it for all of you to see! <3

Special Thanks to *KiwiesRuleXD because she was the one who taught me how to do this cool trick! <3 Thank you!

Simply download/read the tutorial above and use the code below!! and if you are feeling generous, if you use it please +fave it so that others can find it too! Enjoy!

NOTE this code won't work in gallery/deviation boxes...you need a more complicated code to do this...and I don't know how yet...

also some background images will need to be longer than 1600 pixels....this is just a rough guide...because the more stuff you put in your custom box, the longer it gets...so your image may have to be longer.

-----------------------------------------------------------------------
THE CODE

<div class="popup2-moremenu"><div class="floaty-boat"><img src="IMAGE URL GOES HERE" />>>
>

THE STUFF IN YOUR CUSTOM BOX GOES HERE

>

-----------------------------------------------------------------------

(Special Thanks to ~Internet-cafe for giving me the code with "breaks" so that people don't have to get rid of the annoying stars * <3 Thanks!! =3)
Related content

DeathTripp - Murdoc and 2D Kiss meme

DeathTripp - Feel Good Veilluse Version 2

DeathTripp - Everything You Are......Collab

DeathTripp - Murdoc and 2D Collab

DeathTripp - WIP Gorillaz Stylo Mask

DeathTripp - Squed and Stretch BirthdayCake

DeathTripp - Dance with the Devil Collab

DeathTripp - Ikki Murkrow collab

DeathTripp - Best friends four years

lostyarts - Steam Featured Artwork | Pink Girl And Bear

MidnightMoonTheFlof - TOYHOUSE PURGE!! [Humanoids/furries and more!]

Disyukov - NSFW PACK for Artists, Body Poses, Milk, Tears...

LKGamingART - DA Supporter

Indae - Custom box background tutorial

CypherVisor - Custom-box Background Tutorial

GinkgoWerkstatt - .:How to add CSS to Groups [DD]

ThisMechaJunkie - Username Changing

TaNa-Jo - Custom Box Tutorial

TheMangaPit - Journal Skin Links Help

MissCelia - HOW TO: make journal skins 1

Metterschlingel - Text File Journal Skin Guide

endlesssly - Make your skin accessible
Comments: 1030

DeathTripp In reply to ??? [2010-05-25 10:45:03 +0000 UTC]

your welcome!!

uhm...I'm not sure...there might be a code...but i have no idea D: I'm sorry!

👍: 0 ⏩: 1

CheekyNana In reply to DeathTripp [2010-05-27 06:31:41 +0000 UTC]

No worries!

👍: 0 ⏩: 0

CptnDerp In reply to ??? [2010-05-22 19:09:44 +0000 UTC]


This is amazing.
I've been wondering how to do this for ages
Thank you <3

👍: 0 ⏩: 1

DeathTripp In reply to CptnDerp [2010-05-22 21:46:42 +0000 UTC]

aww your welcome!! <3

👍: 0 ⏩: 0

Princess-Elincia In reply to ??? [2010-05-19 04:02:32 +0000 UTC]

do you know how to make the text white? I've been trying to figure it out forever!

👍: 0 ⏩: 1

DeathTripp In reply to Princess-Elincia [2010-05-19 10:06:29 +0000 UTC]

I don't think you can change the colour of the font in your custom boxes....I just tried a whole bunch of different CSS and HTML codes on a plain custom box to see if I could help you out...but none of them worked D:. Sorry! TAT Thats why in the Custom Box Tutorial I made my background lighter....so its easier to see the font.

👍: 0 ⏩: 1

DemandinCompensation In reply to DeathTripp [2010-11-15 10:48:17 +0000 UTC]

Really? D:>
I could have sworn I have seen some custom boxes with different colored font...

👍: 0 ⏩: 0

roxiesayswtf In reply to ??? [2010-04-28 02:40:36 +0000 UTC]

I love this tutorial <3. Everything works perfectly.

👍: 0 ⏩: 1

DeathTripp In reply to roxiesayswtf [2010-05-04 19:56:33 +0000 UTC]

aww thanks! glad you found it helpful! <3

👍: 0 ⏩: 0

Owline In reply to ??? [2010-04-15 20:38:56 +0000 UTC]

Really useful and clear!
Much thanks for making this tutorial! It'll be fun to decore my custom boxes


👍: 0 ⏩: 1

DeathTripp In reply to Owline [2010-04-17 20:21:49 +0000 UTC]

^^ hey your welcome! glad its helpful!

👍: 0 ⏩: 1

Owline In reply to DeathTripp [2010-04-18 18:03:09 +0000 UTC]

It is! I'll have fun making lotsa of backgrounds and trying them! : D
~ 

👍: 0 ⏩: 0

AuroraMoonSpirit In reply to ??? [2010-04-07 20:50:18 +0000 UTC]

Yaay, I did it ;D

👍: 0 ⏩: 1

DeathTripp In reply to AuroraMoonSpirit [2010-04-17 20:22:10 +0000 UTC]

>w< well done!! haha

👍: 0 ⏩: 0

MayaTakamera In reply to ??? [2010-04-05 16:30:18 +0000 UTC]

Hey I tried this out to brighten up my page but now the actual stuff in the boxes like favorites or one of my deviations does not show, any clues as to why that is.

Awesome tutorial by the way this was very helpful

👍: 0 ⏩: 1

DeathTripp In reply to MayaTakamera [2010-04-17 20:23:33 +0000 UTC]

I'm sorry for the late reply...did you get it to work? all I can say is that the code or writing is in the slightly wrong place? It happened to me a couple of times before I got it right.

👍: 0 ⏩: 1

MayaTakamera In reply to DeathTripp [2010-04-17 21:15:25 +0000 UTC]

no I never got it fixed, even for the background of my deviant ID, my dev ID picture would show but then vanish.

👍: 0 ⏩: 1

DeathTripp In reply to MayaTakamera [2010-05-04 20:00:15 +0000 UTC]

have you asked in the forums? because that happened to me a few times too and it could be a fault :s I dunno...

👍: 0 ⏩: 1

MayaTakamera In reply to DeathTripp [2010-05-04 20:01:38 +0000 UTC]

I never even thought about that lol, I wouldn't even know where to start XD

👍: 0 ⏩: 0

JenCamacho In reply to ??? [2010-04-03 04:05:52 +0000 UTC]

Thanks for sharing! I'm trying it myself now

👍: 0 ⏩: 1

DeathTripp In reply to JenCamacho [2010-04-03 19:29:53 +0000 UTC]

haha your welcome! good luck! <3

👍: 0 ⏩: 0

Lumysaara In reply to ??? [2010-03-08 17:48:11 +0000 UTC]

If I knew that using custom box backgrounds was so simple, I would have used it a long, long time ago.
Thank you so much for this tutorial

👍: 0 ⏩: 1

DeathTripp In reply to Lumysaara [2010-03-12 23:16:51 +0000 UTC]

aww, your welcome! <3

👍: 0 ⏩: 0

Rhosaucey In reply to ??? [2010-03-07 02:21:28 +0000 UTC]

So useful and easy to understand. Perfect!

Thanks for this.

👍: 0 ⏩: 1

DeathTripp In reply to Rhosaucey [2010-03-07 15:23:31 +0000 UTC]

>w< aww thanks!

your welcome!!

👍: 0 ⏩: 0

Tifa22 In reply to ??? [2010-03-07 01:15:08 +0000 UTC]

Cool!

👍: 0 ⏩: 1

DeathTripp In reply to Tifa22 [2010-03-07 15:24:01 +0000 UTC]

>w< thank you! <3

👍: 0 ⏩: 1

Tifa22 In reply to DeathTripp [2010-03-07 16:06:06 +0000 UTC]

You're welcome

👍: 0 ⏩: 0

Internet-cafe In reply to ??? [2010-03-06 04:24:43 +0000 UTC]

you can just put this up there and no one needs to take away the star thingys it may look wierd but when its there it looks fine


<<b>b>div class="popup2-moremenu"<b>b>><<b>b>div class="floaty-boat"<b>b>><<b>b>img src="<b>IMAGE URL GOES HEREb>" /<b>b>>b>b>>b>b>>

b>b>>

<b>THE STUFF IN YOUR CUSTOM BOX GOES HEREb>

b>b>>

👍: 0 ⏩: 1

DeathTripp In reply to Internet-cafe [2010-03-06 11:41:39 +0000 UTC]

>w< aww, thanks alot!! I eddited the deviation and added thanks to you at the bottom!! =3 <3 Thanks again!!

👍: 0 ⏩: 1

Internet-cafe In reply to DeathTripp [2010-03-07 03:09:37 +0000 UTC]

your welcome but i have one question... what if screen resolutions on different computers are like... big or small...

👍: 0 ⏩: 1

DeathTripp In reply to Internet-cafe [2010-03-07 15:28:04 +0000 UTC]

uhm, well for the custom boxes..the background size I used is slightly bigger than the cutombox....so it should be fine width ways....its just length ways that you have to worry about...like if you put loads of thumbnails into your custombox and it gets longer...the image size may need to be adjusted...(my page is a prime example...I need to adjust the image to fit the longer box on the left hand side of my page at the bottom lol)....I'm not too sure though...so don't take my word for it! XDD

👍: 0 ⏩: 1

Internet-cafe In reply to DeathTripp [2010-03-08 04:43:32 +0000 UTC]

oh ok i just made mine REALLLLLY! long

👍: 0 ⏩: 1

DeathTripp In reply to Internet-cafe [2010-03-12 23:24:35 +0000 UTC]

haha <3 good idea lol

👍: 0 ⏩: 1

Internet-cafe In reply to DeathTripp [2010-03-13 03:17:03 +0000 UTC]

yeah but i cant use it for my group cuz were not a super...

👍: 0 ⏩: 1

DeathTripp In reply to Internet-cafe [2010-03-13 12:48:31 +0000 UTC]

D: aww yeah...that really sucks! I wanted to add a journal layout and custom box background to the #SquedClub but its not a super group...and they charge so much for the subscriptions now...its rediculous! D:

👍: 0 ⏩: 1

Internet-cafe In reply to DeathTripp [2010-03-14 03:17:36 +0000 UTC]

yes it is

👍: 0 ⏩: 0

A-M4-COM In reply to ??? [2010-02-26 00:26:44 +0000 UTC]

Quiet great idea! Really amazing to get more watchers and so on. Thank you very much! I'm using it! Great!

👍: 0 ⏩: 0

dulioil In reply to ??? [2010-02-11 16:19:46 +0000 UTC]

hi, mine wouldn't work and I use a jpeg image but won't show up. could u please help?

👍: 0 ⏩: 1

DeathTripp In reply to dulioil [2010-02-11 22:00:51 +0000 UTC]

hmm, it should work...maybe you have forgotten to delete the odd *? or perhaps the URL for the image is not inbetween the two "...or maybe you have accidently deleted part of the code? Try looking here -->[link] to get the code without stars in it and see if that helps? Just let me know if it doesn't work still <3

👍: 0 ⏩: 0

kintsy In reply to ??? [2010-02-10 14:25:43 +0000 UTC]

I used Photobucket for my backgrounds anyway because I changed it so it doesn't automatically resize my images. XD

But to the average user, I suppose they wouldn't do that. Thanks for the tutorial!

👍: 0 ⏩: 1

DeathTripp In reply to kintsy [2010-02-10 17:54:32 +0000 UTC]

oh I see! Thats cool!

Your welcome!! <3

👍: 0 ⏩: 0

PatrickRuegheimer In reply to ??? [2010-02-09 18:36:42 +0000 UTC]

Since when imageshack resizses your images?
I always use imageshack and there is no problem.

👍: 0 ⏩: 1

DeathTripp In reply to PatrickRuegheimer [2010-02-09 22:25:52 +0000 UTC]

A friend told me to do it this way because I always get that problem...and it worked...so I dunno...

👍: 0 ⏩: 1

PatrickRuegheimer In reply to DeathTripp [2010-02-09 22:28:12 +0000 UTC]

Imageshack can resize it but you can simply remove the tick and done. :3
But dA works sure, too.
Just want to ask about your imageshack prob. ^^

👍: 0 ⏩: 1

DeathTripp In reply to PatrickRuegheimer [2010-02-10 17:56:43 +0000 UTC]

oh cool! I never really used imageshack that much because the bandwith for the pictures used to be really small...I use photobucket mainly...but they've probably changed it by now =3 Thanks for the info!! <3

👍: 0 ⏩: 1

PatrickRuegheimer In reply to DeathTripp [2010-02-10 18:07:44 +0000 UTC]

No problems. (:

👍: 0 ⏩: 0

E-Dantes In reply to ??? [2010-02-08 20:25:31 +0000 UTC]

Commander-Luminaire -down here- has a tutorial givin this same code for those boxes. I don't know if different persons can arrive to the exactly same codes without copying each other (probably yes), but I think that's the reason he's asking you credit, maybe that person who teach you how to do it used Commander's tutorial, and then you, and the the world
Anyway, I want you to know that I like it a lot how you explained it here, is very clear and you make it very easy to apply it, besides I didn't know we could use DA as a hosting place

👍: 0 ⏩: 1

DeathTripp In reply to E-Dantes [2010-02-08 22:12:49 +0000 UTC]

oh I see....yeah, they probably did get the codes from Luminaire's tutorial...I'll add his name in the credits then...I only made this tut for my friends and had it in my scraps but then someone requested it to be uploaded to the CSS group...so I have no clue whats going on really ><; sorry...

👍: 0 ⏩: 1

E-Dantes In reply to DeathTripp [2010-02-08 22:27:15 +0000 UTC]

Heh, don't worry, at least not for me. I do believe that you explained very clearly here. And you never claimed to be the original author, so you didn't lie. Between us, I'm a little slow understanding instructions, so I spend a while trying to do it correctly when I read Commander's tutorial

👍: 0 ⏩: 0


<= Prev | | Next =>