Shop Mobile More Submit  Join Login
×




Details

Submitted on
June 23, 2010
Image Size
852 KB
Resolution
800×3050
Link
Thumb
Embed

Stats

Views
336,346 (133 today)
Favourites
9,073 (who?)
Comments
2,939

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×
Custom-box Background Tutorial by CypherVisor Custom-box Background Tutorial by CypherVisor

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


Tutorial fondo en caja Custom. by FanasY




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:
deviantID widget box customization tutorial by CypherVisor

Custom background for New deviation-box widget:
Deviation-box background tutorial by CypherVisor




The content holder box used in this tutorial


Shadow Content-holder box (Default Bright) by CypherVisor




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.
Add a Comment:
 
:iconlenazoni:
LenaZoni Featured By Owner 6 days ago  New member Student Digital Artist
Yay!

Now i know how i can make my own journal skin!
Reply
:iconmidnight3795:
Midnight3795 Featured By Owner 5 days ago  Student Digital Artist
This doesn't work with journal skins, at least I don't think it does.
Here's a guide for journal skins. Basic CSS Tutorial by DragonX141  
Reply
:iconlenazoni:
LenaZoni Featured By Owner 5 days ago  New member Student Digital Artist
Oh ok thanks
Reply
:iconkojiana:
Kojiana Featured By Owner Feb 20, 2015
Thanks a lot ! Handshake 
Reply
:iconthunderztorm:
Thunderztorm Featured By Owner Feb 18, 2015  Hobbyist General Artist
How do you use purchased deviantART backgrounds?
Reply
:iconnightmare-curse:
Nightmare-Curse Featured By Owner Feb 18, 2015  Hobbyist Digital Artist
you are AMAZING!! Thank you!
Reply
:iconbattlefairies:
BATTLEFAIRIES Featured By Owner Feb 17, 2015
Thank you very much for this!
Boxbackground Screenshot1 by BATTLEFAIRIES
I'll make sure to donate some points. Cheers!
Reply
:iconmidnight3795:
Midnight3795 Featured By Owner Feb 13, 2015  Student Digital Artist
How do I change the text color?
Reply
:icondj2390:
Dj2390 Featured By Owner Feb 13, 2015  Hobbyist Digital Artist
This isn't working. the instead of the background, the link to the image appears at the top. 
Reply
:iconwillow-moonmaiden:
willow-moonmaiden Featured By Owner Feb 12, 2015  New member Hobbyist Digital Artist
Thank you so much! I'm using your Pink Hearts background and I am absolutely loving it! Thank you Thank you! This has been incredibly helpful~! :tighthug:
Reply
:iconvapolord:
Vapolord Featured By Owner Feb 12, 2015  Hobbyist Digital Artist
I want to ask what I should do If I want to have my text start  on the very left. With this kindoff box that gets made in this code, the text and the picutures that come after are limited to a certian width. But if I want to have my text start on the very left, I would have to change the "invisible" borders from stopping me. I just want to recreate the normal profile look, just with a dark background and white text. But I won't happen as long as the text will not start closer to the left. Anyone help? I've been a premium member for a month or so now, and I just didn't have the nerves to figure out this shit yet. Would be cool if someone could help me.
Reply
:iconsaltyarts:
SaltyArts Featured By Owner Feb 9, 2015  Hobbyist Digital Artist
What exactly is custom box
and how do you use it?

Is it Premium exclusive?

Anyone ?
Reply
:iconstarisfluffeh:
starisfluffeh Featured By Owner Feb 9, 2015  Hobbyist Digital Artist
Yes, a Premium Membership gives you more opportunities with DA. A Custom Box is one of them, You can either get a Premium Membership by paying money, or with points.
Reply
:iconsaltyarts:
SaltyArts Featured By Owner Feb 10, 2015  Hobbyist Digital Artist
Thats cool to know
Reply
:iconfrosbie:
frosbie Featured By Owner Feb 8, 2015  Student Digital Artist
where on the right is the custom-box?
Reply
:iconrippleart:
RippleArt Featured By Owner Feb 7, 2015  Hobbyist General Artist
thank you this was so useful :meow:
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 5, 2015  Professional General Artist
I keep doing something wrong but I have no idea what..

Everytime when I put the code in the description box the image is in front of everything, or it's put as another image in the box but never as a background..
Reply
:iconunstabie:
unstabIe Featured By Owner Feb 6, 2015  Hobbyist General Artist
did you put the code at the beginning?
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 6, 2015  Professional General Artist
I've got the code like this:

<dic class+"Floaty-boat"><img src="fc06.deviantart.net/fs71/f/201…">


But as smart as I am.. I have know idea what "Floaty-boat" and "gr-box gr-genericbox" stands for. So maybe that's the problem.
Reply
:iconunstabie:
unstabIe Featured By Owner Feb 9, 2015  Hobbyist General Artist
its supposed to be
<img src="YOUR LINK">

!!

i dont know what they stand for either, but i know they should be in the code!
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 9, 2015  Professional General Artist
I've tried it but then I just get the picture in the description  instead of in the background..
Reply
:iconunstabie:
unstabIe Featured By Owner Feb 9, 2015  Hobbyist General Artist
put the code at the top of the box, have you done that?
the box for the custom box should be after that code.
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 10, 2015  Professional General Artist
I don't think I fully understand what you mean.
Reply
:iconrippleart:
RippleArt Featured By Owner Feb 7, 2015  Hobbyist General Artist
that stuff doesn't matter, you don't change it. All that matters is the image url and the body text. (i dunno what that stuff is either...) Als o did you right click on the image itself and click copy image url or did you copy the website url? You have to copy the image url.
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 7, 2015  Professional General Artist
Oh okay so that's not the problem then.
No, I've copied the image url. I also tried the website url but that doesn't work either.
Reply
:iconrippleart:
RippleArt Featured By Owner Feb 7, 2015  Hobbyist General Artist
oh um... mine was doing that at first but then when i added a bunch of text it magically started working
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 8, 2015  Professional General Artist
Okay, maybe I have to try that too.. 
Reply
:iconask-snowthedachsund:
Ask-SnowTheDachsund Featured By Owner Feb 3, 2015  New member Student Artist
IT WORKS IT WORKS! snowfanclub.deviantart.com/
Reply
:iconxxseroliousxx:
XxSeroliousxX Featured By Owner Feb 2, 2015  Hobbyist Digital Artist
how do you make the box translucent?
Reply
:iconawesomestar2002:
Awesomestar2002 Featured By Owner Jan 31, 2015  Hobbyist Filmographer
But how do you get to the custom box thing?
Reply
:iconawesomestar2002:
Awesomestar2002 Featured By Owner Jan 31, 2015  Hobbyist Filmographer
This helps a lot thank you :)
Reply
:iconnarutocrypt:
NarutoCrypt Featured By Owner Jan 31, 2015  Hobbyist Digital Artist
how come it didn't work? :/ I did all that you said, I have chrome, I uploaded the image to stash, I copied the image url, and all that happened, was the image url appeared without the picture. something's not right here...
Reply
:iconnarutocrypt:
NarutoCrypt Featured By Owner Jan 31, 2015  Hobbyist Digital Artist
how come it didn't work? :/ I have chrome, I uploaded the image to my stash, I copied the image url, I posted it in the box, and all it has is the url of what I pasted showing up. something's not right here...
Reply
:iconthetriforcebearer:
thetriforcebearer Featured By Owner Jan 29, 2015  Student Digital Artist
Is it possible to only have the background?
Reply
:iconsonikkudrawings:
Sonikkudrawings Featured By Owner Feb 7, 2015  Hobbyist Digital Artist
That means the background is in front of the rest of the content. Maybe you´ve misplaced it in the code.
Reply
:iconthetriforcebearer:
thetriforcebearer Featured By Owner Feb 7, 2015  Student Digital Artist
I made something that somewhat worked already.

I was asking that question as it's my goal, not an error :3
Reply
:icontoxicdusk:
ToxicDusk Featured By Owner Jan 27, 2015  Hobbyist Digital Artist
whenever i put the codes in the picture comes up way smaller
Reply
:iconcasthavian:
Casthavian Featured By Owner Jan 26, 2015  Hobbyist General Artist
Looks like shit. Doesn't work..
Reply
:iconteamlpsandacnl:
teamlpsandacnl Featured By Owner Jan 23, 2015  New member
ok this is easy way
Reply
:iconredpadna:
Redpadna Featured By Owner Jan 18, 2015  Hobbyist Artist
I've been trying to add a deviantation to a custom box but it isn't working, help please
Reply
:iconredpadna:
Redpadna Featured By Owner Jan 18, 2015  Hobbyist Artist
Nvm it's fine now
Reply
:iconcarlykat:
CarlyKat Featured By Owner Jan 16, 2015  Hobbyist Traditional Artist
Im too stupid for this

please help DXX
Reply
:iconnorthstar2x:
northstar2x Featured By Owner Jan 14, 2015  Hobbyist Digital Artist
I have a question
I'm not sure how to add padding around the content box.
You can see that there's not much room between the bottom of the content box and the custom box, and I would just like to expand it a bit so it matches the spacing at the top of the box. 
I suppose that would just be centering the content box in the center of the custom box, right?
But how do I do that?
northstar2x.deviantart.com/
Reply
:iconbblaze-mikasa2d:
Bblaze-MiKaSa2D Featured By Owner Jan 14, 2015  Hobbyist General Artist
I think im making something wrong... 
It shows the background, but... When I want to put a stamp or button, it doesn't show. Someone help me please?
Reply
:iconrainbow-kitten-candy:
Rainbow-Kitten-Candy Featured By Owner Jan 12, 2015  New member
omg THANKS*Free Icon/Emote* Thank You Pusheen 
Reply
:iconvulcaan:
vulcaan Featured By Owner Jan 10, 2015  Hobbyist Digital Artist
I think i must've done something wrong, when i insert the background, the box wont show up and it's just see through, but it works fine without one? 
Reply
:iconvulcaan:
vulcaan Featured By Owner Jan 10, 2015  Hobbyist Digital Artist
nevermind! i figured out what i was doing wrong :)
Reply
:iconsamthefirewizard:
SamTheFireWizard Featured By Owner Jan 14, 2015  Hobbyist General Artist
Can you help me? To me it didn't work....

When i finish it become like this
Custom
Reply
:iconvulcaan:
vulcaan Featured By Owner Jan 14, 2015  Hobbyist Digital Artist
ahh, that's what happened to me ;o would you like me to send you the code i used?
Reply
Add a Comment: