Shop Mobile More Submit  Join Login
×




Details

Submitted on
March 10, 2013
Image Size
650 KB
Resolution
800×2100
Link
Thumb
Embed

Stats

Views
22,498 (16 today)
Favourites
672 (who?)
Comments
112

License

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

Exclusively for Premium members and Super groups only


How to use ?


Just copy the source code(s) below and paste it in your CustomBox module in your profile or group page.


SOURCE CODE:



Version 1:
<div class="cctextarea"><div class="gr-body pp"><div class="popup2-moremenu"><div class="floaty-boat"><br><img src="DIRECT-IMAGE-URL"/></div></div><div class="gr-box gr-genericbox"><br>Body Text Here</div></div></div>

Version 2:
<div class="gr-box gr-headless"><i class="gr1"><i></i></i><i class="gr2"><i></i></i><i class="gr3"><i></i></i><div class="gr-body pp"><div class="popup2-moremenu"><div class="floaty-boat"><br><img src="DIRECT-IMAGE-URL"/></div></div><div class="gr-box gr-genericbox"><br>Body Text Here</div></div><i class="gr3"></i><i class="gr2"></i><i class="gr1"></i></div>




My background image link (the background that I've used for demo in this tutorial)
------------------------------------------------------------------------------------------------------------------
http://img208.imageshack.us/img208/5306/demogg.jpg



Other tutorials


Content-Holder Box Floating Image Tutorial:


Custom Box background tutorial:


Custom background for DeviantID-box widget:


Custom background for New deviation-box widget:




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:
 
:icondroidigan:
Droidigan Featured By Owner Feb 13, 2015  Student General Artist
I love this box, it's great. But sometimes it happens to glitch. I have times this box works perfectly, and sometimes the lower ending of the box  doesn't add up to the outlines. Here's a screenshot:  
Problem by Droidigan  
Is my coding just incorrect? Thanks for anyone who wants to help.
Reply
:iconxavs-pixels:
xavs-pixels Featured By Owner Oct 5, 2014  Hobbyist Digital Artist
I'm thinking of trying to make my content holder boxes, what would be the size you would suggest to make them?
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Oct 5, 2014
Hmm? You can't make content holder boxes of your own. :hmm: The stuff that I upload are predefined things from the DA website.
Reply
:iconxavs-pixels:
xavs-pixels Featured By Owner Oct 5, 2014  Hobbyist Digital Artist
Alright, well thought ask since I don't really know much about these things, and not a lot of tutorials that are helpful on thise.
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Oct 6, 2014
No problem at all. :)
Reply
:iconchocoberrylollipop:
ChocoberryLollipop Featured By Owner Sep 13, 2014  Hobbyist Digital Artist
Hello! I wanted to know if it's possible putting a background image in these pretty boxes of yours:
Content-holder with SUB-LINKS1 by CypherVisor
And if yes, what would the code be? (I'm pretty dumb about coding ahah xD; )
Thanks a lot for all the time you use to give us such amazing resourches <3
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Sep 14, 2014
Copy the code from here:
Custom-box Background Tutorial by CypherVisor

And paste in the "body text here." part of the code of this content-holder box and it should work. :nod:
Reply
:iconchocoberrylollipop:
ChocoberryLollipop Featured By Owner Sep 14, 2014  Hobbyist Digital Artist
Eeee it works! Thanks a lot! <3
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Sep 14, 2014
You're welcome. :)
Reply
:icona-p-p-l-e-j-u-i-c-e:
A-p-p-l-e-j-u-i-c-e Featured By Owner Jul 1, 2014  Hobbyist Traditional Artist
i;ve been trying to use a transparent image for my background but when i hit save its not see through at all
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 27, 2014
For transparent box use this: cyphervisor.deviantart.com/art…
Reply
:icona-p-p-l-e-j-u-i-c-e:
A-p-p-l-e-j-u-i-c-e Featured By Owner Jul 28, 2014  Hobbyist Traditional Artist
thanks
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 28, 2014
yw :)
Reply
:iconmamaelm:
MamaELM Featured By Owner Jun 20, 2014  Professional General Artist
I'm trying to use version two, but inside this content box, White Content-Holder Boxes by CypherVisor
I just want the white content box instead, so the top and bottom gaps are white instead of the dA green.

Is there a way to do that? I've tried putting the two codes together, but they either overlap, or mess up... :(
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 27, 2014
Actually, what you want is the version 1 because that's the same white content holder box. You just need to have space before and after the image in it.

You may try using <br> tags at the top and bottom of the img codes and see if works.
Reply
:iconmamaelm:
MamaELM Featured By Owner Jul 27, 2014  Professional General Artist
Thanks!
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Aug 16, 2014
yw :)
Reply
:iconk0shii:
K0SHII Featured By Owner May 12, 2014
I cant get it >3<..
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 18, 2014
Hmm :hmm:

What do i do in this case? Read the tutorial thoroughly again?
Reply
:iconmochifiish:
MochiFiish Featured By Owner Feb 22, 2014   Traditional Artist
how do you get it with a shadow? o3o
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Feb 22, 2014
Where shadow? :hmm:
Reply
:iconmochifiish:
MochiFiish Featured By Owner Feb 22, 2014   Traditional Artist
how do you get the content holder to have a shadow?
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Feb 22, 2014
There are different content-holder boxes which has shadows in them.

Check Here: cyphervisor.deviantart.com/gal…
Reply
:iconmochifiish:
MochiFiish Featured By Owner Feb 22, 2014   Traditional Artist
okie thankq ; w ;
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Feb 23, 2014
yw :)
Reply
:iconpixelpanda42:
Pixelpanda42 Featured By Owner Feb 2, 2014  Hobbyist General Artist
Where do you find photos that will extend the length of the box?
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Feb 10, 2014
Any photos will do actually. :) You can upload one of yours in sta.sh and use it.
Reply
:iconpixelpanda42:
Pixelpanda42 Featured By Owner Feb 10, 2014  Hobbyist General Artist
Will that make them go the length of the box though? If they are too short then they just cut off.
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Feb 10, 2014
Yes it should. If it is too short then the box side will remain the same.
Reply
:iconpixelpanda42:
Pixelpanda42 Featured By Owner Feb 10, 2014  Hobbyist General Artist
Haha, sorry for being slow, but are you saying that if I simply put it in stash, and then take it out again, and put it into the content box, it will go the length?
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Feb 10, 2014
Oh you are talking about increasing the length of the box and not the width? I am sorry I misunderstood.

Use <br> tags (you can use is as many times as you want according to your need) at the very bottom of your codes if you want to increase the length of the box.
Reply
:iconpixelpanda42:
Pixelpanda42 Featured By Owner Feb 11, 2014  Hobbyist General Artist
Oh, gosh, I am sorry. I am actually talking about extending the photo that I will put as the background for the box, and how to make it always extend the length of the box. Sorry again for all of the confusion, and for using up your time.
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Feb 12, 2014
you can add the width property in the img tag and use it as

<img height="100%" src="URL"/>

Here, you can find more details: Custombox F.A.Q. + Tips and tricks
Reply
(1 Reply)
:iconmiss-tomboy:
Miss-Tomboy Featured By Owner Dec 30, 2013  Hobbyist General Artist
I use my IPad and its not letting me do this, I need more help xD
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 31, 2013
In that case you need to use a PC :stare:
Reply
:iconrunrunmuffin:
RunrunMuffin Featured By Owner Oct 28, 2013
This tut saved my life XD I've been messing around for hours on my hompage trying to fancy it up~

I do have one question though~ Is there any way to make the border a different color? I'm hoping to make it black because on mine without a border looks odd to my eyes.
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Oct 29, 2013
I am not so sure. I did not try it out with every single content-holder too. But if you want border then the version 1 isn't working for you?
Reply
:iconrunrunmuffin:
RunrunMuffin Featured By Owner Oct 29, 2013
Oh no it is~ I was just wondering if it were possible to change the color 'cause white looked weird with my background. Heh ^^: thankies though, dearie ;3
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 29, 2013
Oh! I am unsure if you can put bg in other content-holder boxes. I gotta check that out.

I'll update them if I get new ones. :thanks:
Reply
:iconpussycat-puppy:
Pussycat-Puppy Featured By Owner Oct 19, 2013  Student Filmographer
Can you change the text color? Thank you <3
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Oct 20, 2013
Yes, you can try this: cyphervisor.deviantart.com/art…
Reply
:iconpussycat-puppy:
Pussycat-Puppy Featured By Owner Oct 20, 2013  Student Filmographer
THANK YOU SO MYTCH IT WORKS!!! :hug:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Oct 27, 2013
Cool! :)
Reply
:iconenharmonia:
Enharmonia Featured By Owner Oct 6, 2013  Student Digital Artist
Hey Sid- I've been having a little problem with this. The image seems to not stop where the box border is- it goes just a bit below it. Also, the down border it's shorter than the upper one :hmm:

You can go take a look at my profile- it's the last content holder from the "things" widget.
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Oct 20, 2013
Where? I just check your page eveything looks fine there. :O
Reply
:iconenharmonia:
Enharmonia Featured By Owner Oct 20, 2013  Student Digital Artist
Geez, I didn't remember to tell you- I found the solution a few days ago fiddling with the codes. I'm sorry, really ^^;
But thank you anyways for replying :aww:
Reply
:iconroses-to-ashes:
Roses-to-Ashes Featured By Owner Sep 16, 2013  Hobbyist General Artist
Nvm my earlier question/concern.. I got brave and went ahead and submitted a new blog and it still works.. seems it was just the preview that was screwy.. sorry to bother you!
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Sep 25, 2013
No problemo. :hug:
Reply
:iconroses-to-ashes:
Roses-to-Ashes Featured By Owner Sep 16, 2013  Hobbyist General Artist
does this not work for journals anymore? Ive been using this code in my skins like this trees-with-character.deviantar…
but I need to update this blog, and not screwing with any codes, just typing different text, the text is no longer in the brown box when I preview it.. :confused:
Reply
:iconjenny2-point-0:
Jenny2-point-0 Featured By Owner Jun 5, 2013  Student Digital Artist
how do you make the text box stop? i have an image then the text box, and i want it to stop so i can put another image without it appearing in the box 0.o
Reply
Add a Comment: