HOME | DD

CypherVisor avatar

CypherVisor — Custom-box Background Tutorial by-nc-nd


Custom-box Background Tutorial
Published: 2010-06-23 21:01:34 +0000 UTC; Views: 611884; Favourites: 12478; Downloads: 0
Redirect to original
Description »»»»»»»»»»»»»»»»»»»»»»»»»»» Exclusively for Premium members and Super groups only «««««««««««««««««««««««««««



Updated: 23-Feb-2014




How to use ?Just copy the source code(s) below and paste it in your Custombox module in your profile or group page.




Spanish translation of this tutorial





SOURCE CODE:


Code to insert an image without stretching: (ORIGINAL CODE)

<div class="popup2-moremenu"><div class="floaty-boat"><br><img src="URL"/></div></div><div class="gr-box gr-genericbox"><br>Body text here..</div>


Code to stretch an image (It works as to repeat image ONLY FOR SOLID COLOR IMAGES though!) :

Insert the width and height in the <img> tag of the code as shown below:

<img width="YOUR-WIDTH-SIZE" height="YOUR-HEIGHT-SIZE" src="URL"/>


EXAMPLE:
<div class="popup2-moremenu"><div class="floaty-boat"><br><img width="1000" height="1600" src="URL"/></div></div><div class="gr-box gr-genericbox"><br>Body text here..</div>




How to insert a content-holder box inside a custom box?
Simply copy a content-holder boxes from my gallery folder here: LINK and paste it where it says "Body text here.." in the above code.




My background image link (the background that I've used for demo in this tutorial)
------------------------------------------------------------------------------------------------------------------
http://fc07.deviantart.net/fs70/f/2013/227/0/1/demo_by_cyphervisor-d6i84qo.jpg



Other tutorials
Custom background for DeviantID-box widget:


Custom background for New deviation-box widget:





The content holder box used in this tutorial





Want to customize your profile more?
Check all my free resources + tutorials: somrat.deviantart.com/gallery/…



Having any doubt? Please read this F.A.Q. + Tips n Tricks before writing a comment below.
I am a free resource provider for the deviantART community. If you like my free customization resources you can donate some
points Points to me as an appreciation or support.
I take commissions to make custom journal CSS too. Check out my Journal CSS folder or Read-made Journal Skins . Send me a note to contact me.
Related content
Comments: 3487

The-OwOThe-OwO [2020-12-08 17:06:30 +0000 UTC]

Is ms PAINT ok for it?

👍: 0 ⏩: 0

MrCyberlyMrCyberly [2020-04-06 19:39:08 +0000 UTC]

I'm seeing this tutorial has become severely outdated as I'm also seeing backgrounds in some custom widgets has screwed up because of the recent changes DeviantArt has gone through. Whatever DeviantArt did to screw up whatever else we can do in our custom widgets, Cypher probably should be updating these tutorials so that we can all adapt and benefit again.

👍: 0 ⏩: 0

fatherinsectfatherinsect [2019-10-25 02:38:27 +0000 UTC]

bro it doesnt work anymore ;;;;;;;;;

👍: 0 ⏩: 0

OreotheCookieArtistOreotheCookieArtist [2019-07-15 17:27:33 +0000 UTC]

Still not getting it.. You aren't being more specific enough... No offense..

👍: 0 ⏩: 0

PoodlebirdPoodlebird [2019-06-23 14:51:12 +0000 UTC]

nooOOO I've literally been trying this forever until I read that this was only for super groups ;-;

Thanks though

👍: 0 ⏩: 0

PearlGothPearlGoth [2019-05-30 18:59:24 +0000 UTC]

How do I know what size to use for me?

👍: 0 ⏩: 0

kittngorekittngore [2019-04-10 21:49:06 +0000 UTC]

i know im not core but it... doesnt work anymore?? im

👍: 0 ⏩: 1

kittngorekittngore In reply to kittngore [2019-04-10 21:49:42 +0000 UTC]

like i know i cant have custom boxes but this isnt working for my friends who can and it isnt working for me when i do the preview widget thing

👍: 0 ⏩: 1

samira-channnsamira-channn In reply to kittngore [2019-04-19 04:34:16 +0000 UTC]

same here, i rlly need help with this 

👍: 0 ⏩: 1

TheCocodileTheCocodile In reply to samira-channn [2019-09-04 16:00:25 +0000 UTC]

SAME, it's been setting me off a lot!

👍: 0 ⏩: 0

LoovArtLoovArt [2019-03-29 00:11:57 +0000 UTC]

where is the custom box-

👍: 0 ⏩: 1

temmieskullztemmieskullz In reply to LoovArt [2019-04-01 06:30:06 +0000 UTC]

its only for core members only sorrs

👍: 0 ⏩: 1

LoovArtLoovArt In reply to temmieskullz [2019-04-06 02:47:05 +0000 UTC]

ow :'0

👍: 0 ⏩: 0

AntElfAntElf [2019-03-15 19:40:50 +0000 UTC]

How to put the words inside the box?
 

👍: 0 ⏩: 1

MrCyberlyMrCyberly In reply to AntElf [2020-04-06 19:19:52 +0000 UTC]

Gah! I'm having the same problem as you are! DX

👍: 0 ⏩: 0

ArtisanyumiArtisanyumi [2019-03-01 02:23:35 +0000 UTC]

This was very helpful, thank you :D (Big Grin) 

👍: 0 ⏩: 0

MajesticalUnicornsMajesticalUnicorns [2019-02-26 01:16:18 +0000 UTC]

Hidden by Admin

👍: 0 ⏩: 1

xDirewolfyxDirewolfy In reply to MajesticalUnicorns [2019-02-28 02:34:47 +0000 UTC]

You'll need copy and paste this code here into your custom box:
<div class="popup2-moremenu"><div class="floaty-boat"><br><img width="1000" height="1600" src="URL"/></div></div><div class="gr-box gr-genericbox"><br>Body text here..</div>

After "Src=" you'll need to paste the image in where it says URL. To do that, just go to place where the image was originally uploaded, in this case the Stash, just right click and copy the image address and paste it where it says URL, and your background should show up in the custom box.

You'll need to put some stuff in it in order for the entire background to show up/expand of course.

Just put your coding or anything else where it says "Body text here" and all should be fine~

If it doesn't work, I'd be happy to help!

👍: 0 ⏩: 5

kraxchetkraxchet In reply to xDirewolfy [2019-10-01 06:31:53 +0000 UTC]

thanks mate^^

👍: 0 ⏩: 0

teavacadoteavacado In reply to xDirewolfy [2019-09-17 01:24:32 +0000 UTC]

it won't work for me and i'm really confused ahh

👍: 0 ⏩: 0

Mercury-VitaeMercury-Vitae In reply to xDirewolfy [2019-06-08 01:09:56 +0000 UTC]

hi, sorry if this is a dumb question but when i do this, the content holder boxes by cyphor dont show or are pushed to the bottom? any advice? I can note you but dont wanna be a bother

👍: 0 ⏩: 0

Joaqui-StudioJoaqui-Studio In reply to xDirewolfy [2019-06-02 22:07:56 +0000 UTC]

It also works if I want to put images

👍: 0 ⏩: 0

KiruQKiruQ In reply to xDirewolfy [2019-05-23 04:50:07 +0000 UTC]

This helped me ♥ Thank u~.

👍: 0 ⏩: 0

Breadstick-11Breadstick-11 [2019-02-23 00:59:22 +0000 UTC]

what if I’m on iOS 

👍: 0 ⏩: 0

FireClaw90AFireClaw90A [2019-01-01 19:11:23 +0000 UTC]

i feel dumb

👍: 0 ⏩: 1

Galaxypotato07Galaxypotato07 In reply to FireClaw90A [2019-02-24 00:15:57 +0000 UTC]

Ssaaammmeeee

👍: 0 ⏩: 1

FireClaw90AFireClaw90A In reply to Galaxypotato07 [2019-02-25 13:05:43 +0000 UTC]

😔

👍: 0 ⏩: 1

Galaxypotato07Galaxypotato07 In reply to FireClaw90A [2019-02-25 20:32:21 +0000 UTC]

lmao

👍: 0 ⏩: 0

AlreziAlrezi [2018-12-29 15:54:12 +0000 UTC]

Wish I could use this, haha.

👍: 0 ⏩: 0

puppyluv1993puppyluv1993 [2018-11-16 01:18:47 +0000 UTC]

Any way to use a custom box background using Google Chrome? I want to use this:   as my custom box background, and I use Google Chrome as my Internet browser, and I've carefully followed the steps of several tutorials, but every time I try adding it, only the very top of the background shows and the content in the box doesn't show. :( (Sad)

👍: 0 ⏩: 1

Prince-LionelPrince-Lionel In reply to puppyluv1993 [2018-11-17 21:28:14 +0000 UTC]

<div class="popup2-moremenu"><div class="floaty-boat"><br><img src="orig00.deviantart   .net/6625/f/2016/261/f/2/f2559f7cacb15448ccb5a4832da65848-dai3wfp.png"/></div><div class="gr-box gr-genericbox"><br>Body text here..</div>

👍: 0 ⏩: 0

SisterKoshoSisterKosho [2018-10-17 17:57:36 +0000 UTC]

Oof. I'm having an issue. The image keeps cutting off the entire left side of the picture and only shows a small part of the right. :-:

👍: 0 ⏩: 0

Miss-EllaMiss-Ella [2018-09-06 23:53:16 +0000 UTC]

Amazing tutorial, thank you for the help <333

👍: 0 ⏩: 0

TheHoneySparkleTheHoneySparkle [2018-08-27 20:12:45 +0000 UTC]

Thank you for providing this tutorial, it's helping me a lot!

👍: 0 ⏩: 0

NakufinNakufin [2018-08-09 21:28:56 +0000 UTC]

I need help, how do I make it larger?
 

👍: 0 ⏩: 1

TheHoneySparkleTheHoneySparkle In reply to Nakufin [2018-08-27 20:13:44 +0000 UTC]

Add in more code, such as <*br*> (Without the stars) to make it appear more in the box itself.

👍: 0 ⏩: 0

Arbitrary-ArtistryArbitrary-Artistry [2018-08-03 15:38:03 +0000 UTC]

Hello! Is there anyway to make the any text and stuff you put in take up more space? Any help would be appreciated.

👍: 0 ⏩: 1

AutumnhourrAutumnhourr In reply to Arbitrary-Artistry [2018-09-16 12:53:27 +0000 UTC]

I'm not sure if this helps but try adding <*br*> to the code
(remove the stars)

👍: 0 ⏩: 0

xXPrincessofLifeXxxXPrincessofLifeXx [2018-07-08 04:18:25 +0000 UTC]

For some reason, the background I made is not showing up, did I do something wrong?

👍: 0 ⏩: 2

Saturn-StardustSaturn-Stardust In reply to xXPrincessofLifeXx [2018-09-15 16:24:28 +0000 UTC]

Sorry if this is late, but you can’t just copy/paste the link in the search bar. Right click the image and ‘copy image address’ :) (Smile)

👍: 0 ⏩: 0

BlueOneGoneBlueOneGone In reply to xXPrincessofLifeXx [2018-07-26 11:19:11 +0000 UTC]

Same here.

👍: 0 ⏩: 0

LumimyrskydawnLumimyrskydawn [2018-06-15 20:51:44 +0000 UTC]

Thank you very much for all your resources :) (Smile)

👍: 0 ⏩: 0

SliceOfEdgeSliceOfEdge [2018-06-15 16:26:30 +0000 UTC]

Doesn`t work for me :I

👍: 0 ⏩: 0

WhiteDanshaWhiteDansha [2018-06-07 14:44:36 +0000 UTC]

When I did it, it cut off my custom box

👍: 0 ⏩: 1

AutumnhourrAutumnhourr In reply to WhiteDansha [2018-09-12 22:18:52 +0000 UTC]

add <*br*> at the end,maybe that will help(without the stars)

👍: 0 ⏩: 0

Inky-EchosInky-Echos [2018-06-04 21:01:05 +0000 UTC]

ty!

👍: 0 ⏩: 0

FirecustardFirecustard [2018-05-13 17:50:04 +0000 UTC]

THANKS SO FREEKING MUCH!!!!!!!

👍: 0 ⏩: 0

KitzuneSketchesKitzuneSketches [2018-04-30 16:52:56 +0000 UTC]

thanks for the tutorial! :D (Big Grin)

👍: 0 ⏩: 0

Inky-RainInky-Rain [2018-04-29 07:05:01 +0000 UTC]

I cant get the url :/

👍: 0 ⏩: 0

NaughtyBearPuffNaughtyBearPuff [2018-04-22 11:06:49 +0000 UTC]

YAY!!! It worked!! Thank you so so much!! This helped me out so much!

👍: 0 ⏩: 0


1 | Next =>