HOME | DD

DeathTripp — Custom Box Background Tutorial

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

SynthSymphony - Your Religion is NOT an excuse to be a Bigot.

SynthSymphony - OPEN ~ Free Toyhou.se Codes ~

Dynamu1 - Steam Artwork - Dorothy | Nikke Goddess of Victory

Dynamu1 - Steam Artwork - Dorothy | Nikke Goddess of Victory

dewy60 - Loonbase_Daff (Custom Character Base)

brynls - Seedy Farmer [🤖]

dewy60 - Loonbase_Bugsy (Custom Character Base)

spiraloso - 200 White Scifi Elements Pack

Indae - Custom box background tutorial

CypherVisor - Custom-box Background Tutorial

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

TaNa-Jo - Custom Box Tutorial

ThisMechaJunkie - Username Changing

TheMangaPit - Journal Skin Links Help

MissCelia - HOW TO: make journal skins 1

endlesssly - Make your skin accessible

Metterschlingel - Text File Journal Skin Guide
Comments: 1030

Skelettaa In reply to ??? [2010-10-19 21:52:03 +0000 UTC]

Aww can't access the original source you link to. That account has been deactivated. ; ;

👍: 0 ⏩: 1

DeathTripp In reply to Skelettaa [2010-10-21 10:37:47 +0000 UTC]

oh you need to go to the new account here --> ~Backup-Lunari or at least a back up of his works ^^

👍: 0 ⏩: 1

Skelettaa In reply to DeathTripp [2010-10-21 17:16:03 +0000 UTC]

Ah yeah, someone beat ya to it and showed me. Thank you though. ^^

👍: 0 ⏩: 0

MellowTweekerNEY In reply to ??? [2010-10-19 01:53:00 +0000 UTC]

Thankyou so much : D

👍: 0 ⏩: 1

DeathTripp In reply to MellowTweekerNEY [2010-10-21 10:39:18 +0000 UTC]

your very welcome! >w< <3

👍: 0 ⏩: 0

UJz In reply to ??? [2010-10-17 06:55:20 +0000 UTC]

very useful,
Thanks

👍: 0 ⏩: 1

DeathTripp In reply to UJz [2010-10-18 09:54:58 +0000 UTC]

your welcome! Glad I could help!

👍: 0 ⏩: 0

Shadowdog101 In reply to ??? [2010-10-09 03:32:55 +0000 UTC]

hey i tried this but it didb't work

👍: 0 ⏩: 1

DeathTripp In reply to Shadowdog101 [2010-10-12 21:18:26 +0000 UTC]

which part didn't work? did you use it in a "custom box"? because thats the only place it can be used unfortunately D:

👍: 0 ⏩: 1

Shadowdog101 In reply to DeathTripp [2010-10-12 21:46:32 +0000 UTC]

well see I didn't understand any of it and when I tired it just sent a link to the back ground

👍: 0 ⏩: 1

DeathTripp In reply to Shadowdog101 [2010-10-12 21:55:34 +0000 UTC]

hmm...could you paste your code into this box? and I'll see if I can help! ^^ <3

👍: 0 ⏩: 1

Shadowdog101 In reply to DeathTripp [2010-10-12 21:59:15 +0000 UTC]

my what code

👍: 0 ⏩: 1

DeathTripp In reply to Shadowdog101 [2010-10-13 10:50:46 +0000 UTC]

paste the code you used or the URL of the image you want to use as your background and I will help you make a code ^^

👍: 0 ⏩: 1

Shadowdog101 In reply to DeathTripp [2010-10-13 12:08:44 +0000 UTC]

oh kk [link]

👍: 0 ⏩: 1

DeathTripp In reply to Shadowdog101 [2010-10-13 13:59:35 +0000 UTC]

ok here is the URL that you need to use [link]

what you need to do is open this link....copy the URL at the top and paste the URL along with the code in the description of my tutorial into your custom box. You must make sure that the URL goes where it says "IMAGE URL GOES HERE" and you must keep the " marks. Also the whole code must go above everything in your custom box...your stuff goes in the middle section marked THE STUFF IN YOUR CUSTOM BOX GOES HERE and the bottom "div" code should stay at the bottom of your box.

I hope this makes sense and helps you! Please let me know if you need anymore help! ^^ <3

👍: 0 ⏩: 1

Shadowdog101 In reply to DeathTripp [2010-10-13 21:38:31 +0000 UTC]

kk I think I can get it to work

👍: 0 ⏩: 0

AKFPT In reply to ??? [2010-10-03 00:16:01 +0000 UTC]

thank you so much for doing this tutorial it helped me a lot!!

👍: 0 ⏩: 1

DeathTripp In reply to AKFPT [2010-10-06 11:29:05 +0000 UTC]

aww good! glad to hear it! and your welcome! >w< <3

👍: 0 ⏩: 1

AKFPT In reply to DeathTripp [2010-10-06 20:03:12 +0000 UTC]

you're welcome! it really helped me 8D

👍: 0 ⏩: 0

JazzHands-UwUr In reply to ??? [2010-10-01 14:06:09 +0000 UTC]

[link] " />

.


yes i put the at the end too, the forum just wouldn't show it

so help me?

👍: 0 ⏩: 2

DeathTripp In reply to JazzHands-UwUr [2010-10-06 11:31:20 +0000 UTC]

I think you need to get the URL of the picture by going to "download image" next to the image you want and then once the image loads in a new window...right click on it and click "view image" and then it'll refresh and the URL you need to use with the code should be at the top in the address bar! 8) let me know if you need anymore help!

👍: 0 ⏩: 1

JazzHands-UwUr In reply to DeathTripp [2010-10-06 11:45:27 +0000 UTC]

oh okay thanks!

👍: 0 ⏩: 0

JazzHands-UwUr In reply to JazzHands-UwUr [2010-10-01 14:07:04 +0000 UTC]

it will not let me show ?!

👍: 0 ⏩: 0

JazzHands-UwUr In reply to ??? [2010-10-01 14:04:35 +0000 UTC]

this doesn't work for me...
here is the code i'm using, did i do something wrong?


[link] " />

.

👍: 0 ⏩: 0

ThousandEnemies In reply to ??? [2010-09-27 00:15:02 +0000 UTC]

thanks so much for this tutorial . really helpful .

👍: 0 ⏩: 1

DeathTripp In reply to ThousandEnemies [2010-09-28 19:07:50 +0000 UTC]

O7O your very welcome!~ <3

👍: 0 ⏩: 0

XDarkxGirlx4everX In reply to ??? [2010-09-26 01:21:34 +0000 UTC]

The image won't load fore me even though I am following the tut...

👍: 0 ⏩: 0

AshXRin-Fan In reply to ??? [2010-09-24 20:44:43 +0000 UTC]

This was very helpful! Now people can notice my "About Me" box xD

My image didn't need to be long, I don't like overcrowding my page xD But thanks for all the info! I love my page even more <3

👍: 0 ⏩: 1

DeathTripp In reply to AshXRin-Fan [2010-09-28 19:09:52 +0000 UTC]

LOL aww glad to hear you found it helpful! =3

haha your very welcome <3

👍: 0 ⏩: 0

TSB-Studios In reply to ??? [2010-09-22 03:18:49 +0000 UTC]

Used. Thanks so much!

👍: 0 ⏩: 1

DeathTripp In reply to TSB-Studios [2010-09-22 15:20:19 +0000 UTC]

your welcome! <3

👍: 0 ⏩: 0

hazelthewolf In reply to ??? [2010-09-18 19:26:28 +0000 UTC]

This is just what I needed. (:
Though
for some reason, the image I use in the boxes covers/is on top of my text. I'm not sure why.

👍: 0 ⏩: 1

DeathTripp In reply to hazelthewolf [2010-09-21 20:11:39 +0000 UTC]

hmm when you say the top of your text...do you mean the text you put in your custom box? or the custom boxes title?

👍: 0 ⏩: 1

hazelthewolf In reply to DeathTripp [2010-09-22 00:22:22 +0000 UTC]

like I'll put the code in, and the image will actually overlap the text in the text of the custom box. Not the title.

👍: 0 ⏩: 1

DeathTripp In reply to hazelthewolf [2010-09-22 10:58:46 +0000 UTC]

thats because you have to put all the text that is in the box inbetween the part of the code where it says "THE STUFF IN YOUR CUSTOM BOX GOES HERE"...does that makes sense? So get everything in your custom box...copy and paste it into a note pad or sumthin....get the custom box BG code...paste that into the custom box and then inbetween "THE STUFF IN YOUR CUSTOM BOX GOES HERE" re paste all your stuff back in. You need to make sure that the "/div" part stays at the bottom of EVERYTHING in your custom box. I hope this helps.

👍: 0 ⏩: 1

hazelthewolf In reply to DeathTripp [2010-09-26 05:09:44 +0000 UTC]

OH. Thanks!! It works just fine now, thank you!

👍: 0 ⏩: 0

RedPassion In reply to ??? [2010-09-09 23:15:18 +0000 UTC]

Woow thank you for these great infos..but is that also possible, that you can change the color of the font maybe?

👍: 0 ⏩: 1

DeathTripp In reply to RedPassion [2010-09-10 10:31:09 +0000 UTC]

your welcome! Unfortunately...DA haven't made this possible yet...I've tried all the different HTML and CSS codes for colour that I know...and it doesn't work D:

👍: 0 ⏩: 1

RedPassion In reply to DeathTripp [2010-09-13 22:26:58 +0000 UTC]

Alright i see :S But thanks anyway^^ Maybe it will soon

👍: 0 ⏩: 0

Ulta In reply to ??? [2010-09-04 05:47:54 +0000 UTC]

This is exactly what I needed! I shall see if I can get things to work using the info told in this tut. Thank you very much!

👍: 0 ⏩: 1

DeathTripp In reply to Ulta [2010-09-04 13:40:46 +0000 UTC]

your welcome!! it needs a bit of an update so if you need any help, just let me know!

👍: 0 ⏩: 1

Ulta In reply to DeathTripp [2010-09-04 21:32:08 +0000 UTC]

Righto I still have to see if I can get it to work, so I'll let you know how that goes.

👍: 0 ⏩: 0

AlecWolfe In reply to ??? [2010-09-03 06:53:11 +0000 UTC]

Just a little tip - I dunno if you have learnt this or not - after you upload a deviation you don't need to download it to find the url info for the code. Just right click and select 'view image'. It'll take you a page with just the deviation and the info you need with be in the url bar.

Great tutorial, very helpful.

👍: 0 ⏩: 1

DeathTripp In reply to AlecWolfe [2010-09-03 17:35:08 +0000 UTC]

haha...yeah I know...I need to update this tutorial...DA have changed that since I made it a while back...thanks though ^^ and your welcome!

👍: 0 ⏩: 0

j-riddler In reply to ??? [2010-09-01 20:43:34 +0000 UTC]

Phoo! For a minute there I thought I was doing something really wrong...then it started working! (at first the image was resizing very small; I don't even know if adding a keyword helped but it worked after I did. Weird. Probably has nothing to do with it)

Anyway, thanks a bunch for the tutorial! I was wrapping my head around how to do that! @_@ I was too lazy to look in the source code too.

👍: 0 ⏩: 1

DeathTripp In reply to j-riddler [2010-09-02 11:31:55 +0000 UTC]

wow strange...it did that to me before too...but only when I was using photobucket lol

your welcome! Glad I could help! <3

👍: 0 ⏩: 1

j-riddler In reply to DeathTripp [2010-09-02 14:24:04 +0000 UTC]

Ha ha! Must've been one of those DA off days for me! But I got a test "mushroom" background out of it, so that's all good! I'm wondering now where people are getting the button backgrounds, but I could sooner make those myself, too!

👍: 0 ⏩: 1

DeathTripp In reply to j-riddler [2010-09-04 13:59:24 +0000 UTC]

yeah...DA does that a lot to me too! XDD

awesome! it looks great!

I'm not sure about the button backgrounds...but you could try here --> [link] it has a lot of cool codes for changing your DA pages!

👍: 0 ⏩: 1

j-riddler In reply to DeathTripp [2010-09-04 14:46:05 +0000 UTC]

Ha ha! Thank you so much! It's really fun playing with the widgets! When livejournal wasn't so strict, I used to do it like crazy there.

Anyway, thank you ALSO about the link! Now I can play! @_@ You made my hurricane-filled day!

👍: 0 ⏩: 1

DeathTripp In reply to j-riddler [2010-09-04 17:02:32 +0000 UTC]

haha yeah

your welcome!

👍: 0 ⏩: 0


<= Prev | | Next =>