HOME | DD

DeathTripp — Custom Box Background Tutorial

Published: 2010-01-28 18:10:12 +0000 UTC; Views: 158051; Favourites: 5080; 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

suztv - FurBrushes

ZachSano - Glitter Brushes (.ABR) For Photoshop

TrialOfTheTwisted - SELLING OLD SONA (40 Art Pieces, Physical Items)

kamionari - Adoptable Spring Exclusive TLC [🤖]

kamionari - Adoptable Spring Exclusive TLC [🤖]

KEY121314 - 140 20250513165644

Eivyn - Caterpillar Cat Adoptable (OPEN)

KEY121314 - 165 20250513212608

Indae - Custom box background tutorial

CypherVisor - Custom-box Background Tutorial

ThisMechaJunkie - Username Changing

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

TaNa-Jo - Custom Box Tutorial

MissCelia - HOW TO: make journal skins 1

TimberClipse - Custom User Box Tutorial

TheMangaPit - Journal Skin Links Help

endlesssly - Make your skin accessible
Comments: 1030

NekoKitty88 In reply to ??? [2011-08-04 19:35:07 +0000 UTC]

I'm using google chrome ;_;

👍: 0 ⏩: 1

DeathTripp In reply to NekoKitty88 [2011-09-26 10:36:37 +0000 UTC]

I'm not quite sure how to do it google chrome as I haven't tried it...but it should be roughly the same.

👍: 0 ⏩: 0

Overly-Obsessive In reply to ??? [2011-08-03 03:26:57 +0000 UTC]

Thank you so much! <3

👍: 0 ⏩: 0

ihatcak In reply to ??? [2011-08-02 03:19:29 +0000 UTC]

I followed all the directions VERY carefully, but when I put it in my box, nothing happened.

The is at the very bottom, too.

👍: 0 ⏩: 0

Star1061 In reply to ??? [2011-07-29 23:46:36 +0000 UTC]

I followed the directions
but for some reason it did not work D:
Do you mind helping me? Here's my deviation link [link]

👍: 0 ⏩: 1

DeathTripp In reply to Star1061 [2011-07-31 21:08:57 +0000 UTC]

Okay, did you try clicking "Download Image", then when the box comes up and the image loads right-click on the image and click "View Image". The window should refresh and give you a new URL at the top in the address bar. This is the URL that you need to use along with the code in my tutorial. If you have any trouble please let me know. (this is the URL that should come up if you follow these instructions [link] )

👍: 0 ⏩: 0

gingerbreadwolfeh In reply to ??? [2011-07-28 20:02:40 +0000 UTC]

its not working for me :c I followed all your directions throughly but when i posted the code and URL in the custom box my picture didnt show up. :c The code didnt show up, either. can you help? >_<

👍: 0 ⏩: 1

DeathTripp In reply to gingerbreadwolfeh [2011-07-28 20:24:35 +0000 UTC]

hmm, if you give me a link to your deviation I'll see if I can get it to work on my own page and I'll give you the code? ^^

👍: 0 ⏩: 1

gingerbreadwolfeh In reply to DeathTripp [2011-07-28 20:27:08 +0000 UTC]

Thank you so much c:
[link]

👍: 0 ⏩: 1

DeathTripp In reply to gingerbreadwolfeh [2011-07-28 20:46:37 +0000 UTC]

okay well this is how your code should look when its in your box [link]

I had to do it as a picture because the code dissapears if I paste it as a comment XD haha. But this is the URL for the image you need [link] just put that where it says "IMAGE URL GOES HERE" (make sure you keep the " and " either side) and then you can write where it says "THE STUFF IN YOUR CUSTOM BOX GOES HERE" (keep the div code at the bottom) and it should all work! *fingers crossed* 8D

If you need anymore help let me know! ^^ <3 I hope that helps!

👍: 0 ⏩: 1

gingerbreadwolfeh In reply to DeathTripp [2011-07-28 20:50:36 +0000 UTC]

It worked! Thanks so much for the help! If I may ask, how did you get the URL for that picture? Cuz when i clicked download it gave me something different than that and i think that was the problem. :3

👍: 0 ⏩: 1

DeathTripp In reply to gingerbreadwolfeh [2011-07-28 21:09:03 +0000 UTC]

you're welcome! ^^ glad I could help!

sure, I clicked download image and then I right-clicked on the image in the new window that came up and clicked "view image" and then it refreshed with a new URL...thats the one you need to use! ^^

👍: 0 ⏩: 1

gingerbreadwolfeh In reply to DeathTripp [2011-07-28 21:16:53 +0000 UTC]

okay, thanks so much for the help, I appreciate it! :3

👍: 0 ⏩: 1

DeathTripp In reply to gingerbreadwolfeh [2011-07-31 21:01:43 +0000 UTC]

^^ no problem! any time!

👍: 0 ⏩: 0

Iheartnella In reply to ??? [2011-07-27 19:47:41 +0000 UTC]

this is awesome and it worked thanks a million

👍: 0 ⏩: 1

DeathTripp In reply to Iheartnella [2011-07-28 20:24:45 +0000 UTC]

you're welcome! <3

👍: 0 ⏩: 0

emiiarryoux In reply to ??? [2011-07-13 07:05:31 +0000 UTC]

Thank you so much! 8D

👍: 0 ⏩: 1

DeathTripp In reply to emiiarryoux [2011-07-14 16:30:32 +0000 UTC]

^^ no problem!! glad I could help!

👍: 0 ⏩: 0

BlueyCrawford In reply to ??? [2011-07-12 04:56:40 +0000 UTC]

This really helped, thnx sooo much!! <3

👍: 0 ⏩: 1

DeathTripp In reply to BlueyCrawford [2011-07-14 16:30:52 +0000 UTC]

aww thanks! glad I could help!

👍: 0 ⏩: 1

BlueyCrawford In reply to DeathTripp [2011-07-14 17:14:42 +0000 UTC]

You really did, thanks alot! ^^

👍: 0 ⏩: 0

beamthechao In reply to ??? [2011-07-09 01:43:32 +0000 UTC]

Aww, this tutorial makes it easy to understand! Thanks for making it! *A*

👍: 0 ⏩: 1

DeathTripp In reply to beamthechao [2011-07-14 16:31:12 +0000 UTC]

you're welcome! Glad I could help!

👍: 0 ⏩: 0

Saint-Chimaira In reply to ??? [2011-06-27 10:42:20 +0000 UTC]

I've tried, but the picture wasn't repeated / fit well.... My custom box is long btw can you help?

👍: 0 ⏩: 1

DeathTripp In reply to Saint-Chimaira [2011-06-30 14:15:35 +0000 UTC]

I see, you would have to make your custom Background image/picture longer manually then. So far thats the only way to do it as there isn't really a pattern repeat code that you can use...I also had the same problem myself.

👍: 0 ⏩: 1

Saint-Chimaira In reply to DeathTripp [2011-07-22 09:06:14 +0000 UTC]

oh I see :">

how about the button? can you help me to share CSS about button in custom?

👍: 0 ⏩: 0

mruki In reply to ??? [2011-06-21 23:16:40 +0000 UTC]

AHHHH - thank you so much!

I've been trying to figure out how to do this for over a year (and going to HTML sites and CSS sites didn't work)!

THIS IS SO HELPFUL THANK YOU.

👍: 0 ⏩: 1

DeathTripp In reply to mruki [2011-06-24 19:59:27 +0000 UTC]

you're welcome! glad I could help!

👍: 0 ⏩: 0

Bemused-Hara In reply to ??? [2011-06-20 19:55:26 +0000 UTC]

Do you need a premium membership to do this?

👍: 0 ⏩: 2

DeathTripp In reply to Bemused-Hara [2011-06-24 19:59:40 +0000 UTC]

unfortunately yes D:

👍: 0 ⏩: 0

cutelilkitkat In reply to Bemused-Hara [2011-06-21 21:00:14 +0000 UTC]

Yep I think so. Sorry. I don't think you can add custom boxes on a free account.

👍: 0 ⏩: 0

ssnugglepunk In reply to ??? [2011-06-19 10:06:27 +0000 UTC]

oh its ok, i've got it now :3 <333
thanks for this tutorial

👍: 0 ⏩: 1

DeathTripp In reply to ssnugglepunk [2011-06-24 19:59:53 +0000 UTC]

aww you're welcome! Glad It works!

👍: 0 ⏩: 0

ssnugglepunk In reply to ??? [2011-06-19 09:53:46 +0000 UTC]

when you click "view source" it brings up waaaaaaay more coding than that :c
i went through pages and pages of it just to find the src bit... and when i pasted it it only brought up the thumbnail O.o

👍: 0 ⏩: 0

FireGemini In reply to ??? [2011-06-15 00:06:03 +0000 UTC]

do u know how to change the text color?

👍: 0 ⏩: 1

DeathTripp In reply to FireGemini [2011-06-24 20:00:44 +0000 UTC]

no sorry I don't. ): I have tried a few times with different codes and I don't think DeviantART allows HTML colour codes in custom boxes.

👍: 0 ⏩: 0

FireGemini In reply to ??? [2011-06-14 23:27:32 +0000 UTC]

wait. how do we put our content in there? u said, ur custom content will go there.... but i thought we already put our links...

👍: 0 ⏩: 1

DeathTripp In reply to FireGemini [2011-06-24 20:01:24 +0000 UTC]

the content goes where it says "THE STUFF IN YOUR CUSTOM BOX GOES HERE"

👍: 0 ⏩: 0

3DCATZ In reply to ??? [2011-06-14 04:18:22 +0000 UTC]

It isn't working? The box is blank, but when I click Edit on the box... the code is there? I'm confused?!

I use FireFox BTW.

👍: 0 ⏩: 1

DeathTripp In reply to 3DCATZ [2011-06-14 09:20:55 +0000 UTC]

D: okay...do you have a link to you the deviation you want to use as a background please?

👍: 0 ⏩: 1

3DCATZ In reply to DeathTripp [2011-06-14 14:32:19 +0000 UTC]

[link]

👍: 0 ⏩: 1

DeathTripp In reply to 3DCATZ [2011-06-14 15:28:01 +0000 UTC]

Okay this is the URL you need to use with the code [link]

try it out like it is below (only change the [LINK] to the URL I gave you) then make sure the code is at the top of everything in the box...then what you wanna put in your box under it...and finally the /div code is at the bottom of everything. (remember to keep the " " marks eitherside of the URL). I hope this helps...let me know if not!

<div class="popup2-moremenu"><div class="floaty-boat"><img src="[link] " />>>

>

THE STUFF IN YOUR CUSTOM BOX GOES HERE

>

👍: 0 ⏩: 1

3DCATZ In reply to DeathTripp [2011-06-14 16:14:11 +0000 UTC]

It's still not working D:

👍: 0 ⏩: 1

DeathTripp In reply to 3DCATZ [2011-06-14 18:39:39 +0000 UTC]

I just tried it on one of my custom boxes and it works fine ): look at the bottom of my profile page on the left. Is there anyway you could send me a screenshot of your custom box in edit mode...so that I can look at the code? Do you have photobucket?

👍: 0 ⏩: 1

3DCATZ In reply to DeathTripp [2011-06-14 21:38:26 +0000 UTC]

Image bam of it ? Note me.

👍: 0 ⏩: 1

DeathTripp In reply to 3DCATZ [2011-06-15 20:35:40 +0000 UTC]

oki doki <3

👍: 0 ⏩: 0

MadModesty In reply to ??? [2011-06-13 17:26:58 +0000 UTC]

thanks for this, I've been looking forever!
however, the background image goes OVER my content D:
how do I fix this ?

👍: 0 ⏩: 1

DeathTripp In reply to MadModesty [2011-06-13 18:13:46 +0000 UTC]

the BG code needs to go at the very top of everything in the custom box and then the /div code needs to be at the bottom of all your contents in the box (also this code does not work in featured deviation or ID boxes...only blank custom boxes)

👍: 0 ⏩: 1

MadModesty In reply to DeathTripp [2011-06-13 20:22:47 +0000 UTC]

ohhh I see! thank you

👍: 0 ⏩: 0

Kaspiian In reply to ??? [2011-06-13 01:42:47 +0000 UTC]

when i downloaded the deviantation...the URL was just "about:blank" and it didnt work...what happend?

👍: 0 ⏩: 1


<= Prev | | Next =>