HOME | DD

DeathTripp — Custom Box Background Tutorial

Published: 2010-01-28 18:10:12 +0000 UTC; Views: 157946; 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
Comments: 1030

DeathTripp In reply to ??? [2012-02-16 13:14:58 +0000 UTC]

In your "gallery" at the top you have three tabs, "featured" "browse" and "scraps", You can click on them.

👍: 0 ⏩: 1

Sonicgirllover101 In reply to DeathTripp [2012-02-17 06:06:08 +0000 UTC]

Ok, thank you very, very much!

👍: 0 ⏩: 0

BOLTsTrueNo1FanEVER In reply to ??? [2012-02-05 17:02:04 +0000 UTC]

Lol how do you do it with Safari? I have a Mac >w<

👍: 0 ⏩: 1

DeathTripp In reply to BOLTsTrueNo1FanEVER [2012-02-16 13:15:19 +0000 UTC]

uh it should be pretty much the same...

👍: 0 ⏩: 1

BOLTsTrueNo1FanEVER In reply to DeathTripp [2012-02-16 15:40:25 +0000 UTC]

Oh, okay then c:

👍: 0 ⏩: 0

SilvaWind In reply to ??? [2012-01-22 19:33:26 +0000 UTC]

? how do u do it for chrome? cause its jsut pasting the link
and if i download it first it doesnt show the copy image url thing

👍: 0 ⏩: 2

DeathTripp In reply to SilvaWind [2012-02-16 13:18:16 +0000 UTC]

in google chrome click "Download Image", then when the image loads in a new pop up window...it should say "about:blank" at the top. Right click on the image and click "Copy Image URL". That is the URL you need to combine with the code in my tutorial. I hope that this helps! Sorry for the late reply.

👍: 0 ⏩: 1

SilvaWind In reply to DeathTripp [2012-02-16 13:42:42 +0000 UTC]

Thanks I think i got something im just having an issue now of size becuase if you look at my page you'll see white areas half way through and i cant make the background bigger

👍: 0 ⏩: 1

DeathTripp In reply to SilvaWind [2012-02-16 15:04:54 +0000 UTC]

I see. I think it's because the image you are using is not long enough. You need to make the image longer as there is no code to reapeat it (or at least I don't know a code that works for deviantart in the custom boxes). So if you take that image into paint or photoshop and repeat the pattern down so that it's longer...then re-upload it....you won't have a gap. I hope that helps!

👍: 0 ⏩: 1

SilvaWind In reply to DeathTripp [2012-02-16 15:23:45 +0000 UTC]

thanks but how do i do that?

👍: 0 ⏩: 0

Keiykou In reply to SilvaWind [2012-02-04 21:22:05 +0000 UTC]

I think you're supposed to right click the image after downloading it

👍: 0 ⏩: 0

KiylaTheKitti In reply to ??? [2012-01-21 22:31:52 +0000 UTC]

OMG, THANK YOU THANK YOU, THANK YOU!!!!!

👍: 0 ⏩: 1

DeathTripp In reply to KiylaTheKitti [2012-02-16 13:15:31 +0000 UTC]

your welcome!

👍: 0 ⏩: 0

shora18 In reply to ??? [2012-01-19 19:33:21 +0000 UTC]

how do you get pics instead of stuff in the custom box?

👍: 0 ⏩: 1

DeathTripp In reply to shora18 [2012-02-16 13:19:54 +0000 UTC]

If they are images from deviantart...you can use the "thumbnail" code on a deviation to get it to appear in your custom box. If you mean an image that is not on deviantart, you need to use an image hosting website like Photobucket for example.

👍: 0 ⏩: 1

shora18 In reply to DeathTripp [2012-02-16 13:34:17 +0000 UTC]

oh okay thank you

👍: 0 ⏩: 0

chharvorn In reply to ??? [2012-01-19 12:12:08 +0000 UTC]

thank you for making this, i finaly can understand it

👍: 0 ⏩: 1

DeathTripp In reply to chharvorn [2012-02-16 13:20:05 +0000 UTC]

awesome!! glad I could help! ^^

👍: 0 ⏩: 0

kennedoe In reply to ??? [2012-01-18 02:43:26 +0000 UTC]

Oh dear, thank you so much ;u;<3

👍: 0 ⏩: 1

DeathTripp In reply to kennedoe [2012-02-16 13:20:11 +0000 UTC]

you're welcome!! <3

👍: 0 ⏩: 0

apocalypse-the-wolf In reply to ??? [2012-01-16 16:43:30 +0000 UTC]

It doesn't help me I don't understand it >.<

👍: 0 ⏩: 1

DeathTripp In reply to apocalypse-the-wolf [2012-02-16 13:20:32 +0000 UTC]

what don't you understand? maybe I can help?

👍: 0 ⏩: 1

apocalypse-the-wolf In reply to DeathTripp [2012-02-16 21:20:30 +0000 UTC]

How to get it as the background. I made one but I don't know how to get it on the box

👍: 0 ⏩: 0

princess-hylian In reply to ??? [2012-01-14 01:00:18 +0000 UTC]

How can I get the image to repeat itself? Everytime I try putting a url of an image down, it doesn't fill the whole box.

Also, how can I get my drawings to appear in the box without uploading them on deviantart? :3

👍: 0 ⏩: 1

DeathTripp In reply to princess-hylian [2012-01-14 17:26:15 +0000 UTC]

To make the image repeat you have to make the picture tiled manually in photoshop/paint etc. This tutorial is for one large image ie. 1000x1600 pixels...not a tile on its own.

you need to use an image hosting website such as photobucket --> [link] make an account on there, upload your images and then use the IMG code and put that in your custom box.

👍: 0 ⏩: 0

Mereneth In reply to ??? [2012-01-12 05:33:09 +0000 UTC]

For firefox if you right click, copy image location, you get the link you need. Cuts out excess steps currently listed!

👍: 0 ⏩: 1

DeathTripp In reply to Mereneth [2012-01-13 16:31:45 +0000 UTC]

awesome thanks for the info! <3

👍: 0 ⏩: 0

Yukiko-berrie In reply to ??? [2012-01-09 09:55:11 +0000 UTC]

thank you!!

👍: 0 ⏩: 1

DeathTripp In reply to Yukiko-berrie [2012-01-13 16:38:51 +0000 UTC]

you're welcome!

👍: 0 ⏩: 0

Lordfell In reply to ??? [2011-12-30 23:39:47 +0000 UTC]

Urp, ok, now it won't let me see the deviations on top of it. Any idea how to fix this?

👍: 0 ⏩: 0

Lordfell [2011-12-30 23:33:22 +0000 UTC]

Nevermind! I got it!

👍: 0 ⏩: 0

Lordfell In reply to ??? [2011-12-30 23:32:16 +0000 UTC]

It didn't work :/ The URL is the web address right?

👍: 0 ⏩: 0

iAmTamashii In reply to ??? [2011-12-29 23:20:12 +0000 UTC]

Is there a certain code that I'd need to make stamps show up on top of a background?

👍: 0 ⏩: 1

DeathTripp In reply to iAmTamashii [2012-01-13 16:39:48 +0000 UTC]

shouldn't need another code...just use the normal stamp code but make sure its inside the area where the "content" of your box goes i.e. your text and other stuff.

👍: 0 ⏩: 1

iAmTamashii In reply to DeathTripp [2012-01-13 16:55:29 +0000 UTC]

Ah okay.I've actually figured it out a few days ago so I understand now.

👍: 0 ⏩: 1

DeathTripp In reply to iAmTamashii [2012-01-13 17:19:26 +0000 UTC]

sorry for the late reply ):

👍: 0 ⏩: 1

iAmTamashii In reply to DeathTripp [2012-01-13 17:24:01 +0000 UTC]

It's okay. I was also wondering how to get the CSS for gallery skins(which I am having the most trouble with an tutorials are too complex....)

👍: 0 ⏩: 1

DeathTripp In reply to iAmTamashii [2012-01-13 20:54:55 +0000 UTC]

do you mean backgrounds in your gallery? or actual skins?

👍: 0 ⏩: 1

iAmTamashii In reply to DeathTripp [2012-01-13 23:53:20 +0000 UTC]

Backgrounds for my gallery

👍: 0 ⏩: 1

DeathTripp In reply to iAmTamashii [2012-01-18 21:49:36 +0000 UTC]

to do that go into your gallery....you can't change your gallery background on the first page...but if you click on one of the folders you've made....then click "Folder Options" then click the "CSS" tab and then paste the following code: (without the ***************)

******************************

body{
background: url(put your image URL here);
color: #000000;
font-family: Tahoma, Times New Roman, serif;
font-size: 15px;
}

**************************

Where it says "put your image URL here" follow the same steps in the custom background tutorial in order to get the image URL and paste the URL in between the brackets...making sure to keep the brackets there. Then click "OK" and it should change the background. I hope this helps

👍: 0 ⏩: 1

iAmTamashii In reply to DeathTripp [2012-01-18 22:32:37 +0000 UTC]

Okay well I did try it but....I think I copied/pasted the wrong URL(I'll fix it later)

👍: 0 ⏩: 0

TiramisuTwo In reply to ??? [2011-12-24 06:06:14 +0000 UTC]

great tutorial ^^

👍: 0 ⏩: 1

DeathTripp In reply to TiramisuTwo [2012-01-13 16:39:54 +0000 UTC]

thank you!

👍: 0 ⏩: 1

TiramisuTwo In reply to DeathTripp [2012-01-14 02:14:31 +0000 UTC]

you're welcome

👍: 0 ⏩: 0

Teddivision In reply to ??? [2011-12-22 03:31:39 +0000 UTC]

Thanks,This helped me a lot!

👍: 0 ⏩: 1

DeathTripp In reply to Teddivision [2012-01-13 16:40:02 +0000 UTC]

awesome! you're welcome!

👍: 0 ⏩: 0

MellowPanda In reply to ??? [2011-12-21 12:58:30 +0000 UTC]

THANK GOD. A TUTORIAL THAT WORKS!!!!

Thank you for making this, alot of people appreciate this thanks!

👍: 0 ⏩: 1

DeathTripp In reply to MellowPanda [2012-01-13 16:40:29 +0000 UTC]

haha you're most welcome! I will be making an updated and better version...eventually lol

👍: 0 ⏩: 1

MellowPanda In reply to DeathTripp [2012-01-13 17:51:01 +0000 UTC]

Haha can't wait c:

👍: 0 ⏩: 0

LazyLuLu22 In reply to ??? [2011-12-20 02:16:00 +0000 UTC]

this helped so much!
thxs for making it!!

👍: 0 ⏩: 1


<= Prev | | Next =>