tesscodes | Layout: For Simplicity's Sake

image prev |

001: Informative Info

Another freebie while I get through my sale layouts! Gotta crank out them 'for fun' codes while I work or I get burnt out, haha. Check out that super badass dropdown menu, guys! I wouldn't have been able to do it without the lovely ~wastintime. Enjoy! <3

Update 5.24.15: Fixed a minor glitch where the dropdown links are active/clickable even when they are not displayed.

002: The Layout

FRIENDS_OPT_ITEMS=>15

FRIENDS_WEBSITE<=

<div id="title">
<span class="title">THIS IS YOUR TITLE</span>
<span id="links">
<a href="http://journalname.insanejournal.com/">recent</a>
<a href="http://journalname.insanejournal.com/profile">profile</a>
<a href="http://journalname.insanejournal.com/friends">friends</a>
<a href="http://tessisamess.insanejournal.com/">layout by</a>
</span>
</div>

<form>
<span class="navs">
<span class="nav">
<input type="radio" id="nav-1" name="nav-group-1">
<label for="nav-1">NAVIGATION <i>▼</i></label>
<span class="nav" id="close-nav">
<input type="radio" id="nav-close" name="nav-group-1">
<label for="nav-close">NAVIGATION <i>▲</i></label>
</span>
<span class="navlist">
<a href="URL1">LINK TITLE 1</a>
<a href="URL2">LINK TITLE 2</a>
<a href="URL3">LINK TITLE 3</a>
<a href="URL4" style="border:none!important;">LINK TITLE 4</a> /*MAKE SURE IF YOU ADD NEW LINK LINES THEY'RE ABOVE THIS ONE*/
</span>
</span>
</span>
</form>

<div> </div>
<=FRIENDS_WEBSITE

DAY_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2"><div id="footer">
Entry Options: <a href="%%urlread%%">%%messagecount%% comments</a> · <a href="%%urlpost%%">add comment</a> · <a href="http://www.insanejournal.com/editjournal_do.bml?%%itemargs%%">edit entry</a> · <a href="http://www.insanejournal.com/edittags.bml?%%itemargs%%">edit tags</a>
</div>
</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<div> </div>
<=DAY_WEBSITE

LASTN_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2"><div id="footer">
Entry Options: <a href="%%urlread%%">%%messagecount%% comments</a> · <a href="%%urlpost%%">add comment</a> · <a href="http://www.insanejournal.com/editjournal_do.bml?%%itemargs%%">edit entry</a> · <a href="http://www.insanejournal.com/edittags.bml?%%itemargs%%">edit tags</a>
</div>
</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=
<title>JOURNAL TITLE</title>
<link rel="shortcut icon" href="http://i.imgur.com/68FMePQ.png" type="image/ico" />
<style>
<!--
/*-- FOR SIMPLICITY'S SAKE - TESSISAMESS - 2014 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/*GENERAL*/
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:400;src:local('Dancing Script'), local('DancingScript'), url(http://themes.googleusercontent.com/static/fonts/dancingscript/v4/DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34.woff) format('woff');}
@font-face{font-family:'Ubuntu Mono';font-style:normal;font-weight:400;src:local('Ubuntu Mono'), local('UbuntuMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ubuntumono/v4/ViZhet7Ak-LRXZMXzuAfkYbN6UDyHWBl620a-IRfuBk.woff) format('woff');}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{height:0;width:4px;display:block;background:transparent;}
::-webkit-scrollbar-track-piece{background:#ddd;}
::-webkit-scrollbar-thumb:vertical{height:0;background:#999;}
::-webkit-scrollbar-thumb:horizontal{width:0;background:#999;}

body{margin:10px 0 0 0;padding:0;background:#f5f5f5 url(http://i.imgur.com/6L4FoIO.png)top left fixed;color:#222;}
body,table,tr,td{text-align:justify;font-family:helvetica,arial,sans-serif;font-size:10px;}
a{color:#bbb;text-decoration:none;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{color:#999;text-decoration:none;}
blockquote{padding:5px;border:1px solid #ccc;font-family:Ubuntu Mono,monospace;text-transform:uppercase;font-size:10px;color:#aaa;}
img{opacity:0.7;-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);filter:grayscale(100%);}

/*THE GOODS*/
#title{visibility:visible;position:fixed;z-index:200;top:0;left:0;right:0;margin:0;padding:0 5px;height:30px;background:#fff;border-bottom:1px solid #ccc;}
.title{float:left;height:30px;line-height:30px;font-family:Dancing Script;text-transform:lowercase;font-size:33px;color:#efefef;text-shadow:1px 1px 0 #a9a9a9;}
#links{margin-left:10px;margin-top:8px;float:left;font-family:Ubuntu Mono,monospace;text-transform:uppercase;}
#links a{display:inline-block;min-width:100px;margin:0 2px;font-size:10px;letter-spacing:2px;padding:1px;border:1px solid #ccc;color:#aaa;text-align:center;}
#links a:hover{background:#f5f5f5;color:#555;border:1px solid #bbb;}

#sidebar{position:fixed;display:block;top:100px;left:170px;width:83px;height:83px;padding:4px;background:#fff;border:1px solid #ccc;}
#sidebar img{display:inline;width:83px;height:83px;}

.navs{position:fixed;width:80px;top:200px;left:170px;min-height:58px;clear:both;margin:0;display:block;color:#aaa;font-family:Ubuntu Mono,monospace;}
.nav{float:left;}
.nav label{background:#fff;padding:1px;cursor:pointer;width:90px;text-align:center;display:block;border:1px solid #ccc;margin-left:-1px;position:relative;left:1px;}
.nav label i{font-style:normal;font-size:10px;color:#ccc;}
.nav [type=radio]{display:none;}

.navlist{overflow:hidden;position:absolute;top:15px;opacity:0;left:0;background:#fff;right:0;bottom:0;padding:0;border:1px solid #ccc;border-top:none!important;height:0;width:82px;-webkit-transition:all 400ms;-moz-transition:all 400ms;-ms-transition:all 400ms;-o-transition: all 400ms;transition:all 400ms;}
.navlist a{display:block;width:100%;padding:2px 0;margin:0;color:#999;border-bottom:1px solid #ccc;text-transform:uppercase;font-size:10px;letter-spacing:1px;}
.navlist a:hover{background:#f5f5f5;color:#777;border-bottom:1px solid #bbb;}

[type=radio]:checked ~ label{z-index:2;}
[type=radio]:checked ~ label ~ .navlist{z-index:1;opacity:1;height:100%;padding:5px;}
#close-nav{position:absolute;z-index:-1;top:0px;}
#close-nav label{background:#fff;border-bottom:1px solid #fff;}
[type=radio]:checked ~ label ~ #close-nav{z-index:3;}

/*ENTRIES*/
table, tr, td, .shadowed{background:transparent;font-size:11px;}
table{width:595px;margin-left:420px;margin-right:100%;}
table td{border:0px transparent;}
table table{background:transparent;width:100%;margin:0;} 
table, table table td{background:transparent;border:none;padding:0;}

.shadowed img{color:#E3DECB;border:none;}

td.caption, .subject{text-align:left;font-family:Dancing Script;text-transform:lowercase;font-size:33px;color:#efefef;text-shadow:1px 1px 0 #a9a9a9;}
p table table td.caption, .head{line-height:25px;}
#footer{text-align:left;border-top:1px solid #ccc;;line-height:100%;margin:10px 0 0 0;padding:5px 0 0 0;font-size:10px;color:#aaa;letter-spacing:2px;text-transform:uppercase;font-family:Ubuntu Mono,monospace;}
#footer a{color:#aaa;}
#footer a:hover{color:#555;}

.entrybox .index{color:#F6BF96;}
.entrybox{visibility:visible;background:#fff;padding:5px;border:1px solid #ccc;margin-bottom:15px;}
.entrybox, .entrybox table{color:#222;}
.entrybox table{line-height:150%;}
.entrybox td.index2{text-align:center;}
.entrybox img{max-width:570px;padding:4px;background:#fff;border:1px solid #ccc;}

table table table{background:transparent;width:auto;float:right;}
.meta{font-size:10px;font-family:Ubuntu Mono,monospace;text-transform:uppercase;color:#999;}
table table table td.meta{padding:1px;line-height:4pt;font-size:10px;color:#999;letter-spacing:2px;}

.index2{font-style:normal;text-align:center;}
.entrybox a.index{display:inline-block;margin-left:5px;margin-bottom:5px;text-align:center;font-size:9px;letter-spacing:0;}
.entrybox a.index img{margin-bottom:5px;width:70px;height:70px;padding:4px;background:#fff;border:1px solid #ccc;}
.entrybox a.index font{color:#666;display:inline-block;text-align:center;}
table table .index{padding:0;background:transparent;text-transform:uppercase;color:#999;line-height:8px;font-size:10px;text-align:right;letter-spacing:2px;font-family:Ubuntu Mono,monospace;text-transform:uppercase;}

/*ICON REPLACEMENTS*/
.ljuser img[src*="img/userinfo.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/PUI222y.png)no-repeat!important;padding:24px 0 0 24px!important;}
.ljuser img[src*="img/community.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/tO8ZPsR.png)no-repeat!important;padding:24px 0 0 26px!important;}
img[src*="img/icon_protected.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/GHFy9wn.png)no-repeat!important;padding:25px 0 0 25px!important;}
img[src*="img/icon_private.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/pl9RMHu.png)no-repeat!important;padding:25px 0 0 25px!important;}
img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/GHFy9wn.png)no-repeat!important;padding:25px 0 0 25px!important;}

/*HIDING SHIT*/
.shadowed img, tr.caption, .index3, .entrybox td.index{display:none;}
table table table table .meta{visibility:hidden;position:absolute;top:-20px;}
.shadowed td div{visibility:hidden;position:absolute;top:1px;}

-->
</style>

<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2"><div id="footer">
Entry Options: <a href="%%urlread%%">%%messagecount%% comments</a> · <a href="%%urlpost%%">add comment</a> · <a href="http://www.insanejournal.com/editjournal_do.bml?%%itemargs%%">edit entry</a> · <a href="http://www.insanejournal.com/edittags.bml?%%itemargs%%">edit tags</a>
</div>
</td></tr>
<=FRIENDS_TALK_LINKS

LASTN_OPT_ITEMS=>15

CALENDAR_WEBSITE<=

<div> </div>
<=CALENDAR_WEBSITE

LASTN_WEBSITE<=

<div> </div>
<=LASTN_WEBSITE

003: Directions

→Make sure you have a website in your profile page.
→Go to Basics and choose S1, then save.
→Go to Look and Feel, choose Generator for all views, then save.
→Go to Custom Options and paste the layout code, then save. Make sure you've done a replace all on the following:

→journalname
→THIS IS YOUR TITLE
→YOURICON
→sideimage
→URL1 through URL4 and LINK TITLE 1 through LINK TITLE 4
→JOURNAL TITLE

→All done! :D

004: CTRL+F This Shit

→#f5f5f5 url(http://i.imgur.com/6L4FoIO.png)top left fixed to change page background.
→border:1px solid #ccc to change content borders.
→background:#fff to change content backgrounds.
→color:#efefef;text-shadow:1px 1px 0 #a9a9a9; to change title and entry title colors.
→font-family:Ubuntu Mono,monospace; to change topbar/dropdown/entrylink font.
→font-family:helvetica,arial,sans-serif; to change page font.
→font-family:Dancing Script; to change title and entry title font.
→#222; to change page font color.
→#bbb; to entry link color.
→#aaa; to change top/nav link text color and blockquote text color.

005: Rules and Shit

→Credit me either in your link list or your profile.
→Do not remove my credit from the CSS.
→Do not redistribute in part or in whole.
→If you break something during editing don't be scared to ask me to see what happened. Yep. That's a rule.
→If you're a maker like I am and you do something cool with this I'd really like to see it, but it's not necessary.