Tessisamess - Layout: Cerchio

image prev |

001: Informative Info

Skipping 005 for the moment because the guide's gonna take forever to write; sorry! BUT HERE, TAKE THIS FOR NOW. Make sure to hover the navlinks for fun stuff. Enjoy! <3

SIDENOTE: I am taking commissions, woo!
OTHER SIDENOTE: ~rpresources is now open for business to take over for RP_Tutorials!

002: The Layout

FRIENDS_OPT_ITEMS=>15

FRIENDS_WEBSITE<=

<div id="header">
<span id="header-left"></span>
<span id="header-inner">
<span id="title">title here</span>
<span id="subtitle">subtitle line goes over here</span>
<span id="linkbar">

<span class="link">RECENT</span>
<span class="link">PROFILE</span>
<span class="link">FRIENDS</span>
<span class="link">ARCHIVE</span>
<span class="link">LAYOUT</span><br>

</span>
</span>
</div>

<div> </div>
<=FRIENDS_WEBSITE

DAY_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2"><div id="footer">
<a href="%%urlread%%#comments">%%messagecount%%</a> <a href="%%urlpost%%">+</a>
</div>
</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<div id="header">
<span id="header-left"></span>
<span id="header-inner">
<span id="title">title here</span>
<span id="subtitle">subtitle line goes over here</span>
<span id="linkbar">

<span class="link">RECENT</span>
<span class="link">PROFILE</span>
<span class="link">FRIENDS</span>
<span class="link">ARCHIVE</span>
<span class="link">LAYOUT</span><br>

</span>
</span>
</div>

<div> </div>
<=DAY_WEBSITE

LASTN_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2"><div id="footer">
<a href="%%urlread%%#comments">%%messagecount%%</a> <a href="%%urlpost%%">+</a>
</div>
</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=
<title>JOURNAL TITLE</title>
<style>
<!--
/*-- CERCHIO - TESSISAMESS - 2013 --*/
/*-- 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: 'Meddon';
  font-style: normal;
  font-weight: 400;
  src: local('Meddon'), url(http://themes.googleusercontent.com/static/fonts/meddon/v4/dunLpE034rp-ugV97zpysQ.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:-20px 0 0 0;padding:0;background:url(http://i.imgur.com/KaDUAYs.png)top left repeat fixed;font-family:helvetica,arial,sans-serif;font-size:10px;color:#000;}
body,table,tr,td{text-align:justify;}
a{color:#F9DD47;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-left:5px;border-left:3px solid #F9DD47;font-style:italic;}

/*THE GOODS*/
#header{visibility:visible;height:300px;margin:-150px 0 0 0;top:50%;left:0;right:0;z-index:50;background:url(http://i.imgur.com/AEhgpqb.png)top left repeat fixed;padding:0 30px;color:#eee;position:fixed;font-family:helvetica,arial,sans-serif;text-transform:uppercase;font-size:9px;}
#header-inner{display:block;width:400px;margin-top:130px;position:relative;z-index:150;}
#header img{display:inline;}
#title{display:block;border-bottom:2px solid #eee;font-family:Meddon;text-transform:lowercase;font-size:35px;line-height:23px;color:#F9DD47;}
#subtitle{text-align:right;color:#aaa;letter-spacing:2px;font-size:11px;display:block;}
#linkbar{text-align:center;width:400px;letter-spacing:1px;font-size:9px;}
.link{display:inline-block;text-align:center;width:75px;}

#abar{height:86px;text-align:center;width:400px;position:fixed;z-index:100;}
.a a{display:inline-block;text-align:center;height:75px;padding-top:11px;margin-top:-11px;opacity:0;-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 a:hover{opacity:1;}
#linkbar a img{width:60px;height:60px;padding:2px;background:#fff;border:5px outset #F9DD47;border-radius:40px;}

/*ENTRIES*/
#backing{width:505px;margin:0;left:465px;top:0;bottom:0;position:fixed;z-index:99;background:#fff;-webkit-box-shadow:0 0 3px 2px #888;box-shadow:0 0 3px 2px #888;}
table, tr, td, .shadowed{background:transparent;font-size:11px;}
.content{}
table{width:495px;margin-left:470px;margin-right:100%;position:relative;z-index: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:center;font-size:26px;font-family:Meddon,georgia,serif;color:#F9DD47;text-transform:lowercase;text-shadow: 1px 0 1px #A5922F;} 
p table table td.caption, .head{line-height:25px;}
#footer{text-align:right;margin:0;padding:10px 0 0 0;}
#footer a{display:inline-block;width:20px;height:20px;line-height:20px;background:#222;margin:0 1px;padding:0;color:#fff;text-align:center;font-family:Meddon,georgia,serif;text-transform:lowercase;}
#footer a:hover{background:#F9DD47;color:#000;}

.entrybox .index{color:#F6BF96;}
.entrybox{visibility:visible;background:#fff;padding:5px;border-bottom:1px solid #ddd;}
.entrybox, .entrybox table{background:#fff;color:#222;}
.entrybox table{line-height:150%;}
.entrybox td.index2{text-align:center;}
.entrybox img{max-width:480px;}
.entrybox a{color:#A5922F;}
.entrybox a:hover{color:#eee;}

table table table{background:transparent;width:auto;float:right;}
.meta{font-size:5pt;text-transform:uppercase;}
table table table td.meta{padding:1px;line-height:4pt;font-size:5pt;}

.index2{font-style:normal;text-align:center;}
table table .index img{width:60px;height:60px;padding:2px;background:#fff;border:5px outset #F9DD47;border-radius:40px;}
table table .index{padding:0;background:transparent;text-transform:uppercase;color:#444;line-height:8px;font-size:8px;text-align:right;}

.ljuser img[src*="img/userinfo.gif"],.ljuser img[src*="img/community.gif"]{width:0!important;height:0!important;display:none!important;}
img[src*="img/icon_protected.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/s0UE76O.png)no-repeat!important;padding:16px 0 0 16px!important;}
img[src*="img/icon_private.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/s0UE76O.png)no-repeat!important;padding:16px 0 0 16px!important;}
img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/s0UE76O.png)no-repeat!important;padding:16px 0 0 16px!important;}

/*HIDING SHIT*/
.shadowed img, tr.caption, .entrybox td.index, .index3{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">
<a href="%%urlread%%#comments">%%messagecount%%</a> <a href="%%urlpost%%">+</a>
</div>
</td></tr>
<=FRIENDS_TALK_LINKS

LASTN_OPT_ITEMS=>15

CALENDAR_WEBSITE<=

<div id="header">
<span id="header-left"></span>
<span id="header-inner">
<span id="title">title here</span>
<span id="subtitle">subtitle line goes over here</span>
<span id="linkbar">

<span class="link">RECENT</span>
<span class="link">PROFILE</span>
<span class="link">FRIENDS</span>
<span class="link">ARCHIVE</span>
<span class="link">LAYOUT</span><br>

</span>
</span>
</div>

<div> </div>
<=CALENDAR_WEBSITE

LASTN_WEBSITE<=

<div id="header">
<span id="header-left"></span>
<span id="header-inner">
<span id="title">title here</span>
<span id="subtitle">subtitle line goes over here</span>
<span id="linkbar">

<span class="link">RECENT</span>
<span class="link">PROFILE</span>
<span class="link">FRIENDS</span>
<span class="link">ARCHIVE</span>
<span class="link">LAYOUT</span><br>

</span>
</span>
</div>

<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
→title here
→subtitle line goes over here
→USERPIC1 through USERPIC4
→JOURNAL TITLE

→All done! :D

004: CTRL+F This Shit

→#F9DD47 to change the accent color.
→#A5922F to change link color and accent color's shadow color.
→#999 to change link hover color and dark scrollbar color.
→#DDD to change light scrollbar color and line color between entries.
→#FFF to change entry background color, title border color, and sidebar links color.
→#000 to change comment link background and bulk font color.
→#AAA to change subtitle color.
→Meddon to change accent font.
→helvetica to change bulk font.
→http://i.imgur.com/KaDUAYs.png to change background image.

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.

Tags: layouts, layouts: s1 generator

Comments

(Comment)

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

nebari

Mar. 21st, 2014 06:24 am (UTC)

This is gorgeous - I'll use it for a couple of my SPN peeps, thank you so much!

(no subject) -

tessisamess - Mar. 21st, 2014 06:26 am (UTC)

nebari - Mar. 21st, 2014 06:30 am (UTC)

cate

Mar. 21st, 2014 06:50 am (UTC)

Gorgeous!

tessisamess - Mar. 21st, 2014 06:51 am (UTC)

theoddfanaticat

Mar. 21st, 2014 07:30 am (UTC)

Oh my goodness, this is the cutest thing ever. o__o. I can't stop mousing over the links. <333 THANK YOU SO MUCH.

tessisamess - Mar. 21st, 2014 07:46 am (UTC)

squidded

Mar. 21st, 2014 12:32 pm (UTC)

Yaaaaaay! ♥♥♥

I have things planned for this! Super cute!

tessisamess - Mar. 21st, 2014 09:19 pm (UTC)

omnombrains

Mar. 21st, 2014 02:40 pm (UTC)

I swear, every single time you post something new, I'm like >_> IS IT REASONABLE TO REDO ALL MY CRITTER JOURNALS? IS THAT A REASONABLE THING?

This is so lovely. Ahh. I can't even.

pastel

Mar. 21st, 2014 05:19 pm (UTC)

Awesome! So clean and love those textures~

afewscrewsloose

Mar. 22nd, 2014 12:29 am (UTC)

HOW DO YOU EVEN DO THIS!

Have my firstborn (seriously, you can have him)! Every freaking time I sit down and think this time you'll make your own pretties you moron and then two days, endless frustrated rants (and hours spent procrastinating on tumblr) later I check your journal and BOOM there's something amazing.

Thank you for helping us mere mortals have pretty journals. You're God.

tessisamess - Mar. 22nd, 2014 12:47 am (UTC)

comperior

Mar. 22nd, 2014 01:21 am (UTC)

This is so cool; using on this journal.

I went a little more rustic red than yellow and changed the calendar to a profile link, but meh, who uses the calendar anyway?

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

comperior - Mar. 22nd, 2014 02:15 am (UTC)

tessisamess - Mar. 22nd, 2014 02:18 am (UTC)

comperior - Mar. 22nd, 2014 12:29 pm (UTC)

dash_dingo

Mar. 23rd, 2014 02:27 am (UTC)

hehdfztjurxttjrkizjdzfgagsdgsrxgsegdz

I'm yoinking this for future use! I just.. need to decide which account I should use it for.

tessisamess - Mar. 23rd, 2014 09:04 am (UTC)

wearestardust

Mar. 23rd, 2014 08:01 am (UTC)

LOVE THIS. I was just going "I need to update my CDJ layout" and did a roster design in gray and yellow and WHAT DO I FIND but a layout that matches.

Will be using this!!

tessisamess - Mar. 23rd, 2014 08:41 am (UTC)

wearestardust - Mar. 23rd, 2014 08:44 am (UTC)

tessisamess - Mar. 23rd, 2014 09:02 am (UTC)

wearestardust - Mar. 23rd, 2014 09:05 am (UTC)

tessisamess - Mar. 23rd, 2014 09:20 am (UTC)

dauntlesscandor

Mar. 23rd, 2014 11:06 pm (UTC)

I love this layout! One question though. I was trying to read through where to change colors and I can't figure out which one to change where it says "title here."

tessisamess - Mar. 24th, 2014 01:07 am (UTC)

dauntlesscandor - Mar. 24th, 2014 01:15 am (UTC)

tessisamess - Mar. 24th, 2014 01:29 am (UTC)

dauntlesscandor - Mar. 24th, 2014 01:31 am (UTC)

dauntlesscandor - Mar. 24th, 2014 05:23 am (UTC)

tessisamess - Mar. 24th, 2014 06:18 am (UTC)

obediente

Mar. 25th, 2014 05:48 am (UTC)

Hey, I'm using this layout (which rules by the way) and I did something and my links aren't spaced all pretty so the icons line up. Any idea what I'm doing wrong?

(It's still gorgeous but would be better)

obediente - Mar. 25th, 2014 06:02 am (UTC)

odoncolin

Apr. 8th, 2014 09:29 pm (UTC)

hey there, had a question on how to change the font for the title here? I was trying to use a font from googlefonts.

tessisamess - May. 29th, 2014 01:54 pm (UTC)

allthethings

May. 1st, 2014 05:35 am (UTC)

Hey Tess!

This is amazing, but I'm wondering: I need to be able to see the date/time things were posted.

Is there a way to put the date back into the list of posts?

tessisamess - May. 29th, 2014 02:06 pm (UTC)

librarianed

May. 30th, 2014 08:21 pm (UTC)

I really like this! Using for a character here!!

ashorashley

Jun. 23rd, 2014 02:45 am (UTC)

Tinkered with it a bit, just the background and with of the entires. Another amazing layout.

tessisamess - Jun. 23rd, 2014 02:50 am (UTC)

s_delphine

Jul. 20th, 2014 01:25 am (UTC)

using it for this girlie right here! I LOVE IT!!!!

badatpretend

Jul. 28th, 2014 09:00 am (UTC)

I normally never post in the comments section but I wanted to post to yours because quite honestly I am in love with this layout and it's perfect for my Thomas Brodie-Sangester charrie, who is a reincarnate of Slightly--a lost boy--from Peter Pan.

Anyway, all that to say just all the yes. And I really love ALL of your layouts, not just this one. You rock!

If you want to see your layout in action on him, just click on my username.

badatpretend - Jul. 28th, 2014 09:03 am (UTC)

charthur

Aug. 16th, 2014 07:35 pm (UTC)

Your layouts make me happy :)

Tweaked and using for this journal, just got one question, if I wanted to make the opaque bit that has the nav menu in it a little darker, how would I do that?

packlessalpha

Nov. 17th, 2014 10:30 pm (UTC)

This may be more trouble than it's worth...and if it is, hah, don't even worry about it XD But is there a way to have icons show up on the journal posts? Like it shows up on the friends page, but I couldn't figure out how to apply that to the journal itself. Or is that just a complicated mess of stuff to change?

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

packlessalpha - Jan. 5th, 2015 08:06 pm (UTC)

tessisamess - Jan. 5th, 2015 08:27 pm (UTC)

packlessalpha - Jan. 5th, 2015 09:39 pm (UTC)

raquelita

Jan. 24th, 2015 07:45 pm (UTC)

this is sooo beautiful! i needed to redo my cdj and this was perfect!

tessisamess - Jan. 24th, 2015 07:58 pm (UTC)

damonsrpg

May. 11th, 2015 01:28 am (UTC)

Used it here!

tessisamess - May. 25th, 2015 06:40 pm (UTC)

susa_no_o

Jun. 12th, 2015 02:44 am (UTC)

Tessssssssssssssssssssssssssss.

What did I do wroooong? Why is there a star on my friend's list at the top of each entry? How do I make it go away? It only shows up on Friends page. Not Recent Entry page!

Thank you! <3 Hima/Caitlin

tessisamess - Jun. 12th, 2015 02:50 am (UTC)

susa_no_o - Jun. 12th, 2015 02:52 am (UTC)

quintinj

Jun. 14th, 2015 06:37 pm (UTC)

Like before, I am

ashorashley, I am using a slightly modified version of this layout. Love it.

erinden

Oct. 27th, 2015 12:35 pm (UTC)

How do I put the links at the top of the layout instead?

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