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:
 
:iconjuhpony:
JUHPONY Featured By Owner May 20, 2016  Hobbyist Digital Artist
Looks good
Reply
:iconpanromantlc:
PANROMANTlC Featured By Owner Apr 16, 2016  New Deviant Hobbyist General Artist
THIS LOOKS GOOD ON SPACE BACKGROUNDS
Reply
:iconsae-fang:
Sae-Fang Featured By Owner Apr 1, 2016  Student General Artist
is there also a way that images and the text isn't transparent isnide the box?
Reply
:iconi-n-s-a:
I-n-s-a Featured By Owner May 11, 2016   Digital Artist
Unfortunately, not that I know of. However if you wanted, it's possible to make text and images transparent without the box being transparent. :D
Reply
:iconsae-fang:
Sae-Fang Featured By Owner May 12, 2016  Student General Artist
Thanks!
Yeah, I think I'll have to use colored Boxes...At first I wanted to use pictures as backgrounds and make the box transparent so one could see the image behind, but still read the text ^^'
Reply
:iconi-n-s-a:
I-n-s-a Featured By Owner May 12, 2016   Digital Artist
Oh I see! Yeah that would have been cool. If I ever find a way to do it, I'll let you know. ;)
Reply
:iconquartz-witch:
quartz-witch Featured By Owner Feb 25, 2016  Hobbyist General Artist
Reply
:iconkoaladrawz:
KoalaDrawz Featured By Owner Feb 5, 2016  Hobbyist Digital Artist
I am so SO confused how to use this
Reply
:iconi-n-s-a:
I-n-s-a Featured By Owner May 11, 2016   Digital Artist
Do you still need help? :D
Reply
:iconkoaladrawz:
KoalaDrawz Featured By Owner May 11, 2016  Hobbyist Digital Artist
no, ty though!
Reply
:iconi-n-s-a:
I-n-s-a Featured By Owner May 11, 2016   Digital Artist
Anytime. ;)
Reply
:iconnuzzsnuzz:
NuzzSnuzz Featured By Owner Jan 13, 2016  Hobbyist General Artist
yo yo is there a way to put images below the white box?? like have content above and below the white box??? i just noticed i left bold and italics on whoops
Reply
:iconi-n-s-a:
I-n-s-a Featured By Owner May 11, 2016   Digital Artist
Is this question still relevant? o:
Reply
:iconnuzzsnuzz:
NuzzSnuzz Featured By Owner May 12, 2016  Hobbyist General Artist
yea!!
Reply
:iconi-n-s-a:
I-n-s-a Featured By Owner May 12, 2016   Digital Artist
Alright!
Hopefully this sounds simple enough. All you gotta do is insert your codes for the content you want above the box above the code for the box, and the same goes for below.
If this doesn't help I hope I can further assist. :D Maybe getting a possible screenshot of what you'd like could help, too!
Reply
:icondacreepersadopts:
DaCREEPERSAdopts Featured By Owner Jan 9, 2016
Wow I got 20,000 free dA points from this amazing website @ deviantarts.weebly.com Hurry! Limited time only! Share this to your friends!
Reply
:iconmichthedrawer:
MichTheDrawer Featured By Owner May 10, 2016  New Deviant
Nah Damn You. I've seen this a lot of time. People are not gonna fell for that. I know you have to Put Username and password in there.

Plus it's Scam. Lol, Get outta here.
Reply
:iconc-hiiyo:
c-hiiyo Featured By Owner Feb 15, 2016
Wow I got 20,000 free dA points from this amazing website @ deviantarts.weebly.com Hurry! Limited time only! Share this to your friends!
Reply
:iconbiby-san:
Biby-san Featured By Owner Jan 2, 2016  Hobbyist Artist
Where is the code for the purple transparent box? D: i didn't find it in your gallery
Reply
:iconllanah:
llanah Featured By Owner Apr 29, 2016  Student Interface Designer
Custom Box Tutorial by TaNa-Jo  There's one here? c:
Reply
:iconbiby-san:
Biby-san Featured By Owner Apr 29, 2016  Hobbyist Artist
Thank you!!!~
Reply
:iconberry-angel:
Berry-Angel Featured By Owner Dec 30, 2015  Student Artisan Crafter
MUchas gracias por este tutorial !! <3
Reply
:iconblaze-troymisti1:
Blaze-troymisti1 Featured By Owner Dec 6, 2015
How do you make the text and images non transparent? It's pointless to use otherwise .-.
Reply
:iconsnowflakebottles:
Snowflakebottles Featured By Owner Nov 13, 2015  Hobbyist General Artist
im so new to core lmao i dont know how to do anything :D
Reply
:iconxxstrawberryquartzxx:
500th comment!
Anyways, I should have see. This when i got PM/Core DX
Reply
:iconantiicrisis:
antiicrisis Featured By Owner Edited Sep 30, 2015
is there perhaps a semi-transparent grey version of this?
I saw it on someone's page but I don't know how to edit it out myself/haven't found a code

nvm, figured it out
Reply
:iconhirasaw-kirisaki:
Hirasaw-Kirisaki Featured By Owner Sep 29, 2015  Professional Digital Artist
Danke ish usin'.
Reply
:iconmilky-pill:
milky-pill Featured By Owner Edited Aug 30, 2015
How do I make the text centered instead of left-aligned?
Nevermind I figured it out! :D
Reply
:iconkazukiu:
Kazukiu Featured By Owner Aug 19, 2015  Hobbyist Digital Artist
Anyone know if it's possible for the content (like pictures) inside the transparent boxes not be transparent? 
Reply
:iconhiikariee:
Hiikariee Featured By Owner Aug 1, 2015  Student Digital Artist
Whenever I put deviant acc in the box it turn out semi transparent too.. any way to change it?
Reply
:iconxshimsa:
xShimsa Featured By Owner Edited Jul 31, 2015
Got it ^^
Reply
:iconignaciah:
IgnaciaH Featured By Owner Jul 29, 2015  Student General Artist
How do you change the color of the boxes and the text? o_o Sorry I'm a noob.
Reply
:iconmelodymoonponyartist:
MelodyMoonPonyArtist Featured By Owner Aug 22, 2015  Student Digital Artist
1- How do you change the color of the boxes? There are only these colors.
2- How do you change the text color? If I remeber it correctly (sorry but my custom boxes weren't that fab for so long lol), use this tutorial and place the color tutorial on starting code's Lorem Ipsum thing.

Tutorial: fav.me/d6i4keq

If that doesn't work, sorry... [my custom boxes were simple but tried this several times]
Reply
:iconc3sious:
C3SIOUS Featured By Owner Jul 29, 2015
ty
Reply
:iconvan-swirlz:
Van-Swirlz Featured By Owner Edited Jul 28, 2015  Hobbyist Digital Artist
usin
Reply
:iconhotdogebuns:
HotDogeBuns Featured By Owner Jul 24, 2015  Student General Artist
Do you know if there's a code to make it slightly less transparent, or to have the images/text still solid? I've tried a few things that haven't worked
Reply
:iconmeg-pony:
Meg-Pony Featured By Owner Edited Jul 19, 2015  Hobbyist Artist
I hope you haven't already got asked this, but how do you make Content-Holder box transparent, but not the letters and pictures?
Oh never mind! I figured it out c:
Reply
:iconhotdogebuns:
HotDogeBuns Featured By Owner Edited Jul 24, 2015  Student General Artist
Sorry to bother you aa
How'd you get solid text? I've tried a bunch of things but it's not working for me ;v;
Reply
:iconmeg-pony:
Meg-Pony Featured By Owner Jul 25, 2015  Hobbyist Artist
I did it by mistake.
I put in this normal code, and then when I was trying to make scroll boxes, it ended up giving me solid text and a clear background...
I honestly would give you the code, but when I copy and past it it because shorter and ends up not working..
I'm sorry :(
Reply
:iconhotdogebuns:
HotDogeBuns Featured By Owner Jul 25, 2015  Student General Artist
It's okay! Thanks for replying <3
Reply
:iconmeg-pony:
Meg-Pony Featured By Owner Jul 25, 2015  Hobbyist Artist
You're welcome c:
Reply
:iconstarrysstudio:
StarrysStudio Featured By Owner Jul 19, 2015  Hobbyist General Artist
How did you do it? ;o;
Reply
:iconmeg-pony:
Meg-Pony Featured By Owner Jul 19, 2015  Hobbyist Artist
I tried putt in the code, but then it shortened itself, and didn't work... I'm sorry
Reply
:iconstarrysstudio:
StarrysStudio Featured By Owner Jul 19, 2015  Hobbyist General Artist
You're fine! 
Reply
:icontasty-liquorice:
Tasty-Liquorice Featured By Owner Jul 18, 2015  Hobbyist
using
Reply
:icontailsdolltail:
tailsdolltail Featured By Owner Jun 28, 2015  Hobbyist General Artist
wait how do you put the custom background on it??
Reply
Add a Comment:
 
×




Details

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

Stats

Views
80,801 (21 today)
Favourites
4,106 (who?)
Comments
526

License

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