Shop Mobile More Submit  Join Login
Semi Transparent Content-holder box Tutorial by CypherVisor Semi Transparent Content-holder box 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 deviantID-widget box in your profile page.


Step 1 :Get content-holder boxes from my gallery here: [link]




Step 2: Use "disabledbutton" property in your code:



White box example code in the tutorial:
<div class="cctextarea disabledbutton" ><div class="pp" align="center"><h3>CONTENT HEADING HERE</h3><hr></hr><div align="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div></div></div>


Light Blue box example code:
<div class="topic-edited-by disabledbutton" ><div class="ch"><div class="ch-ctrl"><div class="pp" align="center"><h3>CONTENT HEADING HERE</h3><hr></hr><div align="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div></div></div></div></div>


Background image that I've used for demo in this tutorial:
-----------------------------------------
Background link: [link]
by =TaNa-Jo



How to use a content-holder box? Please read this Custom Box Tips n Tricks Journal





Other tutorials



For deviantID-box widget:


For custom-box widget:


For New deviation-box widget:



Want to customize your profile more?


Check all my free resources + tutorials: [link]



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:
 
:iconcaptain-starburst:
Captain-Starburst Featured By Owner Edited 3 days ago  Student General Artist
is there a way to get the white transparent box, but without the header / title thing??
nvm i got it!
Reply
:icondeer-daddy420:
DEER-DADDY420 Featured By Owner Apr 11, 2015  New member Hobbyist Digital Artist
tbh i may sound like a idiot but.. how do you put a background on it???
Reply
:iconpeejebus:
PeeJebus Featured By Owner 4 days ago  Hobbyist General Artist
im asking the samw thing -.-
Reply
:iconkinzley:
Kinzley Featured By Owner Apr 3, 2015  Student Artist
is there any way i can make the content transparent without the chat box?
Reply
:iconlepedi:
Lepedi Featured By Owner Mar 31, 2015  Hobbyist Digital Artist
is there a way to get transparent box with solid letters?
Reply
:iconunihaks:
Unihaks Featured By Owner Mar 25, 2015  Student Traditional Artist
How do I change the opacity of the box? 
Reply
:iconsoulistix:
Soulistix Featured By Owner Mar 18, 2015  Hobbyist Digital Artist
Absolutely love this!! I've got mine working just well, however, Is there a way to put a thumbnail/image into the custom box successfully? It seems whenever I attempt this the thumbnail gets placed under the background as well, or it just turns fully transparent. (Slightly difficult to explain, hopefully you get my gist, however!)
Reply
:iconsoulistix:
Soulistix Featured By Owner Mar 18, 2015  Hobbyist Digital Artist
Actually, I fixed the problem! Nevermind :)
Reply
:iconpuddathere:
puddathere Featured By Owner Feb 16, 2015  Student General Artist
Too bad we cant have the content inside solid and not transparent
Reply
:iconwolf-hood:
Wolf-Hood Featured By Owner Feb 15, 2015  Hobbyist Artist
Having trouble figuring it out, where do I put the code for a custombox skin?
Reply
:iconkawaii-nurse:
Kawaii-Nurse Featured By Owner Jan 13, 2015  Hobbyist General Artist
Not working :''(
what disabled button did you use?
Reply
:iconkawaii-nurse:
Kawaii-Nurse Featured By Owner Mar 14, 2015  Hobbyist General Artist
nvm i got it
Reply
:icontydal-wave:
Tydal-wave Featured By Owner Jan 10, 2015  Student Digital Artist
Hi! so I'm not sure if it does this for everyone or not, but if i'm on a different account and i look at my page, these boxes are completely transparent :0 Some people said it's doing the same for them as well :/
But if i'm logged into this account and I look at my page, they look completely normal
would this be a problem with the boxes themselves, or what??
thanks! <3
Reply
:iconmarshmellow-y-toys:
marshmellow-y-toys Featured By Owner Mar 5, 2015  Student Digital Artist
[ahhh- you have to have the uhh- the donation widget on your page!
I had the same problem.]
Reply
:icontydal-wave:
Tydal-wave Featured By Owner Mar 6, 2015  Student Digital Artist
yea, i figured it out eventually ;v;
but thanks! <3
Reply
:iconmediscouting:
mediscouting Featured By Owner Jan 15, 2015  Hobbyist Writer
i had the same problem : (((

i think it's because of members only being able to use custom box holders

and normal deviants not being able to 

i hope da fixes it sooner or later.
Reply
:icontydal-wave:
Tydal-wave Featured By Owner Jan 15, 2015  Student Digital Artist
oh ok, that's really weird ;o;

i think it might've worked before?? but im not sure u-u

ugh i rly love these boxes a lot too D:
Reply
:iconmediscouting:
mediscouting Featured By Owner Jan 15, 2015  Hobbyist Writer
yeah ;;;

i love them, to-
Reply
:iconxgalaxial:
xGalaxial Featured By Owner Jan 8, 2015  Hobbyist Digital Artist
Is there only codes for the white and blue boxes? because I'm trying to get a 3rd box but it goes in the 2nd below box yet I wan't it as a seperate
Reply
:icontruucey:
Truucey Featured By Owner Jan 7, 2015  Hobbyist General Artist
I have an idea and I wanna know if it'd work or not. Many people have been asking about making the box semi transparent but not the letters. I've read that you can add backgrounds to the boxes themselves, so what if that background was semitransparent? It'd be the background image that was transparent instead of a property, thus making the content opaque, right?
Reply
:iconpurrstachio:
Purrstachio Featured By Owner Jan 7, 2015  Hobbyist General Artist
Is there any way to change the box's opacity?
Reply
:iconmythb0x:
Mythb0x Featured By Owner Jan 4, 2015  Hobbyist Digital Artist
Hello!
So I've been using this and it's wonderful! But I can't get the text to also be transparent. Any help?
Reply
:iconcaptain-starburst:
Captain-Starburst Featured By Owner Jan 3, 2015  Student General Artist
So I REALLY Love this, because my makes things so pretty and neat.. However, If I add in ANY kind of Emotes or bored/dividers it also makes them transparent as well. Is there a way to let it not do that?
Reply
:iconthunderztorm:
Thunderztorm Featured By Owner Jan 2, 2015  Hobbyist General Artist
How do I put content boxes into a custom box with a background on it?
Reply
:iconaziria:
aziria Featured By Owner Jan 2, 2015  Professional General Artist
Sexify Your Page: Custom Boxes by SanguineEpitaph
Reply
:iconthunderztorm:
Thunderztorm Featured By Owner Jan 3, 2015  Hobbyist General Artist
Thank you! It helped a lot.
Reply
:iconaziria:
aziria Featured By Owner Jan 3, 2015  Professional General Artist
<333 mmm  ;////;
Reply
:iconthunderztorm:
Thunderztorm Featured By Owner Jan 3, 2015  Hobbyist General Artist
YAY 
Reply
:iconichigomurasaki:
IchigoMurasaki Featured By Owner Dec 26, 2014  Hobbyist Traditional Artist
I Am too confused. I've tried it with a animated gif from a old Anime that I want on my page but, it's not working. It keeps just giving the link to the Blog Spot it came from. I don't want that. :/
I've watched a tutorial on it but, it's still just...unexplained. :P 
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
That is because you are using the image URL of your gif image. You should use the direct link of your image. :nod:

Please check this journal for your answer Custombox F.A.Q. + Tips and tricks

Reply
:iconjaydenfgt:
jaydenfgt Featured By Owner Dec 21, 2014  Hobbyist Digital Artist
how do you custom the background? when i use this; Content-Holder Background tutorial by CypherVisor there is still a slight border around the 'non-border' one. how do i get rid of that?
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
Yes, I know. It is a limitation (at least as of now it is). You can't get a complete non-border box as such.
Reply
:iconeloylie:
Eloylie Featured By Owner Dec 16, 2014
Really have a question! I don't want the fond to be see through, only the box. Can I disable the transparency for the letters?
Please tell me QwQ
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
Can't. I have mentioned about this limitation already in the tutorial.
Reply
:iconeloylie:
Eloylie Featured By Owner Dec 27, 2014
Ok, sorry. I didn't found it :(
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 28, 2014
No prob. :)
Reply
:iconpushesthoughcrowds:
Pushesthoughcrowds Featured By Owner Edited Dec 3, 2014  Student General Artist
XDD dwdw I fixed it :la:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
:la:
Reply
:iconsweatersongs:
sweatersongs Featured By Owner Edited Nov 25, 2014  Hobbyist Digital Artist
this seems to be working well, I'm just wondering how to add in a background image underneath the content box ?

here is what I have coded so far ; 




squad
Fennekin by CreepyJellyfish







where/what is the code to add in an image background ? 
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
Use the custom bg code from here: Custom-box Background Tutorial by CypherVisor

And then copy the entire current code and paste it in the "body text here" part of the custom bg code. That should do the trick. :thanks:
Reply
:iconsweatersongs:
sweatersongs Featured By Owner Dec 27, 2014  Hobbyist Digital Artist
 I ended up getting it ! :) thanks so much for the help though !
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 28, 2014
Cool! and yw :)
Reply
:iconsweatersongs:
sweatersongs Featured By Owner Nov 25, 2014  Hobbyist Digital Artist
got it ! never mind ~ vuv
Reply
:icontakiashii:
Takiashii Featured By Owner Nov 22, 2014
Is it possible to have more of these in the same custom box?
What I mean, is that I am using one of these codes, and it worked perfectly!
But when I try to put another content holder box below it, it ends up being inside the one I used before...
{i used the same codes. I used the one for the white one ^^}
do you know how I can fix this ?
At the end of the last word I used for the first content holder box, I ended it with </div></div></div>
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
Then there is a problem with the closing tags in the first box code. Check if there is any </div> or something missing at the end of the first code.
Reply
:icontakiashii:
Takiashii Featured By Owner Dec 26, 2014
thank you~
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 28, 2014
yw :)
Reply
:iconmelmuff:
MelMuff Featured By Owner Nov 16, 2014  Hobbyist General Artist
Is there any way to make the text a certain colour?
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
Yes.

Check this: Colored Text (Custom box) - More colors by CypherVisor
Reply
:iconjewei-chan:
jeweI-chan Featured By Owner Nov 13, 2014  Hobbyist Digital Artist
is there a way to make it transparent without the box around it?
Reply
Add a Comment:
 
×




Details

Submitted on
December 23, 2012
Image Size
415 KB
Resolution
800×1400
Link
Thumb
Embed

Stats

Views
53,878 (23 today)
Favourites
3,007 (who?)
Comments
462

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×