Shop Mobile More Submit  Join Login
Modal Content-Holder Box by LabLayers Modal Content-Holder Box by LabLayers
Inspired by what `CypherVisor does, I decided look through deviantART's deviantart-network.css for fun CSS hacks, and found a way to embed modals inside custom profile widgets! Check out his Custombox resources folder for more ways to customize your profile.

***A PREMIUM MEMBERSHIP IS REQUIRED IS REQUIRED TO FULLY CUSTOMIZE YOUR PROFILE WIDGETS!***


Plain Modal

A minimal, light green box.

<div class="ccexpanded"><div class="inputs modal" align="center"><div class="pp"><h3 align="center">SWEETS!</h3><hr></hr>Cupcake soufflé macaroon wypas brownie. Sugar plum liquorice wafer cookie sweet roll. Sweet faworki cupcake macaroon biscuit. Wafer danish muffin I love candy fruitcake chocolate cake marzipan candy. Cake dessert bear claw biscuit lollipop powder. I love wypas jelly-o croissant gummi bears powder. Liquorice chocolate bar gummies pie biscuit. I love pie lemon drops cupcake. Pastry macaroon ice cream lollipop.</div></div></div>

<div class="ccexpanded"><div class="inputs modal" align="center"><div class="pp">Text goes here...</div></div></div>


Elnino Modal

Has an ambient yellow color below 150px.

<div class="ccexpanded"><div class="inputs modal new-elnino-modal" align="center"><div class="pp"><h3 align="center">SWEETS!</h3><hr></hr>Cupcake soufflé macaroon wypas brownie. Sugar plum liquorice wafer cookie sweet roll. Sweet faworki cupcake macaroon biscuit. Wafer danish muffin I love candy fruitcake chocolate cake marzipan candy. Cake dessert bear claw biscuit lollipop powder. I love wypas jelly-o croissant gummi bears powder. Liquorice chocolate bar gummies pie biscuit. I love pie lemon drops cupcake. Pastry macaroon ice cream lollipop.</div></div></div>

<div class="ccexpanded"><div class="inputs modal new-elnino-modal" align="center"><div class="pp">Text goes here...</div></div></div>


Default Modal

The default design for modals all over deviantART.com. Use class="modal-separated" for horizontal rules, class="modal-button-holder thumb-holder" to hold buttons, and a class="x" for close buttons.

<div class="ccexpanded"><div class="inputs modal modal-rounded" align="center"><div class="pp"><h3 align="center">SWEETS!</h3><hr></hr>Cupcake soufflé macaroon wypas brownie. Sugar plum liquorice wafer cookie sweet roll. Sweet faworki cupcake macaroon biscuit. Wafer danish muffin I love candy fruitcake chocolate cake marzipan candy. Cake dessert bear claw biscuit lollipop powder. I love wypas jelly-o croissant gummi bears powder. Liquorice chocolate bar gummies pie biscuit. I love pie lemon drops cupcake. Pastry macaroon ice cream lollipop.</div></div></div>

<div class="ccexpanded"><div class="inputs modal modal-rounded" align="center"><div class="pp">Text goes here...</div></div></div>


Default Modal with Shadow

The default design for modals all over deviantART.com, with a shadow! Use class="modal-separated" for horizontal rules, class="modal-button-holder thumb-holder" to hold buttons, and a class="x" for close buttons.

<div class="ccexpanded"><div class="inputs modal modal-rounded with-shadow" align="center"><div class="pp"><h3 align="center">SWEETS!</h3><hr></hr>Cupcake soufflé macaroon wypas brownie. Sugar plum liquorice wafer cookie sweet roll. Sweet faworki cupcake macaroon biscuit. Wafer danish muffin I love candy fruitcake chocolate cake marzipan candy. Cake dessert bear claw biscuit lollipop powder. I love wypas jelly-o croissant gummi bears powder. Liquorice chocolate bar gummies pie biscuit. I love pie lemon drops cupcake. Pastry macaroon ice cream lollipop.</div></div></div>

<div class="ccexpanded"><div class="inputs modal modal-rounded with-shadow" align="center"><div class="pp">Text goes here...</div></div></div>

<div class="ccexpanded"><div class="inputs modal modal-rounded with-shadow" align="center"><h2>Give a <a style="text-transform: capitalize;" href="/badges/llama/">llama Badge</a></h2><a href="" class="x"></a><div class="modal-separated"></div><div class="loading pp" align="center">Text goes here! :eager:</div></div></div>

<div class="ccexpanded"><div class="inputs modal modal-rounded with-shadow" align="center"><a class="x" href="#"></a><h2>Modal Header</h2><div class="phone-modal"><div class="pp">One fine body...</div></div></div></div>

<div class="ccexpanded"><div class="inputs modal modal-rounded with-shadow" align="center"><a class="x" href="#"></a><h2>Modal Header</h2><div class="phone-modal"><div class="pp">One fine body...</div></div><div class="modal-button-holder thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small"><span class="post">Button</span></a> <a href="URL" class="smbutton smbutton-green smbutton-small"><span class="post">Button</span></a></div></div></div>


Dialog Modal

The classic design for the deviantART's modals. Use class="modal-dialog-header" > h2 for modal headers, and class="modal-dialog-footer thumb-holder for the button holder.

<div class="ccexpanded"><div class="inputs modal modal-dialog" align="center"><div class="pp"><h3 align="center">SWEETS!</h3><hr></hr>Cupcake soufflé macaroon wypas brownie. Sugar plum liquorice wafer cookie sweet roll. Sweet faworki cupcake macaroon biscuit. Wafer danish muffin I love candy fruitcake chocolate cake marzipan candy. Cake dessert bear claw biscuit lollipop powder. I love wypas jelly-o croissant gummi bears powder. Liquorice chocolate bar gummies pie biscuit. I love pie lemon drops cupcake. Pastry macaroon ice cream lollipop.</div></div></div>

<div class="ccexpanded"><div class="inputs modal modal-dialog" align="center"><div class="pp">Text goes here...</div></div></div>

<div class="ccexpanded"><div class="inputs modal modal-dialog" align="center"><div class="modal-dialog-header"><h2>Modal Header</h2></div><div class="modal-dialog-body pp"><br>One fine body...<br><br></div><div class="modal-dialog-footer thumb-holder"><a href="URL" class="smbutton smbutton-normal smbutton-small"><span class="post">Button</span></a> <a href="URL" class="smbutton smbutton-green smbutton-small"><span class="post">Button</span></a></div></div></div>


Purchase Modal

A more compact modal design Use a class="x" for the close button.

<div class="ccexpanded"><div class="inputs modal modal-rounded purchase-modal" align="center"><div class="pp"><h3 align="center">SWEETS!</h3><hr></hr>Cupcake soufflé macaroon wypas brownie. Sugar plum liquorice wafer cookie sweet roll. Sweet faworki cupcake macaroon biscuit. Wafer danish muffin I love candy fruitcake chocolate cake marzipan candy. Cake dessert bear claw biscuit lollipop powder. I love wypas jelly-o croissant gummi bears powder. Liquorice chocolate bar gummies pie biscuit. I love pie lemon drops cupcake. Pastry macaroon ice cream lollipop.</div></div></div>

<div class="ccexpanded"><div class="inputs modal modal-rounded purchase-modal" align="center"><div class="pp">Text goes here...</div></div></div>

<div class="ccexpanded"><div class="inputs modal modal-rounded purchase-modal" align="center"><a href="" class="x"></a><h2>Modal Header</h2><div class="pp">One fine body...</div></div></div>


Square Modal with Shadow

A simple box with a shadow!

<div class="inputs modal modal-rounded purchase-modal" align="center"><div class="light pp"><h3 align="center">SWEETS!</h3><hr>Cupcake soufflé macaroon wypas brownie. Sugar plum liquorice wafer cookie sweet roll. Sweet faworki cupcake macaroon biscuit. Wafer danish muffin I love candy fruitcake chocolate cake marzipan candy. Cake dessert bear claw biscuit lollipop powder. I love wypas jelly-o croissant gummi bears powder. Liquorice chocolate bar gummies pie biscuit. I love pie lemon drops cupcake. Pastry macaroon ice cream lollipop.</div></div>

<div class="inputs modal modal-rounded purchase-modal" align="center"><div class="light pp">Text goes here...</div></div>


Join Modal (Experimental)

You'll need to find a way to override the absolute positioning of class="loaded" for this to work!

<div class="ccexpanded"><div class="inputs modal modal-rounded join-modal with-shadow" align="center"><div class="loaded"><div class="pp"><h3 align="center">SWEETS!</h3><hr></hr>Cupcake soufflé macaroon wypas brownie. Sugar plum liquorice wafer cookie sweet roll. Sweet faworki cupcake macaroon biscuit. Wafer danish muffin I love candy fruitcake chocolate cake marzipan candy. Cake dessert bear claw biscuit lollipop powder. I love wypas jelly-o croissant gummi bears powder. Liquorice chocolate bar gummies pie biscuit. I love pie lemon drops cupcake. Pastry macaroon ice cream lollipop.</div></div></div></div><br><br><br><br><br><br><br><br><br><br>

<div class="ccexpanded"><div class="inputs modal modal-rounded join-modal with-shadow" align="center"><div class="loaded"><div class="pp">Text goes here...</div></div></div></div><br><br>

<div class="ccexpanded"><div class="inputs modal modal-rounded join-modal with-shadow" align="center"><div class="loaded"><a href="" class="x"></a><div class="join-modal-title"><h3>Sign Up<span> or Log In</span></h3></div><div class="join-modal-contents">One fine body...</div></div></div></div><br><br><br><br><br><br>


Text Alignment

Align your text any way you want it.

<div align="left"><div align="left">Text Aligned Left</div></div>
<div align="center"><div align="center">Text Aligned Center</div></div>
<div align="right"><div align="right">Text Aligned Right</div></div>
<div align="justify"><div align="justify">Text Aligned Justify</div></div>



Need Help? Go read `CypherVisor's custombox guide before commenting!


Feel free to share/republish/modify this with everyone else! Credit is optional, but appreciated. Enjoy! :D
Add a Comment:
 
:iconkittycupcakeo3o:
KittyCupcakeO3O Featured By Owner Aug 17, 2015  Hobbyist Traditional Artist
May I use elnino?
Reply
:iconpr0xyfr34k:
PR0XYFR34K Featured By Owner Apr 27, 2015  Hobbyist Artist
Hello~ I was wondering how you get a custom background behind these boxes? I cant seem to get it right!
Reply
:iconmello-rin:
Mello-rin Featured By Owner Jun 25, 2015  Hobbyist General Artist
Paste the custom background code first and then anything you want or else the background will cover everything^^ 
Reply
:iconpr0xyfr34k:
PR0XYFR34K Featured By Owner Jun 25, 2015  Hobbyist Artist
Lmao wow dude Old comment x'D
Reply
:iconmello-rin:
Mello-rin Featured By Owner Jun 26, 2015  Hobbyist General Artist
lol didn't realize xD
Reply
:iconmimi-lila:
Mimi-Lila Featured By Owner Feb 19, 2015  Hobbyist Digital Artist
THANK YOU IT HELPED A LOT!!! <3
Reply
:icondarkskyblue:
DarkSkyBlue Featured By Owner Jun 16, 2014
is there a square model without shadow?
Reply
:iconjamiemdavies:
JamieMDavies Featured By Owner Jun 30, 2013  Hobbyist General Artist
Elnino and Join are both very pretty. Must find a use for them... ^^
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 28, 2013   General Artist
nice! :love: 
Reply
:iconlablayers:
LabLayers Featured By Owner Jun 28, 2013  Student Interface Designer
:squee:
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 30, 2013   General Artist
:la: 
Reply
:iconxunwhy:
XunWhy Featured By Owner Jun 25, 2013  Student General Artist
This is so awesome, you sure did a lot of work! :nod:
Reply
:iconlablayers:
LabLayers Featured By Owner Jun 26, 2013  Student Interface Designer
:la:
Reply
:iconchinzapep:
ChinZaPep Featured By Owner Jun 25, 2013  Student Digital Artist
Cool! Where did you find the "Join Modal"?
Reply
:iconlablayers:
LabLayers Featured By Owner Jun 26, 2013  Student Interface Designer
In this CSS ;)
When you try to make a comment/+fav/chat when you are logged out, this modal pops up.
Reply
:iconchinzapep:
ChinZaPep Featured By Owner Jul 15, 2013  Student Digital Artist
Oh, is it fixed on there?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jun 25, 2013
How lovely! Thanks for the great resource! :heart:
Reply
:iconlablayers:
LabLayers Featured By Owner Jun 25, 2013  Student Interface Designer
:squee:
Reply
:iconinemiset:
Inemiset Featured By Owner Jun 25, 2013  Hobbyist General Artist
Awesome! And I just love how you made the filler text talk about sweets instead of the usual "Lorem Ipsum..." gibberish :)
Reply
:iconlablayers:
LabLayers Featured By Owner Jun 25, 2013  Student Interface Designer
Thanks! The text generator I used is cupcakeipsum.com/! :cake:
Reply
Add a Comment:
 
×




Details

Submitted on
June 25, 2013
Image Size
176 KB
Resolution
572×2930
Link
Thumb
Embed

Stats

Views
12,425 (14 today)
Favourites
641 (who?)
Comments
22
Downloads
14

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution 3.0 License.
×