Tessisamess - Layout: High Contrast

image preview |

Information

Hey guys! I've got a fun layout for you today, set to the tone of high contrast minimalism, with a few unobtrusive but unique features! High Contrast features rotated sidehand dates capped with userpics, a custom non-Google font, and a lot of personality with very little clutter.

Additionally, I've coded this layout to support both sidebar versions, AND one column (no sidebar), which makes it pretty versitile too! Don't enjoy stark white or pages without backgrounds? No problem! You can easily add in either a page background, header background, or both! Enjoy! ♥

Layout Coding

/*-- HIGH CONTRAST - TESSISAMESS - 2017 --*/
/*-- 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:'Raleway';font-style:normal;font-weight:400;src:local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v11/0dTEPzkLWceF7z0koJaX1A.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;}
@font-face{font-family:Antro;src:url(https://dl.dropbox.com/s/2gbxrwiso82gsii/Antro_Vectra.otf);}

body{color:#333;background:#fff url(OPTIONALPAGEBACKGROUND)center no-repeat fixed;background-size:cover;margin:0;padding:0;font-family:Raleway,helvetica,arial,sans-serif;font-size:15px;}
blockquote{font-style:normal;border-left:5px solid #000;padding-left:10px;}
h1, h2, h3, h4{color:#000;font-family:Antro,georgia,serif;padding:0;margin:0;}
a, a:visited, a:active{color:#555;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 #alpha{margin:0 0 0 440px;}
.layout-two-column-left #beta{float:left;width:350px;}

.layout-two-column-right #alpha{margin:0 440px 0 0;}
.layout-two-column-right #beta{float:right;width:350px;}

.layout-one-column #alpha{margin:0 auto;width:70%;max-width:1200px;min-width:800px;}

#container{background:transparent;}

/* HEADER */

#header{padding:0;color:#000;background:url(OPTIONALHEADERBACKGROUND)center no-repeat fixed;background-size:cover;}

#nav-above{list-style:none;margin:0;padding:0;font-size:10px;background:#000;text-align:center;text-transform:uppercase;letter-spacing:2px;position:absolute;left:0;right:0;top:271px;}
.banner-viewlinks{display:inline;padding:0;border:none;}
.banner-viewlinks a{display:inline-block;padding:12px 25px;margin:0 30px;color:#fff;}
.current a{color:#fff;}

#header-text{background:transparent;border:none;margin:0;padding:0;text-align:center;padding:130px 0 100px 0;line-height:100%;}
#header-text a{color:#000;}
#banner-header{font-size:53px;font-family:Antro,georgia,serif;}
#banner-description{font-size:11px;font-family:Raleway,helvetica,arial,sans-serif;text-transform:uppercase;letter-spacing:3px;}

#nav-below{display:none;}

/* BODY OF PAGE */

#pagebody{width:65%;margin:140px auto 0 auto;min-width:700px;}

@media only screen and (max-width:950px){
#pagebody{width:90%;}
.layout-two-column-left #alpha{margin:0 0 0 340px;}
.layout-two-column-left #beta{float:left;width:250px;}
.layout-two-column-right #alpha{margin:0 340px 0 0;}
.layout-two-column-right #beta{float:right;width:250px;}
.banner-viewlinks a{padding:12px 15px;margin:0 15px;}
}

/* MAIN COLUMN */

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

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

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

.nav-top{display:none;}
.nav-bottom{text-align:center;text-transform:uppercase;font-size:11px;letter-spacing:2px;font-weight:bold;}
.entrypage{text-align:center;}

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

.date-header{display:none;}

#column-footer{clear:both;}

/* ENTRIES */

#sticky-note .entry{background:#000;color:#bbb;padding:30px;}
#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:center;padding:0;}
#sticky-note .entry-header h2{color:#fff;}
#sticky-note .entry-footer{display:none;}
#sticky-note .entry-text{padding:0;}

.entry{margin:0 0 80px 0;padding:0;position:relative;}

.entry-header{background:transparent;border:none;padding:0 0 0 10px;}
.entry-header h3, .entry-header h2{margin:0;padding:0;font-size:28px;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#000;}
.entry-datetime{font-size:10px;letter-spacing:2px;text-align:right;text-transform:uppercase;color:#999;-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);position:absolute;position:absolute;left:-110px;top:130px;height:20px;}
.lj-view-day .entry-datetime{display:none;}

.entry-content{margin-top:0;}
.entry-text{min-height:170px;overflow:auto;line-height:160%;text-align:justify;}
.entry-text a{font-weight:bold;color:#000!important;}
.entry-text a:hover{opacity:1;background:#000;color:#fff!important;}

.inner-entry-userpic{float:right;text-align:right;padding:0;position:absolute;top:0;left:-47px;}
.inner-entry-userpic img{width:40px;height:40px;border-radius:40px;}
.pic-poster{font-size:8px;text-transform:uppercase;line-height:110%;display:block;padding:12px 0 12px 0;top:0;left:-89px;position:absolute;width:80px;}
.pic-poster img{display:none;}

.entry-metadata{display:none;}
.ljtags{margin:25px 0;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#000;font-weight:bold;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#999!important;font-weight:normal;}
#alpha .ljtags a:hover{opacity:0.5;background:transparent;color:#999;}

.entry-linkbar{font-size:small;}
.entry-linkbar ul{list-style:none;padding:0;margin:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;} 
.entry-linkbar li a{display:inline-block;margin:0 15px 0 0;}

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

/* SIDEBAR */

#beta-inner{font-size:15px;color:#333;line-height:160%;}

.module{padding:20px;background:transparent;margin:0 0 30px 0;border:none;}

.module-header{background:transparent;border:none;}
.module-header h3{margin:0;padding:0;font-size:25px;}
.module-header a, .module-header a:visited{color:#000;}

.module-customtext img{width:90%;border-radius:500px;margin-bottom:20px;}
.module-customtext .module-content{padding:0;text-align:center;font-style:italic;}
.module-customtext2{text-align:justify;}

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

.module-calendar .module-content{text-align:center;}
.module-calendar table{border:none;font-size:small;margin-right:auto;margin-left:auto;margin-top:10px;width:100%;}
.module-calendar td{border:3px solid transparent;background:#eee;padding:5px;margin:5px;position:relative;}
.module-calendar td a{position:absolute;left:0;right:0;top:0;bottom:0;background:#000;padding:5px;color:#fff;}
.module-calendar th{color:#000;font-weight:bold;}

#tag-hierarchy ul{padding-left:0;margin-left:0;}
#tag-hierarchy li{font-weight:bold;list-style:none;}
#tag-hierarchy li li{font-weight:normal;list-style:circle;margin-left:20px;}
.tag-count{font-size:x-small;opacity:0.7;}
.all-link p{padding:5px 0 0 0;text-align:center;text-transform:uppercase;letter-spacing:1px;font-size:9px;}
.all-link a{display:block;margin:0 auto;width:110px;padding:4px 10px;background:#000;color:#fff;}

.module-typelist ul, .module-pagesummary ul{margin:0;padding:0;list-style:none;}
.module-typelist a, .module-pagesummary a{border-left:0 solid transparent;padding-left:0;}
.module-typelist a:hover, .module-pagesummary a:hover{border-left:8px solid #000;opacity:1;padding-left:5px;}

.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:0;margin:0;text-align:center;font-family:Antro,georgia,serif;font-size:22px;font-weight:bold;}

#tag-cloud, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;}

/* CONTENT FOOTER */

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

/* ICON REPLACEMENTS */

img[src*="img/userinfo.gif"], img[src*="img/icon_private.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/YlofFIe.png)center left no-repeat!important;padding:16px 0 0 18px!important;margin-bottom:3px!important;}

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

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle, then save.
♡ Fill in your links list if desired, then save.
♡ Go to Look and Feel, choose Complete Style, then save.
♡ Go to Custom Options and choose the following options:

♡ Layout Type: One column, Left sidebar, or Right sidebar!
♡ Disable customized comment pages for your journal: Yes
♡ Navlink titles: Recent, Archive, Friends, Profile
♡ Link text to leave a comment: Comment
♡ Fill in sticky note if desired.
♡ Display of tags in sidebar: List
♡ Show tag count in hierarchical list? Yes/No
♡ Order your sidebar as desired! If you want your first blurb to look the way the demo does, just add your image and some text under it! No title needed.
♡ Person to credit if you have an individually created layout: Layout by Tessisamess
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Custom stylesheet: Input the CSS provided and save!

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

PLACEHOLDER VALUES

OPTIONALPAGEBACKGROUND - Page background; leave as is for white
OPTIONALHEADERBACKGROUND - Header background; leave as is for white

FONTS

Raleway - Page text
Antro - Header text

COLORS

#fff - Page background, nav links, sticky title, entry link hover text, view all link, calendar post
#eee - Calendar days
#bbb - Sticky note text
#999 - Entry date and tags
#555 - Page links
#333 - Bulk text color
#000 - Entry links, entry link hover background, calendar post background, headings, blockquote border, nav background, sticky note background, view all link background

IMAGES

http://i.imgur.com/YlofFIe.png - User and Private icon
http://i.imgur.com/XnO8SxL.png - Community and Locked icon

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Tags: layouts, layouts: s2 complete style

Comments

(Comment)

galleon

Sep. 26th, 2017 09:36 pm (UTC)

tessisamess

Sep. 26th, 2017 10:03 pm (UTC)

marlovian

Sep. 27th, 2017 11:26 am (UTC)

The media query adjustments. Holy hell. They are things of fuckin' beauty.

Oct. 11th, 2017 10:43 pm (UTC)

YEA YEA YEA WHATEVER (thank yooou ♥ I've been meaning to start defaulting them into my layouts for like ever now and I'm finally getting into the habit lmao.)