tesscodes | Layout: Blocked

image prev |

001: Informative Info

Yet another layout! I guess I'm just in a code-y kinda mood. This S1 Generator layout disables just about everything, so if you're someone who prefers a usable friends list this probably isn't the layout for you. Sorry! Features: Hover nav, hidden entries, room for ten pictures. Enjoy! <3

002: The Layout

FRIENDS_WEBSITE<=
<div id="main">
<span class="pic" style="background:url(PIC1);"><a href="http://journalname.insanejournal.com/">RELOAD</a></span><span class="pic" style="background:url(PIC2);"><a href="http://journalname.insanejournal.com/profile">PROFILE</a></span><span class="pic" style="background:url(PIC3);"><a href="http://www.insanejournal.com/friends/add.bml?user=journalname">ADD ME</a></span><span class="pic" style="background:url(PIC4);"><a href="http://www.insanejournal.com/allpics.bml?user=journalname">USERPICS</a></span>

<span class="pic1" style="background:url(PIC5);"><a href="BIOURL">BIOGRAPHY</a></span>
<span class="pic2" style="background:url(PIC6);"><a href="DROPBOXURL">DROPBOX</a></span>

<span class="middle">
<span class="title">title here</span>
<span class="subtitle">hover for navigation</span>
</span>

<span class="pic" style="background:url(PIC7);"><a href="FREEURL1">LINK ONE</a></span><span class="pic" style="background:url(PIC8);"><a href="FREEURL2">LINK TWO</a></span><span class="pic" style="background:url(PIC9);"><a href="FREEURL3">LINK THREE</a></span><span class="pic" style="background:url(PIC10);"><a href="http://tessisamess.insanejournal.com/">LAYOUT</a></span>
</div>

<div> </div>
<=FRIENDS_WEBSITE

DAY_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=
<div id="main">
<span class="pic" style="background:url(PIC1);"><a href="http://journalname.insanejournal.com/">RELOAD</a></span><span class="pic" style="background:url(PIC2);"><a href="http://journalname.insanejournal.com/profile">PROFILE</a></span><span class="pic" style="background:url(PIC3);"><a href="http://www.insanejournal.com/friends/add.bml?user=journalname">ADD ME</a></span><span class="pic" style="background:url(PIC4);"><a href="http://www.insanejournal.com/allpics.bml?user=journalname">USERPICS</a></span>

<span class="pic1" style="background:url(PIC5);"><a href="BIOURL">BIOGRAPHY</a></span>
<span class="pic2" style="background:url(PIC6);"><a href="DROPBOXURL">DROPBOX</a></span>

<span class="middle">
<span class="title">title here</span>
<span class="subtitle">hover for navigation</span>
</span>

<div> </div>
<=DAY_WEBSITE

LASTN_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=
<title>JOURNAL TITLE</title>
<style>
<!--
/*-- BLOCKED - TESSISAMESS - 2013 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/*GENERAL*/
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{height:0;width:4px;display:block;background:transparent;}
::-webkit-scrollbar-track-piece{background:#202020;}
::-webkit-scrollbar-thumb:vertical{height:0;background:#2f2f2f;}
::-webkit-scrollbar-thumb:horizontal{width:0;background:#2f2f2f;}

body{background:#090909;color:transparent;margin:0;padding:0;}
a:link, a:active, a:visited{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{text-decoration:none;}

/*THE GOODS*/
#main{visibility:visible;width:784px;position:fixed;left:50%;margin-left:-392px;top:50%;margin-top:-298px;background:#f5f5f5;padding:3px;border:1px solid #ddd;text-align:center;font-size:0px;-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;}
#main:hover{font-size:12px;}
#main img{display:inline;-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);filter:grayscale(100%);}
#main a{text-align:center;width:80%;margin:85px auto 0 auto;display:block;background:#aaa;color:#000;font-family:georgia,serif;font-style:italic;letter-spacing:1px;text-transform:lowercase;font-weight:bold;}
#main a:hover{background:#000;color:#fff;letter-spacing:3px;}

.pic, .pic1, .pic2{margin:3px;width:190px;height:190px;text-align:center;}
.pic{display:inline-block;}
.pic1{float:left;}
.pic2{float:right;}

.middle{display:block;width:388px;margin:3px auto;background:#aaa;height:190px;line-height:17px;letter-spacing:2px;}
.title{display:block;font-size:35px;font-family:georgia,serif;font-style:italic;padding-top:85px;color:#000;text-transform:lowercase;border-bottom:3px solid #999;margin:0 16px;}
.subtitle{font-size:8px;font-family:helvetica,arial,sans-serif;color:#fff;text-transform:uppercase;}

/*HIDING SHIT*/
.shadowed img, .meta, table table .index, tr.caption, .entrybox, .entrybox td.index, .index3, .caption{display:none;}
table, tr, td, .shadowed{background:transparent;}

-->
</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
</td></tr>
<=FRIENDS_TALK_LINKS

CALENDAR_WEBSITE<=
<div id="main">
<span class="pic" style="background:url(PIC1);"><a href="http://journalname.insanejournal.com/">RELOAD</a></span><span class="pic" style="background:url(PIC2);"><a href="http://journalname.insanejournal.com/profile">PROFILE</a></span><span class="pic" style="background:url(PIC3);"><a href="http://www.insanejournal.com/friends/add.bml?user=journalname">ADD ME</a></span><span class="pic" style="background:url(PIC4);"><a href="http://www.insanejournal.com/allpics.bml?user=journalname">USERPICS</a></span>

<span class="pic1" style="background:url(PIC5);"><a href="BIOURL">BIOGRAPHY</a></span>
<span class="pic2" style="background:url(PIC6);"><a href="DROPBOXURL">DROPBOX</a></span>

<span class="middle">
<span class="title">title here</span>
<span class="subtitle">hover for navigation</span>
</span>

<div> </div>
<=CALENDAR_WEBSITE

LASTN_WEBSITE<=
<div id="main">
<span class="pic" style="background:url(PIC1);"><a href="http://journalname.insanejournal.com/">RELOAD</a></span><span class="pic" style="background:url(PIC2);"><a href="http://journalname.insanejournal.com/profile">PROFILE</a></span><span class="pic" style="background:url(PIC3);"><a href="http://www.insanejournal.com/friends/add.bml?user=journalname">ADD ME</a></span><span class="pic" style="background:url(PIC4);"><a href="http://www.insanejournal.com/allpics.bml?user=journalname">USERPICS</a></span>

<span class="pic1" style="background:url(PIC5);"><a href="BIOURL">BIOGRAPHY</a></span>
<span class="pic2" style="background:url(PIC6);"><a href="DROPBOXURL">DROPBOX</a></span>

<span class="middle">
<span class="title">title here</span>
<span class="subtitle">hover for navigation</span>
</span>

<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
→(PIC1) through (PIC10) (Leave the parentheses around your image URL! This ensures that you won't accidentally replace any class names with image URLs. These images must be square and at least 190x190; you will need to desaturate them yourself if you want them to be black and white.)
→title here
→BIOURL and DROPBOXURL
→FREEURL1 and LINK ONE; FREEURL2 and LINK TWO; FREEURL3 and LINK THREE
→JOURNAL TITLE

→All done! :D

004: CTRL+F This Shit

You'll notice the red on the demo is not in the for-use version. Fear not! Do a replace all on #aaa with your color of choice to get your own splash of color! Replace #999 to change the title underline to a darker shade of your chosen color. Need some ideas for your accent color? No worries; here you go!

#A82424

#8653B5

#D2691E

#7AA2EA

#8FBC8B

#008B8B

#E9967A

#556B2F

#BB0F6C

#B0C4DE

#CD5C5C

#3CB371

#4682B4

#FF69B4

005: Rules and Shit

→Credit me in your profile if you remove my link from the sidebar's coding.
→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.