pastries | table codes 015

wow, who is even still here HAHAHA but no hello lovelies. the need/desire to do a cr chart for sauron prompts a code dump, of course. it even scrolls.

word vomit

code.	<center><span style="font-size:24pt; font-family: georgia; color:#333; font-weight: bold; font-style: italic;">Header</span></center> <table width="600px" border="0" style="margin: 0 auto;"> <tr> <td><raw-code><div style="display:inline-table; width:200px; height:300px; border-radius:20px; -moz-border-radius: 20px; background: url(http://i.imgur.com/fdwRuZ8.png); margin: 10px 3px 3px 3px"><center><img src="ICON URL" style="height: 80px; width: 80px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius: 50%; margin: 10px 0 10px 0; padding:0; -webkit-box-shadow: -3px 4px 0 2px #808784; box-shadow: -3px 4px 0 2px #808784;"></center> <div style="margin: 0 auto; text-align:center; width:200px; background: #fff; -moz-opacity: 0.60; opacity: 0.60;padding: 3px 0; font-size: 8pt; font-family: lucida sans, lucida sans unicode; letter-spacing: 1px;"><span style="color:#000;">name</span> <span style="color:#555;">series</span></div> </raw-code><div style="margin: 20px auto 0 auto; text-align:justify; width:184px; height: 118px; background: #fff; -moz-opacity: 0.60; opacity: 0.60; padding: 6px 8px; font-size: 8pt; font-family: times new roman; letter-spacing: 1px; overflow:auto; line-height: 1.4em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat. Mauris eget blandit ipsum. Curabitur rutrum mi urna, eu dictum mauris ullamcorper ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat.</div></div></td> <td><raw-code><div style="display:inline-table; width:200px; height:300px; border-radius:20px; -moz-border-radius: 20px; background: url(http://i.imgur.com/fdwRuZ8.png); margin: 10px 3px 3px 3px"><center><img src="ICON URL" style="height: 80px; width: 80px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius: 50%; margin: 10px 0 10px 0; padding:0; -webkit-box-shadow: -3px 4px 0 2px #808784; box-shadow: -3px 4px 0 2px #808784;"></center> <div style="margin: 0 auto; text-align:center; width:200px; background: #fff; -moz-opacity: 0.60; opacity: 0.60;padding: 3px 0; font-size: 8pt; font-family: lucida sans, lucida sans unicode; letter-spacing: 1px;"><span style="color:#000;">name</span> <span style="color:#555;">series</span></div> </raw-code><div style="margin: 20px auto 0 auto; text-align:justify; width:184px; height: 118px; background: #fff; -moz-opacity: 0.60; opacity: 0.60; padding: 6px 8px; font-size: 8pt; font-family: times new roman; letter-spacing: 1px; overflow:auto; line-height: 1.4em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat. Mauris eget blandit ipsum. Curabitur rutrum mi urna, eu dictum mauris ullamcorper ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat.</div></div></td> <td><raw-code><div style="display:inline-table; width:200px; height:300px; border-radius:20px; -moz-border-radius: 20px; background: url(http://i.imgur.com/fdwRuZ8.png); margin: 10px 3px 3px 3px"><center><img src="ICON URL" style="height: 80px; width: 80px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius: 50%; margin: 10px 0 10px 0; padding:0; -webkit-box-shadow: -3px 4px 0 2px #808784; box-shadow: -3px 4px 0 2px #808784;"></center> <div style="margin: 0 auto; text-align:center; width:200px; background: #fff; -moz-opacity: 0.60; opacity: 0.60;padding: 3px 0; font-size: 8pt; font-family: lucida sans, lucida sans unicode; letter-spacing: 1px;"><span style="color:#000;">name</span> <span style="color:#555;">series</span></div> </raw-code><div style="margin: 20px auto 0 auto; text-align:justify; width:184px; height: 118px; background: #fff; -moz-opacity: 0.60; opacity: 0.60; padding: 6px 8px; font-size: 8pt; font-family: times new roman; letter-spacing: 1px; overflow:auto; line-height: 1.4em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat. Mauris eget blandit ipsum. Curabitur rutrum mi urna, eu dictum mauris ullamcorper ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat.</div></div></td> </tr> <tr> <td><raw-code><div style="display:inline-table; width:200px; height:300px; border-radius:20px; -moz-border-radius: 20px; background: url(http://i.imgur.com/fdwRuZ8.png); margin: 10px 3px 3px 3px"><center><img src="ICON URL" style="height: 80px; width: 80px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius: 50%; margin: 10px 0 10px 0; padding:0; -webkit-box-shadow: -3px 4px 0 2px #808784; box-shadow: -3px 4px 0 2px #808784;"></center> <div style="margin: 0 auto; text-align:center; width:200px; background: #fff; -moz-opacity: 0.60; opacity: 0.60;padding: 3px 0; font-size: 8pt; font-family: lucida sans, lucida sans unicode; letter-spacing: 1px;"><span style="color:#000;">name</span> <span style="color:#555;">series</span></div> </raw-code><div style="margin: 20px auto 0 auto; text-align:justify; width:184px; height: 118px; background: #fff; -moz-opacity: 0.60; opacity: 0.60; padding: 6px 8px; font-size: 8pt; font-family: times new roman; letter-spacing: 1px; overflow:auto; line-height: 1.4em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat. Mauris eget blandit ipsum. Curabitur rutrum mi urna, eu dictum mauris ullamcorper ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat.</div></div></td> <td><raw-code><div style="display:inline-table; width:200px; height:300px; border-radius:20px; -moz-border-radius: 20px; background: url(http://i.imgur.com/fdwRuZ8.png); margin: 10px 3px 3px 3px"><center><img src="ICON URL" style="height: 80px; width: 80px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius: 50%; margin: 10px 0 10px 0; padding:0; -webkit-box-shadow: -3px 4px 0 2px #808784; box-shadow: -3px 4px 0 2px #808784;"></center> <div style="margin: 0 auto; text-align:center; width:200px; background: #fff; -moz-opacity: 0.60; opacity: 0.60;padding: 3px 0; font-size: 8pt; font-family: lucida sans, lucida sans unicode; letter-spacing: 1px;"><span style="color:#000;">name</span> <span style="color:#555;">series</span></div> </raw-code><div style="margin: 20px auto 0 auto; text-align:justify; width:184px; height: 118px; background: #fff; -moz-opacity: 0.60; opacity: 0.60; padding: 6px 8px; font-size: 8pt; font-family: times new roman; letter-spacing: 1px; overflow:auto; line-height: 1.4em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat. Mauris eget blandit ipsum. Curabitur rutrum mi urna, eu dictum mauris ullamcorper ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat.</div></div></td> <td><raw-code><div style="display:inline-table; width:200px; height:300px; border-radius:20px; -moz-border-radius: 20px; background: url(http://i.imgur.com/fdwRuZ8.png); margin: 10px 3px 3px 3px"><center><img src="ICON URL" style="height: 80px; width: 80px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius: 50%; margin: 10px 0 10px 0; padding:0; -webkit-box-shadow: -3px 4px 0 2px #808784; box-shadow: -3px 4px 0 2px #808784;"></center> <div style="margin: 0 auto; text-align:center; width:200px; background: #fff; -moz-opacity: 0.60; opacity: 0.60;padding: 3px 0; font-size: 8pt; font-family: lucida sans, lucida sans unicode; letter-spacing: 1px;"><span style="color:#000;">name</span> <span style="color:#555;">series</span></div> </raw-code><div style="margin: 20px auto 0 auto; text-align:justify; width:184px; height: 118px; background: #fff; -moz-opacity: 0.60; opacity: 0.60; padding: 6px 8px; font-size: 8pt; font-family: times new roman; letter-spacing: 1px; overflow:auto; line-height: 1.4em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat. Mauris eget blandit ipsum. Curabitur rutrum mi urna, eu dictum mauris ullamcorper ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet augue id commodo placerat.</div></div></td> </tr> </table> each section is a `div` group inside a `td` cell. there are 3 cells to a row. just copy the `tr` to get three more!
features.	background url pattern from patterncooler.com. customize that shit. recommend using the resize option to resize to least 50%, depending on the pattern. icon drop shadow: #808784 (there's two of these per icon, so make sure to change both.) text background: #fff text color: name is #000, series is #555. body text is default #000 (it's not in the code)
credit.	please credit pastries somewhere!

Flat | Top-Level Comments Only

there is! find the parts of the code that say height:300px; and height:118px;; see this image for reference. subtract the same amount from both heights, the first to change the height of the entire cell. and the second to change the textframe height. o/

that helps a lot. Last question, as my 'text' doesn't show up against my background >.> how do I change font color within the text box? I'm sure I can figure it out, but it's not being obvious to me otherwise. (unless it's in the instructions above and I'm missing it. >.<)

Seriously though, I love this layout. It's customizable, but also straightforward and not too busy. :)

the text is actually not colored (default #000) so to change it! there are various ways but it depends on how easily you think you'll be able to find the bit of code again u_u

</raw-code><div style="big fat long div thing here"><span style="color: #hexcode;">lorem ipsum text filler stuff</span></div></div></td>

or

</raw-code><div style="big; fat; long; div; thing; here; color: #colorhex;">lorem ipsum text filler stuff</div></div></td>

also thank you ♥ and i'm glad you're enjoying it!! :> customize away, i design it for that very purpose.

table codes 015

no subject

no subject

no subject