Tessisamess: Layouts, Codes, & Resources

S	M	T	W	T	F	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

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.

Tags: layouts, layouts: s1 generator

Using on DW?

Comments

(Comment)

Page 1 of 2
<<	[1] [2]	>>

affictitious

Dec. 18th, 2013 10:43 pm (UTC)

OMFG, TESS. This is fucking amazeballs!

(no subject) -

tessisamess - Dec. 18th, 2013 10:51 pm (UTC)

affictitious - Dec. 18th, 2013 10:54 pm (UTC)

amelioration

Dec. 19th, 2013 03:18 pm (UTC)

Once again, amazing! :D

tessisamess - Dec. 19th, 2013 09:36 pm (UTC)

fools_mate

Dec. 19th, 2013 09:34 pm (UTC)

I love this so hard.

matt_lawrence

Dec. 20th, 2013 12:30 am (UTC)

TOTALLY USING. JUST SAYING.

<3

tessisamess - Dec. 20th, 2013 02:16 am (UTC)

nebari

Dec. 20th, 2013 05:43 am (UTC)

... It took me a while to get past the whole 'WHAT ARE YOU OMG' thing, but I'm going to use this too.

tessisamess - Dec. 20th, 2013 05:45 am (UTC)

pawesome

Dec. 20th, 2013 06:30 am (UTC)

THIS IS THE MOST BEAUTIFUL THING I HAVE EVER SEEEEEEEEEEN!

tessisamess - Dec. 20th, 2013 06:40 am (UTC)

kopi

Dec. 20th, 2013 06:47 am (UTC)

THIS IS AMAZING!

tessisamess - Dec. 20th, 2013 06:51 am (UTC)

andraste

Dec. 20th, 2013 06:51 am (UTC)

o m g

tessisamess - Dec. 20th, 2013 06:55 am (UTC)

andraste - Dec. 20th, 2013 06:58 am (UTC)

tessisamess - Dec. 20th, 2013 06:59 am (UTC)

andraste - Dec. 20th, 2013 07:00 am (UTC)

tessisamess - Dec. 20th, 2013 07:15 am (UTC)

shiftinggears

Dec. 20th, 2013 08:48 am (UTC)

SO I MAY HAVE ACCIDENTALLY BORKED SOMETHING.

HALP?

tessisamess - Dec. 20th, 2013 05:18 pm (UTC)

shiftinggears - Dec. 20th, 2013 08:09 pm (UTC)

tessisamess - Dec. 20th, 2013 08:10 pm (UTC)

anursefirst

Dec. 20th, 2013 04:03 pm (UTC)

This is fantastic! So to get to the friends page and your entries, you could just use those as the links?

tessisamess - Dec. 20th, 2013 05:20 pm (UTC)

anursefirst - Dec. 20th, 2013 08:34 pm (UTC)

tessisamess - Dec. 20th, 2013 08:37 pm (UTC)

maines

Dec. 23rd, 2013 06:17 am (UTC)

So you can't use it as an actual journal layout? I can't see my entries at all!

But it's so pretty though! :'(

tessisamess - Dec. 23rd, 2013 07:12 am (UTC)

maines - Dec. 23rd, 2013 07:16 am (UTC)

pitterpat

Dec. 26th, 2013 07:27 pm (UTC)

This is stunning I used it for ~

watchtowersing

tessisamess - Jan. 21st, 2014 11:15 pm (UTC)

faith__lehane

Dec. 27th, 2013 02:49 am (UTC)

Hi there. Love this layout and wanted to use it for my newly-inherited journal. My problem is that I can't get the pics to show. I uploaded them to Photobucket and also tried Tinypic but every time I put them in, it's saying that the image has been moved or deleted. Can you give me any pointers please? I'm rubbish with HTML so I'm probably doing something wrong.

urian - Jan. 21st, 2014 03:02 am (UTC)

faith__lehane - Jan. 27th, 2014 09:51 am (UTC)

urian - Jan. 27th, 2014 02:06 pm (UTC)

faith__lehane - Jan. 28th, 2014 12:12 am (UTC)

urian - Jan. 28th, 2014 12:25 am (UTC)

urian - Jan. 28th, 2014 12:30 am (UTC)

urian - Jan. 28th, 2014 12:32 am (UTC)

faith__lehane - Jan. 28th, 2014 12:38 am (UTC)

urian - Jan. 28th, 2014 12:40 am (UTC)

urian - Jan. 28th, 2014 12:37 am (UTC)

carnal_desire

Dec. 30th, 2013 06:02 am (UTC)

Awesome job, Tess! :D I'm using it for this journal. Thank you again!

thequarter

Jan. 1st, 2014 08:11 am (UTC)

this is so cool.

urian

Jan. 21st, 2014 03:01 am (UTC)

Thanks sweetheart. Stole this and altered it just to add a center image.

quidditchmods

Feb. 12th, 2014 03:27 am (UTC)

Ugh love this! Used it for our NPC journal:

quidditchnpc

seriesfinale

Mar. 22nd, 2014 05:12 pm (UTC)

Stunning! Using for this journal. You always do brilliant work! :)

tessisamess - Mar. 22nd, 2014 10:22 pm (UTC)

utopian

Jul. 20th, 2014 12:17 am (UTC)

Absolutely brilliant work. Using it for a game I'm tempted to open. Thank you, bb. ♥

(Anonymous)

Aug. 22nd, 2014 12:56 am (UTC)

i don't know if you actually care ei--no, okay, it says in the post that you don't want your credit removed, i thought i would let you know that ~themarshal is using this layout without credit to you anywhere. it's been removed from the layout and isn't in their userinfo, either.

tessisamess - Aug. 22nd, 2014 01:08 am (UTC)

jrdns

Sep. 23rd, 2014 01:17 am (UTC)

This layout is awesome! I was wanting to use this for a community main page, however, is there a way to either a: not have the links hover, or b: have the hover work when on a touch device? This layout is so, so awesome, but I can't get the links to show on touch devices (i.e. iPhone, iPad, etc.). I assume it's because they don't have a cursor so it can't sense the hovering, but I don't know how to rectify it.

tessisamess - Jan. 5th, 2015 05:21 am (UTC)

jrdns - Jan. 5th, 2015 05:25 am (UTC)

tessisamess - Jan. 5th, 2015 07:34 am (UTC)

modsofmarvels - Jan. 24th, 2016 05:16 pm (UTC)

tessisamess - Jan. 5th, 2015 07:35 am (UTC)

mousai

Mar. 9th, 2015 07:40 pm (UTC)

This is WONDERFUL!

It's

musas and I'm using it here for my CDJ!

ouamyth

Jul. 27th, 2015 01:49 am (UTC)

I love this layout out! I'm using it here on my mod journal (the credit is in the profile)

However, I've noticed a problem. Before, when I'd view the journal on a Windows 8 computer, the left corner link and the one next to it move up to the middle of the page. You can also see the usual Generator layout behind the blocks. Now, it seems to have started doing it for Windows 7 when it hadn't before. Is there anything I can do to fix that?

ouamyth - Aug. 9th, 2015 07:25 pm (UTC)

lighthouses

Apr. 29th, 2016 03:23 am (UTC)

i have no idea what i've done wrong here. no freaking clue. help me, obi wan tessnobi. you're my only hope :(

lighthouses please help? ty in advance!

breatheme

Jun. 22nd, 2016 01:52 pm (UTC)

tess I need help! Please? Lol.
For some reason in the top left of this it still shows coding and I have no idea why. Can you possibly point me in the direction of what I did wrong? I know it's black and you can't see it because the background is also black but I know it's there and it's driving me nuts.

Also! I love this design you are THEE greatest. Not the, THEE! lol.

tessisamess - Jun. 22nd, 2016 10:09 pm (UTC)

breatheme - Jun. 22nd, 2016 11:39 pm (UTC)

Page 1 of 2
<<	[1] [2]	>>

Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Need an invite?

Navigation

Please Note:

Tags

Layout By

Profile

Hey there, I'm Tess!

Need an invite?

Navigation

September 2020

Please Note:

Tags

Layout By

Layout: Blocked

Comments