HOME | DD

DeathTripp — Custom Box Background Tutorial

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

starchu14 In reply to ??? [2010-12-25 23:04:38 +0000 UTC]

no prob!^O^

👍: 0 ⏩: 0

whisingbloomer In reply to ??? [2010-12-16 13:51:00 +0000 UTC]

This worked :,D thanks so much!

👍: 0 ⏩: 1

DeathTripp In reply to whisingbloomer [2010-12-20 10:57:15 +0000 UTC]

your welcome!

👍: 0 ⏩: 0

deneen990 In reply to ??? [2010-12-16 09:50:54 +0000 UTC]

umm its not working for me heres the txt I used, of course I had an image link in their..so at 1st I thought it was my image but then I tried the exact text from your tutorial..please help



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

>

THE STUFF IN YOUR CUSTOM BOX GOES HERE

>

👍: 0 ⏩: 1

DeathTripp In reply to deneen990 [2010-12-20 10:59:42 +0000 UTC]

It probably wont work because DA has changed a little since I made this tutorial. The problem might be with the URL you got from your Background image.

what you need to do is click download on your BG image that you want to use...Then when the window loads, right click on the image and click "view image". The window should refresh and the URL that you need should now be in the bar at the top. I hope this helps! Let me know if it doesn't...sorry for such a late reply.

👍: 0 ⏩: 1

deneen990 In reply to DeathTripp [2010-12-20 15:40:59 +0000 UTC]

Thats ok & i think paart of the issue is my computer. I dont having the option of right clicking & hitting view. Its in the list when I right click but its greyed out & says its not allowed

👍: 0 ⏩: 0

wugglyump In reply to ??? [2010-12-16 03:12:49 +0000 UTC]

woohoo

my boxes look pretty now
but do you know where I can get the code for the gallery boxes?

👍: 0 ⏩: 1

DeathTripp In reply to wugglyump [2010-12-20 11:04:40 +0000 UTC]

Sorry for the late reply.

For your gallery folders what you need to do is go into the desired folder and click "Folder options" at the top on the right. Next click the CSS tab. and use the following code:

body{
background: url(BACKGROUND IMAGE URL GOES HERE);
color: #000000;
font-family: Tahoma, Times New Roman, serif;
font-size: 15px;
}

Replace "BACKGROUND IMAGE URL GOES HERE" with your Image URL (just follow the same steps as before to get the code...or just pinch it off of one of your custom boxes). You can also change the font type and size here. (but remember that if you change it to a font that other people don't have installed on their computer...It'll just look like a defult font to them when they visit your gallery). Then click Okay!

I hope this helps!

👍: 0 ⏩: 0

Nakusa In reply to ??? [2010-12-14 03:23:57 +0000 UTC]

awesome!! thanks for sharing !! ♥ Now I have a background in my custom box, thanks! :'D!

👍: 0 ⏩: 1

DeathTripp In reply to Nakusa [2010-12-20 10:57:29 +0000 UTC]

your welcome ^^ <3

👍: 0 ⏩: 0

Bfoxtheguile In reply to ??? [2010-12-08 18:15:33 +0000 UTC]

so um, how do you change the colour of the font?

👍: 0 ⏩: 1

DeathTripp In reply to Bfoxtheguile [2010-12-12 18:53:26 +0000 UTC]

you can't...DA doesn't allow you to do that at the moment. I have tried several codes and none of them have worked. Sorry

👍: 0 ⏩: 1

Bfoxtheguile In reply to DeathTripp [2010-12-12 22:25:10 +0000 UTC]

alright

👍: 0 ⏩: 0

Lady-Blackdove In reply to ??? [2010-12-08 17:15:17 +0000 UTC]

zOMFG THANKOO SO MUCH

👍: 0 ⏩: 1

DeathTripp In reply to Lady-Blackdove [2010-12-12 18:53:32 +0000 UTC]

lol your welcome! <3

👍: 0 ⏩: 0

SaI-no-SaI In reply to ??? [2010-12-06 11:43:11 +0000 UTC]

i have a question with this.. what code should i use if the content is a slideshow? i tried to put the codes but the slieshow of my artworks didn't appear. and btw.. how can i change the font color of the text? I'm using black background so i can't see the text TT^TT thank you so much for the answer

👍: 0 ⏩: 1

DeathTripp In reply to SaI-no-SaI [2010-12-06 20:58:16 +0000 UTC]

The custom box background is quite limited at the moment (I don't know if DeviantART will change its ways anytime soon) At the moment there is not extra code to add to make the background show up behind artwork (unless its a thumbnail) so you cannot place a custom background in a "featured artwork widget" or a "slideshow widget" and there is no way at the moment to change the font colour inside a custom box. I have tried several different methods/codes and none of them have worked OTL I'm sorry I couldn't be of much help!

👍: 0 ⏩: 1

SaI-no-SaI In reply to DeathTripp [2010-12-07 00:09:26 +0000 UTC]

its okay.. thank you~ i hope deviantart lets us customize our page fully TT^TT

👍: 0 ⏩: 0

Noire-Neurose In reply to ??? [2010-12-05 03:57:51 +0000 UTC]

YATJKATN THANKS

👍: 0 ⏩: 0

supahappysunshine In reply to ??? [2010-12-04 10:10:20 +0000 UTC]

Thankyou!!!!

👍: 0 ⏩: 0

formatela In reply to ??? [2010-12-02 22:04:13 +0000 UTC]

Thank you - I didn't realise you could do this. I'll certainly be using it. This is a great tutorial.
Unfortunately capturing the URL didn't work for me in IE, and I read some of the comments below from people who I think had the same problem.
Hope you don't mind me posting this, I tried this, it worked for me :-
----
Click on Download
When the image is displayed, right click on it and select 'Properties' from the menu
Highlight the URL - shown next to 'Address (URL), right click and select 'Copy'
Paste the URL into the right place in DeathTripp's code
-----

Thanks again - I think I'l be wrapping some Christmas tree lights around some custom boxes on my page

👍: 0 ⏩: 1

PlasticNightingale In reply to formatela [2010-12-08 02:16:19 +0000 UTC]

thank you so much, if I hadnt read this coment I would have never figured it out!

👍: 0 ⏩: 1

formatela In reply to PlasticNightingale [2010-12-08 21:25:12 +0000 UTC]

Thanks! I'm glad it helped

👍: 0 ⏩: 0

McRockstar In reply to ??? [2010-11-26 15:49:17 +0000 UTC]

Thanks very much . I've been trying this . Me too didn't get it right at the start . I think You should change that the picture has to be opened in a new tab or window and that url must be used.
This was very helpful.
Also I would like to inform that you can take any size of image . Not compulsory 1000x1600.
Thanks


Arjun or =McRockstar

👍: 0 ⏩: 0

kmwblackbelt In reply to ??? [2010-11-24 20:28:16 +0000 UTC]

So If I wanted this pic for the BG [link]

What would the code be? T_T I think I'm doing it wrong

👍: 0 ⏩: 1

Ayanyami In reply to kmwblackbelt [2010-12-17 04:27:57 +0000 UTC]

Just click on download, copy the URL, and put it in the code she provided in the comments

👍: 0 ⏩: 1

kmwblackbelt In reply to Ayanyami [2010-12-17 11:16:23 +0000 UTC]

It just makes a link T_T

👍: 0 ⏩: 1

Ayanyami In reply to kmwblackbelt [2010-12-17 12:18:41 +0000 UTC]

Hmmm I dunno.

👍: 0 ⏩: 0

drumma2000 In reply to ??? [2010-11-22 20:40:46 +0000 UTC]

thanks for this ^^ its helpful!!

👍: 0 ⏩: 0

ohmisskai In reply to ??? [2010-11-20 23:34:47 +0000 UTC]

ooh, very helpful! ^^

👍: 0 ⏩: 0

Lolita-Tigress In reply to ??? [2010-11-10 02:12:26 +0000 UTC]

What if you have boxes like the ones on my page in the custom ones? The image won't work.

👍: 0 ⏩: 0

MartinaDaBologna In reply to ??? [2010-10-27 17:32:30 +0000 UTC]

maybe dA has changed the codes a little bit 'cause it doesn't work now.
When you insert the code, result is:


....plus text you have written

I'm getting crazy!!!!

👍: 0 ⏩: 1

DeathTripp In reply to MartinaDaBologna [2010-10-28 09:05:38 +0000 UTC]

sorry...it has changed a little yes...and I haven't updated this tutorial in a while. all you need to do is click download on the image you want. Then when the window loads the picture, right click on the image and click "view image" then when it refreshes you need to use the URL at the top. This should work along with the other code to make your custom box background appear!

👍: 0 ⏩: 1

MartinaDaBologna In reply to DeathTripp [2010-10-28 13:11:52 +0000 UTC]

still doesn't work, same thing as before

👍: 0 ⏩: 1

formatela In reply to MartinaDaBologna [2010-12-02 21:58:24 +0000 UTC]

This is a great tutorial - but DA does seem to have changed things.
Try this, it worked for me :-

Click on Download
When the image is displayed, right click on it and select 'Properties' from the menu
Highlight the URL - shown next to 'Address (URL), right click and select 'Copy'
Paste the URL into the right place in DeathTripp's code

👍: 0 ⏩: 1

MartinaDaBologna In reply to formatela [2010-12-03 10:27:52 +0000 UTC]

👍: 0 ⏩: 0

Krooked-Glasses In reply to ??? [2010-10-26 03:45:37 +0000 UTC]

Is there a way to change the font color? I need it to be white because I want to use a dark background.

👍: 0 ⏩: 1

DeathTripp In reply to Krooked-Glasses [2010-10-26 10:28:06 +0000 UTC]

unfortunately there isn't anyway of changing the font colour in your custom box yet until DeviantART changes the types of CSS/HTML codes allowed. I have tried several different codes myself because I was also planning on using a dark BG in one of my boxes and none of them seemed to work. Sorry :/ If I find anything out I'll let you know! <3

👍: 0 ⏩: 1

Krooked-Glasses In reply to DeathTripp [2010-10-26 23:38:12 +0000 UTC]

Ah! I see!
Thankyousomuch!!

👍: 0 ⏩: 0

AReluctant-Hero In reply to ??? [2010-10-26 00:38:22 +0000 UTC]

When I inserted the URL it didn't work :/

👍: 0 ⏩: 1

DeathTripp In reply to AReluctant-Hero [2010-10-26 10:26:10 +0000 UTC]

this might be because this tutorial needs updating...Deviantart has changed a little since this...if you want to get the URL for your picture you need to do the following:

Click Download and wait for the picture to load in a new window. Next right click on the image and click "view image" (this should reload the window and give you the URL at the address bar in the top) paste the URL along with the code into your custom box! Remember that the second div code must be riiiight at the bottom of everything in you custom box. I hope this helps! Let me know if you need anything else! <3 >w<

👍: 0 ⏩: 0

Yahuli In reply to ??? [2010-10-25 20:20:57 +0000 UTC]

Thanks so much for this tutorial. I've been wondering how to do this for a long while now.

👍: 0 ⏩: 1

DeathTripp In reply to Yahuli [2010-10-26 10:23:09 +0000 UTC]

your very welcome! >w< <3

👍: 0 ⏩: 0

Baka-Ani In reply to ??? [2010-10-24 18:23:01 +0000 UTC]

OMG I LUV YOU!!

👍: 0 ⏩: 1

DeathTripp In reply to Baka-Ani [2010-10-26 10:23:00 +0000 UTC]

OwO <3

👍: 0 ⏩: 0

Krooked-Glasses In reply to ??? [2010-10-23 07:12:43 +0000 UTC]

If you use a pattern, is there a part for the code to make it repeat???

👍: 0 ⏩: 1

DeathTripp In reply to Krooked-Glasses [2010-10-26 10:22:55 +0000 UTC]

there might be a code somewhere...but I didn't use a code for repeating the pattern...it's not a "tiled" Background...its one big picture made in photoshop...to repeat the pattern you just flip your image in photoshop and paste it in rows...if that makes sense?

👍: 0 ⏩: 1

Krooked-Glasses In reply to DeathTripp [2010-10-26 22:22:11 +0000 UTC]

Ah, okay!
Lol I decided to take the tile and repeat it over and over again. OTL
Thanks so much though for the tutoriaaaaaaalll!!!!!!!!!

👍: 0 ⏩: 0

MellowTweekerNEY In reply to ??? [2010-10-22 02:35:11 +0000 UTC]

Once again , thank you so much for this ouo .

👍: 0 ⏩: 1

DeathTripp In reply to MellowTweekerNEY [2010-10-26 10:21:28 +0000 UTC]

your welcome! >w< <3

👍: 0 ⏩: 0


<= Prev | | Next =>