COME CLEAN, COME EASY.

09 June 2016 @ 11:45 am

NOTES:
- the code
- square navcode, can be used as muselist too
- edit to your heart's content
- because divs, be sure to close the tags properly; dw freaks out over divs

Tags: !divs

Leave a comment

manual

03 March 2016 @ 04:57 pm

DIV | low light (updated)

dana | gmt +8 | email

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

NOTES:
- intended for really minimal texts
- you can edit it to hold more text but you'll need to adjust both div heights
- because divs, be sure to close the tags properly; dw freaks out over divs

UPDATED VERSION 2022:

how to adjust height:
search for min-height: 250px; and replace the numerical value in increments of 5px. both instances of min-height: (value); should match. (ex. lorem ipsum example is set to 330px.)

how to change colors:
search for rgba(value) and replace with a hexadecimal counterpart (#xxxxxx value) or a different rgba value. (color-hex is a good converter.)

quick note:
specially formatted journal pages are gonna make this boogie esp. ported layouts, it's best viewed on the site skin. still looking for a way to clear inherited css, sorry guys.

ALTERNATE VERSION:

same deal as above, this one mostly works with the journal layout but it'll still need some tweaks. let me know if it continues to go bonkers pls 🥲

Tags: !divs

3 comments | Leave a comment

manual

29 June 2015 @ 11:30 pm

CODE | lightbox

1989
'cause baby now we've got bad blood.

PHILADELPHIA
application
relations
calendar
visuals
inbox

THIS IS ENTIRELY IN DIVS
MAKE SURE ALL DIV TAGS ARE CLOSED
or dw will go nuts and kill the page

PROPS TO

brewski for the code inspiration

<raw-code><div style="background: url(BACKGROUNDIMG) #333; width:500px; height:500px;padding:0;"><div style="background: url(FOREGROUNDIMG); background-repeat: no-repeat;background-position: center; width:350px; height:350px;padding:0; position: relative; top:50px; border: 25px solid rgba(0,0,0,0.6);box-shadow: 0px 5px 5px #000;"><div style="background: transparent; width:300px; height:300px;padding:10px; color: #fff; font-family: 'helvetica', 'arial', sans-serif; font-size: 12pt; font-style: italic; text-transform: uppercase; font-weight: 800; text-align: right; margin-top:6px; line-height: 100%;">
MAINTITLE<br/>
<small><small>SUBTITLES</small></small>
<hr style="border: solid 2px #fff;">SUBHEADER<br/>
<span style="font-size: 8pt;"><a href="url" style="text-decoration: none; color: #fff;">link</a><br/>
<a href="url" style="text-decoration: none; color: #fff;">link</a><br/>
<a href="url" style="text-decoration: none; color: #fff;">link</a><br/>
<a href="url" style="text-decoration: none; color: #fff;">link</a><br/>
<a href="url" style="text-decoration: none; color: #fff;">link</a><br/></span>
</div></div></div>
</raw-code>

Tags: !divs, type: misc, type: navigation

3 comments | Leave a comment

manual

10 November 2014 @ 10:00 pm

code | mike & julie

- - - - -

( live preview under the cut. )

- - - - -

CODE FOR "MIKE"

<table style="font-family: Helvetica, Optima, Arial, sans-serif; font-size: 10pt; text-transform: uppercase;"><tr><td colspan="5" style="text-align: center; padding: 10px; font-weight: 100;"><span style="font-size: 4em; letter-spacing: 8pt;"><a name="top"></a>SOME TITLE</span></td></tr>
<tr><td colspan="4" style="text-align: center; padding: 20px 0 30px 0; font-weight: 100;"><span style="letter-spacing: 1pt;"><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a></span></td></tr>

<!-- THE RED HEADER TEXT --!>
<tr><td colspan="4" style="padding: 20px 0 0 0; line-height: 1.8em;"><a name="faves"></a><span style="color: #ff0000; font-size: 4em; letter-spacing: -3pt; padding: -10pt;"><a href="#top" style="text-decoration: none; color: #ff0000;">↺</a>YOUR CATEGORY</span><hr style="border: 1px solid #ff0000;" /></td></tr>

<!-- WHERE YOUR CHARACTERS GO --!>
<tr><td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td>
<td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td>
<td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td>
<td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td></tr></table>

- - - - - - -

- - - - -

( live preview under the cut. )

- - - - -

CODE FOR "JULIE"

<raw-code><table style="font-family: Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif; text-transform: uppercase;"><tr><td colspan="4" style="text-align: center; padding: 10px; font-weight: 100;"><span style="font-size: 4em; letter-spacing: 8pt;">HEADER TITLE</span></td></tr>

<!-- YOUR MENU LINKS --!>
<tr><td colspan="4" style="text-align: center; padding: 20px 0 30px 0; font-weight: 100;"><span style="letter-spacing: 1pt;"><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a></span></td></tr>

<!-- YOUR CHARACTERS COME IN AFTER THIS LINE --!>
<a name="LINK"></a>
<tr><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;">
<div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; height: 100px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;">
<div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;">
<div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ffb2ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;">
<div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td></TR></table></raw-code>

NOTES:
— ask if something messes up etc etc
— FOR MIKE: the refresh text icon thingie automatically links to the top of the table.
— FOR JULIE: if you want to replace the color overlay thing, ctrl+f #ff00ff and replace it with the hex code of your choice.
— [a name=""] tags are for linking within the same table/document; if you want to just link out to a different page for the top menu, just replace name with href.
— if you're linking within the table, make sure your target name and target link match! don't remove the # sign if you do. just replace the word.

Tags: !divs, !html, type: cr chart, type: misc, type: muselist

9 comments | Leave a comment

manual

10 November 2014 @ 07:57 pm

CODE: LATRODECT

( live preview under the cut. )
- - - - -
THE CODE

<center><br/><br/><raw-code><table style="color: #111; font-family: helvetica, arial, sans-serif; font-size: 9pt; letter-spacing: 1pt;"><tr><td style="background: url(BACKGROUND IMG URL); background-position: center center; height: 140px; width: 400px;">
<div style="width: 400px; height: 160px;"><div style="width: 140px; height: 140px; text-align: left; display: inline-block;">
<div style="border: 5px solid #fff; height: 100px; width: 100px; background: url(ICON URL); border-radius: 50%; margin: 20px;"></div></div>
<div style="width: 150px; height: 100px; padding: 20px 10px 0px 10px; float: left; margin-top: -140px; margin-left: 126px;">
<div style="width: 240px; height: 160px; color: #fff; font-weight: bolder; font-size: 2.4em; padding: 5px; text-align: justify;">THIS IS YOUR HEADER.</div></div></div></td><td rowspan="4" style="padding: 0 16px; vertical-align: top; width: 200px;"><a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/>
<a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/>
<a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/>
<a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/>
<a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/>
<p style="text-align:justify; font-size: 0.9em; padding: 10px 0;">SMALLTEXT BLURB GOES HERE</p></td></tr>
<tr><td style="background: #fff; width: 400px; height: auto; padding: 20px 8px 0 8px; text-align:justify;"><span style="color: #000; font-size:2.0em;font-weight:bolder; padding: 2px;">HEADER TITLE HERE</span><br/><span style="color: #FF0000; font-size:1.6em;font-weight:bolder; padding: 2px;">HEADER SUBTITLE HERE</span></td></tr>
<tr><td style="background: #fff; width: 400px; height: auto; padding: 20px 12px 20px 12px; text-align:justify;">MAIN TEXT GOES HERE.</td></tr>
<tr><td width="400"></td></tr></table></raw-code><Br/><Br/></center>

NOTES:
— Yell in my direction if something messes up.
— This is in raw-code, which means DW's autoformatted returns (that's when you hit enter to linebreak) don't work. If you want linebreaks, just add [br/] at the end of the line (replace the brackets with the correct symbols). Do two of those for spacing.
— Edit to your heart's content, credit not required, just don't claim the code as your own.

Tags: !divs, !html

1 comment | Leave a comment