HOME | DD

DeathTripp — Custom Box Background Tutorial

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

EmoWolf26 In reply to ??? [2012-08-18 05:16:33 +0000 UTC]

bro, i love you i might use the one your using in the tutorial for a little while x]

👍: 0 ⏩: 0

Thunderjix In reply to ??? [2012-08-13 17:43:08 +0000 UTC]

im still so confused ;n;

👍: 0 ⏩: 2

Coffea-Tea In reply to Thunderjix [2012-08-14 15:37:42 +0000 UTC]

part of the coding got taken off. :/
it's in the description under "THE CODE" ^^

👍: 0 ⏩: 1

Thunderjix In reply to Coffea-Tea [2012-08-14 19:56:03 +0000 UTC]

I already got it

👍: 0 ⏩: 0

Coffea-Tea In reply to Thunderjix [2012-08-14 15:36:44 +0000 UTC]

In short words, basically all you have to do is make a custom box, go to edit,
paste this:



in the part of the image that says "IMAGE GOES HERE" you paste the image's URL *where you would type in deviantart.com
or some other site*

👍: 0 ⏩: 1

Thunderjix In reply to Coffea-Tea [2012-08-14 19:56:21 +0000 UTC]

I already got it

👍: 0 ⏩: 0

RaepTimeW00T In reply to ??? [2012-08-09 06:30:12 +0000 UTC]

Thank you sooooooo much~! .D.

👍: 0 ⏩: 0

Equive In reply to ??? [2012-08-03 11:48:48 +0000 UTC]

When I try to use it my featured picture disappears and there's just the custom-box background .__________. HELP D':

👍: 0 ⏩: 0

Asher12 In reply to ??? [2012-07-17 19:40:00 +0000 UTC]

You are the only one I can understand (: thanks for your help !!!

👍: 0 ⏩: 0

ankorr [2012-07-15 10:00:45 +0000 UTC]

its not working....i typed everything and did everything but its NOT working it just shows the stuff ive typed in :/

👍: 0 ⏩: 0

Artimisso In reply to ??? [2012-07-14 20:17:22 +0000 UTC]

In this moment it has 63.859 views. It is not accidental: this tutto is very useful!

Thanks DeathTripp!

👍: 0 ⏩: 0

Kimsly In reply to ??? [2012-07-12 09:42:04 +0000 UTC]

Never mind i got it LMAO TY

👍: 0 ⏩: 0

Kimsly In reply to ??? [2012-07-12 09:30:46 +0000 UTC]

It didnt work OTL

👍: 0 ⏩: 0

Who-Butt [2012-07-11 20:03:59 +0000 UTC]

O M G! Thank you SOOOO much!! I would try and try and thanks to your tut. I finally figured it out!!!!! I was erasing the " marks where you put the url and that's what was messing it up!! Thanks again!!!

👍: 0 ⏩: 0

SugahCookie [2012-07-10 21:19:07 +0000 UTC]

I get it, but how do you repeat the image?

👍: 0 ⏩: 0

MyKatzuki [2012-07-05 21:07:57 +0000 UTC]

Thank you!

👍: 0 ⏩: 0

John--Ace [2012-07-05 00:24:10 +0000 UTC]

thanks so much

👍: 0 ⏩: 0

Goodnight-Melbourne In reply to ??? [2012-07-03 18:23:07 +0000 UTC]

not working in my group's custom box :/ the image is only appearing before the text in my custom box like a normal image link

👍: 0 ⏩: 1

A-M4-COM In reply to Goodnight-Melbourne [2012-07-09 21:07:15 +0000 UTC]

because you are not a premium member

👍: 0 ⏩: 1

Goodnight-Melbourne In reply to A-M4-COM [2012-07-10 02:03:18 +0000 UTC]

Yes i realized in past days. Thank you.

👍: 0 ⏩: 0

SpiritInSpace In reply to ??? [2012-06-29 22:15:35 +0000 UTC]

when I did it the picture went about halfway down and the stopped

👍: 0 ⏩: 0

SailorStarky In reply to ??? [2012-06-29 05:39:55 +0000 UTC]

;_; i feel so stupid..
I do get it 3X

👍: 0 ⏩: 0

Felixia-mew In reply to ??? [2012-06-27 20:49:53 +0000 UTC]

what if you use safari?

👍: 0 ⏩: 0

SnowLilies In reply to ??? [2012-06-24 14:33:09 +0000 UTC]

I'm seriously confused. I did everything this tutorial said, and the the code and URL STILL won't work! What am I doing wrong?

👍: 0 ⏩: 0

Porcelean In reply to ??? [2012-06-21 21:45:14 +0000 UTC]

so how do i put the picture on the background of the custom page not just the bottom?

👍: 0 ⏩: 0

coolGrovyle In reply to ??? [2012-06-20 14:47:08 +0000 UTC]

its not working... ;A; I did the URL thingy and the thingy but it wont work...DX

👍: 0 ⏩: 0

cryas In reply to ??? [2012-06-20 05:26:03 +0000 UTC]

I NEED HELP!

👍: 0 ⏩: 1

A-M4-COM In reply to cryas [2012-07-09 21:08:02 +0000 UTC]

You need Premium Membership first.

👍: 0 ⏩: 0

Disappointed-Gastly In reply to ??? [2012-06-17 23:39:50 +0000 UTC]

This is a dumb question, but is there like a code that I could put one of those BG things on my ID box or Gallery box?

👍: 0 ⏩: 0

Fayven In reply to ??? [2012-06-14 10:35:40 +0000 UTC]

Great, thank you so much^^ But I have a question: How did you save the 1.000 x 1.600-Pixel-picture in PS?

👍: 0 ⏩: 0

Creamydigital [2012-06-12 15:26:02 +0000 UTC]

Thank you so much

👍: 0 ⏩: 0

SMM97 In reply to ??? [2012-06-10 10:44:37 +0000 UTC]

Thank you SO much for making this! *Q* Everything now is so much easier to understand!

👍: 0 ⏩: 0

Ducie In reply to ??? [2012-06-09 08:14:53 +0000 UTC]

How do you get an image in your custom box? If i copy the thumb. it get realluy small

👍: 0 ⏩: 0

Asqard In reply to ??? [2012-06-07 12:34:40 +0000 UTC]

It doesn't work

👍: 0 ⏩: 0

freeiwi In reply to ??? [2012-06-03 21:38:35 +0000 UTC]

Thanks! This helps so much!

👍: 0 ⏩: 0

SenshirouGiou In reply to ??? [2012-05-31 09:42:20 +0000 UTC]

thank you, thank you so much. it worked splendidly

👍: 0 ⏩: 0

OrbularBird In reply to ??? [2012-05-29 09:32:59 +0000 UTC]

Little question about this,I got the image to show up in the boxes,shows everything in the box expect the deviation.Its a featured deviation box, and I'm not sure what is wrong with there coding to make it not show the deviation :c Need some help if you can help

👍: 0 ⏩: 0

Theaxay In reply to ??? [2012-05-29 01:23:45 +0000 UTC]

oh god thank you so much, I spent like two hours trying to find something like this thankyouthankyouthankyou

👍: 0 ⏩: 0

maitoenkeli In reply to ??? [2012-05-25 14:06:18 +0000 UTC]

nawww, i cant get it work. ;A;

👍: 0 ⏩: 0

MexRated In reply to ??? [2012-05-16 23:20:24 +0000 UTC]

Omg, I've been looking everywhere for this OTL !
THANK YOU !

👍: 0 ⏩: 0

Shadowhedge1001 In reply to ??? [2012-05-16 00:32:11 +0000 UTC]

WOW! THANK you for making this!

1 question........ What is the URL? -.-

👍: 0 ⏩: 0

Color--Spectrum In reply to ??? [2012-05-12 21:07:29 +0000 UTC]

How do I center all the text in the box?

👍: 0 ⏩: 1

Crystal-Moore In reply to Color--Spectrum [2012-05-18 03:31:44 +0000 UTC]

Use this html tag, but without the spaces:

< div align="center" >center me please!< /div>

👍: 0 ⏩: 1

Color--Spectrum In reply to Crystal-Moore [2012-05-18 04:07:04 +0000 UTC]

OH MY GOD THANK YOU.

👍: 0 ⏩: 1

Crystal-Moore In reply to Color--Spectrum [2012-05-19 02:43:50 +0000 UTC]

You are very welcome!

👍: 0 ⏩: 0

InternalSoull In reply to ??? [2012-05-03 20:53:54 +0000 UTC]

THANK YOU! >w<

👍: 0 ⏩: 0

IldRev In reply to ??? [2012-04-29 17:53:47 +0000 UTC]

whan i do it the bg comes over my text and pictures!!! HELP!!!!!

👍: 0 ⏩: 1

Crystal-Moore In reply to IldRev [2012-05-18 03:42:44 +0000 UTC]

Make sure that all of your text is inside the code (between the opening and closing tags). If you type anything outside of the code, it will be covered by the background. Also, it only works best with custom boxes. If you put the code in any other widget like the "Newest Deviations", everything will be covered by the background.

👍: 0 ⏩: 1

IldRev In reply to Crystal-Moore [2012-05-18 04:41:40 +0000 UTC]

thx

👍: 0 ⏩: 1

Crystal-Moore In reply to IldRev [2012-05-19 02:42:58 +0000 UTC]

No problem!

👍: 0 ⏩: 0


<= Prev | | Next =>