Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

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

Stats

Views
3,802 (4 today)
Favourites
301 (who?)
Comments
15
Downloads
10

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution 3.0 License.
×
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:
 
:iconshittychan:
ShittyChan Mar 4, 2014  Hobbyist General Artist
Huh, it works on Journals too for any member.
Reply
:iconbubbiies:
bubbIies Jan 25, 2014  Hobbyist Digital Artist
is there a square box without a shadow?? ;v;
Reply
:iconjamiemdavies:
JamieMDavies Jun 30, 2013  Hobbyist General Artist
Elnino and Join are both very pretty. Must find a use for them... ^^
Reply
:iconastrikos:
Astrikos Jun 28, 2013   General Artist
nice! :love: 
Reply
:iconlablayers:
LabLayers Jun 28, 2013  Student Interface Designer
:squee:
Reply
:iconastrikos:
Astrikos Jun 30, 2013   General Artist
:la: 
Reply
:iconninjask8er:
NinjaSk8er Jun 25, 2013  Student Filmographer
This is so awesome, you sure did a lot of work! :nod:
Reply
:iconlablayers:
LabLayers Jun 26, 2013  Student Interface Designer
:la:
Reply
:iconchinzapep:
ChinZaPep Jun 25, 2013  Student Digital Artist
Cool! Where did you find the "Join Modal"?
Reply
:iconlablayers:
LabLayers 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
Add a Comment: