Tessisamess

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	31

no sidebar image prev |

tess021
yes sidebar image prev |

001: Informative Info

Most minimalist layout I've ever done haha. Fixed nav menu and a fade-in header on pageload. Added a sidebar version for those who like it but also need a sidebar. These two layouts together would be really good together for game use I think, using no-sidebar for the mod journal with a link directory, and the yes-sidebar version for the comms. Enjoy! <3

002: The Layout

NO SIDEBAR

/*-- THROUGH THE ROOF N UNDERGROUND [NO SIDEBAR] - TESSISAMESS - 2015 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* GENERAL CLASSES */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora'), local('Lora-Regular'), url(http://fonts.gstatic.com/s/lora/v9/4vqKRIwnQQGUQQh-PnvdMA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body{color:#444;background:#fff;margin:0;padding:0;font-family:Georgia,serif;overflow-x:hidden;}
blockquote{font-style:italic;padding:5px;background:#eee;}
h1, h2, h3, h4{font-weight:normal;}
a, a:visited, a:active{color:#aaa;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;opacity:0.5;}

@keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}

/* WHOLE PAGE CONTAINERS */

.layout-one-column #alpha{margin:0;}

#container{background:transparent;}

/* HEADER */

#header{height:500px;background:url(HEADERHERE)center top no-repeat fixed;-webkit-box-shadow:inset 0 -100px 100px 0 #fff;
box-shadow:inset 0 -100px 100px 0 #fff;margin:0 -50px;padding:0;animation:fadein 2s linear;-moz-animation:fadein 2s linear;-webkit-animation:fadein 2s linear;-o-animation:fadein 2s linear;}

#nav-above{list-style:none;margin:0;padding:50px 0 0 0;font-size:13px;letter-spacing:2px;font-family:Lora,georgia,serif;text-transform:lowercase;position:fixed;left:10px;top:10px;width:130px;background:url(http://i.imgur.com/KIWa3PN.png)top left no-repeat;background-size:50px;height:0;overflow:hidden;font-family:Lora,georgia,serif;text-transform:uppercase;-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;}
#nav-above:hover{height:200px;}
#nav-above li a{display:block;padding:7px 5px;margin:2px 0;background:#eee;color:#555;}
#nav-above li + li + li + li + li{display:none;}
.banner-viewlinks{display:block;padding:0;border:none;}
.first{border-left:none;}

#header-text{display:none;}

#nav-below{display:none;}

/* BODY OF PAGE */

#pagebody{position:relative;z-index:200;background:#fff;width:800px;margin:-200px auto 0 auto;text-align:justify;border:none;padding:0;} 
#pagebody-inner{padding:20px;}

/* MAIN COLUMN */

#alpha{background:#fff;border:none;padding:0;}

#alpha a, #alpha a:visited{color:#aaa;}

.content-nav{margin:.5em 1em;}

.nav-top{text-align:right;}
.nav-bottom{text-align:right;}
.entrypage{text-align:center;}

#tagpage-header{text-align:center;}

.date-header{display:none;}

#column-footer{clear:both;}

/* ENTRIES */

#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:center;color:#111;}
#sticky-note .entry-footer{display:none;}
#sticky-note .entry-text{padding:0;}

.entry{margin:0 1em 60px 1em;padding:1px;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3, .entry-header h2{margin:0;padding:0;font-size:63px;color:#111;text-align:center;font-family:Lora,georgia,serif;line-height:90%;margin-bottom:5px;text-transform:lowercase;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#111;}
.entry-datetime{font-size:9px;text-align:center;text-transform:uppercase;letter-spacing:6px;color:#aaa;margin-bottom:15px;}

.entry-content{margin:0;}
.entry-text{min-height:100px;overflow:auto;}

.inner-entry-userpic{float:right;text-align:center;padding:0 0 10px 10px;}
.inner-entry-userpic img{border:10px solid #e5e5e5;}
.pic-poster img{display:none;}
.inner-entry-userpic .ljuser{font-size:9px;font-weight:normal;text-transform:uppercase;}

.ljtags{margin:1em 0;font-size:13px;font-family:Lora,georgia,serif;text-transform:lowercase;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#999;}

.entry-linkbar ul{list-style:none;padding-left:0;margin:18px -4px 0 0;font-size:11px;text-align:center;text-transform:uppercase;font-size:10px;letter-spacing:2px;}
.entry-linkbar li{border-left:none;padding:0;margin:3px;}
.entry-linkbar li a{display:inline-block;text-align:center;width:120px;padding:4px 0;background:#fff;border:1px solid #ccc;margin:0;color:#777!important;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;width:0;padding:0;margin:0;}

.outer-entry-userpic, .mid-entry-userpic, .header-poster{display:none;}

/* ARCHIVE VIEW */

.year{list-style:none;}
.year li{display:inline;padding:.5em;}

.yeartable{border-collapse:collapse;border:1px solid #000;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.yeartable td{border:1px solid #000;}

/* MONTH VIEW */

.lj-view-month dl{margin:.5em 1em;}

/* TAG LIST */

.lj-view-tags #alpha{padding:1em;}

/* CONTENT FOOTER */

#content-footer{clear:both;height:10px;}

/* ICON REPLACEMENTS */

.ljuser img[src*="img/userinfo.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/zz4VqnW.png)center left no-repeat!important;padding:16px 0 0 18px!important;margin-bottom:2px!important;opacity:0.7;}
.ljuser img[src*="img/community.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/sxq0iPx.png)center left no-repeat!important;padding:16px 0 0 18px!important;margin-bottom:2px!important;opacity:0.7;}
img[src*="img/icon_protected.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/XV91hZP.png)no-repeat!important;padding:16px 0 0 16px!important;opacity:0.7;}
img[src*="img/icon_private.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/AbDtzdL.png)no-repeat!important;padding:16px 0 0 16px!important;opacity:0.7;}
img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/XV91hZP.png)no-repeat!important;padding:16px 0 0 16px!important;opacity:0.7;}

YES SIDEBAR

/*-- THROUGH THE ROOF N UNDERGROUND [SIDEBAR] - TESSISAMESS - 2015 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

body{color:#444;background:#fff;margin:0;padding:0;font-family:Georgia,serif;overflow-x:hidden;font-size:13px;}
blockquote{font-style:italic;padding:5px;background:#eee;}
h1, h2, h3, h4{font-weight:normal;}
a, a:visited, a:active{color:#aaa;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;opacity:0.5;}

/* WHOLE PAGE CONTAINERS */

.layout-two-column-left{}
.layout-two-column-left #alpha{margin:0 0 0 250px;}
.layout-two-column-left #beta{float:left;width:250px;}

#container{background:transparent;}

/* HEADER */

#header{height:500px;background:url(HEADERHERE)center top no-repeat fixed;background-size:100%;-webkit-box-shadow:inset 0 -100px 100px 0 #fff;
box-shadow:inset 0 -100px 100px 0 #fff;margin:0 -50px;padding:0;animation:fadein 2s linear;-moz-animation:fadein 2s linear;-webkit-animation:fadein 2s linear;-o-animation:fadein 2s linear;}

#header-text{display:none;}

#nav-below{display:none;}

/* BODY OF PAGE */

#pagebody{position:relative;z-index:200;background:#fff;width:800px;margin:-200px auto 0 auto;text-align:justify;border:none;padding:0;} 
#pagebody-inner{padding:20px;}

/* MAIN COLUMN */

#alpha{background:#fff;border:none;padding:0;}

#alpha a, #alpha a:visited{color:#aaa;}

.content-nav{margin:.5em 1em;}

.nav-top{text-align:right;}
.nav-bottom{text-align:right;}
.entrypage{text-align:center;}

#tagpage-header{text-align:center;}

.date-header{display:none;}

#column-footer{clear:both;}

/* ENTRIES */

#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:center;color:#111;}
#sticky-note .entry-footer{display:none;}
#sticky-note .entry-text{padding:0;}

.entry{margin:0 1em 40px 1em;padding:1px;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3, .entry-header h2{margin:0;padding:0;font-size:40px;color:#111;text-align:center;font-family:Lora,georgia,serif;line-height:90%;margin-bottom:5px;text-transform:lowercase;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#111;}
.entry-datetime{font-size:9px;text-align:center;text-transform:uppercase;letter-spacing:6px;color:#aaa;margin-bottom:15px;}

.entry-content{margin:0;}
.entry-text{min-height:100px;overflow:auto;}

.lj-view-recent .inner-entry-userpic{display:none;}
.inner-entry-userpic{float:right;text-align:center;padding:0 0 10px 10px;}
.inner-entry-userpic img{width:65px;height:65px;border:7px solid #e5e5e5;}
.pic-poster img{display:none;}
.inner-entry-userpic .ljuser{font-size:9px;font-weight:normal;text-transform:uppercase;}

.ljtags{margin:1em 0;font-size:11px;font-family:Lora,georgia,serif;text-transform:lowercase;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#999;}

.entry-linkbar ul{list-style:none;padding-left:0;margin:18px -4px 0 0;font-size:11px;text-align:center;text-transform:uppercase;font-size:9px;letter-spacing:1px;}
.entry-linkbar li{border-left:none;padding:0;margin:3px;}
.entry-linkbar li a{display:inline-block;text-align:center;width:85px;padding:4px 0;background:#fff;border:1px solid #ccc;margin:0;color:#777!important;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;width:0;padding:0;margin:0;}

.outer-entry-userpic, .mid-entry-userpic, .header-poster{display:none;}

/* ARCHIVE VIEW */

.year{list-style:none;}
.year li{display:inline;padding:.5em;}

.yeartable{border-collapse:collapse;border:1px solid #000;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.yeartable td{border:1px solid #000;}

/* SIDEBAR(S) */

#beta-inner{font-size:small;color:#777;}

.module{padding:0;background:transparent;margin:0 0 15px 0;border:none;}
.module img{max-width:100%;}

.module-header{background:transparent;border:none;}
.module-header h3{margin:0;padding:0;font-size:28px;color:#111;font-family:Lora,georgia,serif;line-height:90%;margin-bottom:5px;text-transform:lowercase;}
.module-header a, .module-header a:visited{color:#111;}

.module-customtext .module-content{padding:0;}

.module-typelist ul{list-style:none;margin:0;padding:0;}

.module-categories{}
#tag-hierarchy{}
#tag-hierarchy ul{padding-left:0; margin-left:20px;}
#tag-hierarchy li{}
.tag-count{font-size:x-small;}
.all-link{}

.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:0;margin:0;text-align:center;text-transform:lowercase;font-size:16px;font-family:Lora,georgia,serif;}
.module-layoutcredit a{color:#111;}

.module-viewlinks, .module-calendar, .module-pagesummary, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;}

/* MONTH VIEW */

.lj-view-month dl{margin:.5em 1em;}

/* TAG LIST */

.lj-view-tags #alpha{padding:1em;}

/* CONTENT FOOTER */

#content-footer{clear:both;height:10px;}

/* ICON REPLACEMENTS */

003: Directions

→Go to Basics, choose S2, fill in your title and subtitle if desired, then save.
→Go to Look and Feel, choose Complete Style for the layout, then save.
→Go to Custom Options, and choose the following:
[NO SIDEBAR]

→Layout Type: One Column
→Disable customized comment pages for your journal: Yes

→Link text to leave a comment: Comment
→Text used to link to the 'Recent Entries' view: Recent
→Text used to link to the 'Archive' view: Archive
→Text used to link to the 'Friends' view: Friends
→Text used to link to the 'User Information' view: Profile

→Change HEADERHERE to your header image. Must be as wide as you can manage and at least 550px high.
→Custom stylesheet: Input the code above and save

→Please remember to credit me on the profile page since there is no credit block.

[YES SIDEBAR]

→Layout Type: Two column (sidebar on left)
→Disable customized comment pages for your journal: Yes

→Link text to leave a comment: Comment
→Text used to link to the 'Recent Entries' view: Recent
→Text used to link to the 'Archive' view: Archive
→Text used to link to the 'Friends' view: Friends
→Text used to link to the 'User Information' view: Profile

→Body of custom sidebar module: Your gif
→Body of second custom sidebar module: Your blurb
→Person to credit if you have an individually created layout: Layout by Tessisamess
→URL to link the credit to: http://tessisamess.insanejournal.com/
→Reorder in the dropdowns as desired (preview is: custom text 1, links, custom text 2, tags, layout credit.)

→Change HEADERHERE to your header image. Must be as wide as you can manage and at least 550px high.
→Custom stylesheet: Input the code above and save

→Fill out your Links List, if desired.

004: CTRL+F This Shit

→#FFF to change all backgrounds.
→#444 to change bulk text.
→#aaa to change link color.
→#111 to change entry and module header color.
→#eee to change nav menu link backgrounds; blockquote background.
→#555 to change nav menu links.
→#e5e5e5 to change userpic background.
→#999 to change entry tags link color.
→#ccc to change entry links border.
→#777 to change entry links color.

→font-family:Lora,georgia,sans-serif; to change entry and module header font.
→font-family:georgia,sans-serif; to change bulk font.
→800px to change content width.
→http://i.imgur.com/KIWa3PN.png to change nav menu icon. Light version (for darker recolors) is here: http://i.imgur.com/vjhmFsA.png
→Delete .lj-view-recent .inner-entry-userpic{display:none;} from the sidebar version to get userpics on the main page.
→Add .lj-view-recent .inner-entry-userpic{display:none;} to the no sidebar version to remove userpics from the main page.

005: Rules and Shit

→Credit me in your profile if removing it from the layout.
→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: s2 complete style

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

Layout: Through the Roof N Underground