tesscodes | Layout: Pointedly

image prev |

001: Informative Info

Aaaaaaand a layout to match my last two codes! Features a two-blurb sidebar with links list and custom navigation, color pops, and lots of icons! See matching cast/other list code here and info page code here. Enjoy! <3

002: The Layout

/*-- POINTEDLY - 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:'Cabin';font-style:normal;font-weight:400;src:local('Cabin Regular'), local('Cabin-Regular'), url(https://fonts.gstatic.com/s/cabin/v7/yQOMOX5hR0-6LTD879t-PQ.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;}
@font-face{font-family:'Cabin';font-style:normal;font-weight:600;src:local('Cabin SemiBold'), local('Cabin-SemiBold'), url(https://fonts.gstatic.com/s/cabin/v7/pOvYyCQeTTtw6RxdlpulSvesZW2xOQ-xsNqO47m55DA.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;}
@font-face{font-family:'Cabin';font-style:italic;font-weight:400;src:local('Cabin Italic'), local('Cabin-Italic'), url(https://fonts.gstatic.com/s/cabin/v7/00o5zQ7GoPVPMQsCfDCAnw.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;}
@font-face{font-family:'Cabin';font-style:italic;font-weight:600;src:local('Cabin SemiBold Italic'), local('Cabin-SemiBoldItalic'), url(https://fonts.gstatic.com/s/cabin/v7/Sn-0zpaF2c3wYt9xdgoYFfk_vArhqVIZ0nv9q090hN8.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:#555;background:#eee url(http://i.imgur.com/bQSo31w.jpg)center repeat-y fixed;background-size:cover;margin:40px 0;padding:0;font-family:Cabin,helvetica,arial,sans-serif;font-size:15px;}
blockquote{font-style:italic;}
h1, h2, h3, h4{margin:0;padding:0;font-family:Cabin,helvetica,arial,sans-serif;}
a, a:visited, a:active{color:#008B8B;text-decoration:none;}
a:hover{text-decoration:none;color:#bbb!important;}

/* WHOLE PAGE CONTAINERS */

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

.lj-view-friends #alpha{margin:0 87px 0 370px;}
.lj-view-friends #container{max-width:1100px;}

#container{background:transparent;width:80%;min-width:950px;max-width:1000px;margin:0 auto;}

/* HEADER */

#header{display:none;}

/* MAIN COLUMN */

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

#alpha a, #alpha a:visited{color:#008B8B;}

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

.nav-top{display:none;}
.nav-bottom{text-align:right;font-weight:bold;font-size:19px;}
.entrypage{text-align:center;}

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

.date-header{display:none;}

#column-footer{clear:both;}

/* ENTRIES */

#sticky-note{}
#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:left;color:#fff;background:#008B8B url(http://i.imgur.com/OWbNint.png)center left no-repeat;background-size:24px;padding:8px 15px 8px 40px;background-position:8px center;}
#sticky-note .entry-footer, #sticky-note .entry-body:after{display:none;}
#sticky-note .entry-text{padding:0;}

.entry{margin:0 0 20px 0;background:#fff;padding:0;text-align:justify;line-height:140%;border:1px solid #bbb;-webkit-box-shadow:1px 1px 5px 0 rgba(0,0,0,0.2);box-shadow:1px 1px 5px 0 rgba(0,0,0,0.2);position:relative;}
.entry img{max-width:100%;}

.entry-header{background:transparent;border:none;padding:15px 15px 0 15px;}
.entry-header h3, .entry-header h2{margin:0;padding:0;font-size:19px;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#008B8B;}
.entry-datetime{font-size:11px;text-transform:uppercase;color:#bbb;padding:0 15px;letter-spacing:3px;}

.entry-content{margin:0;}
.entry-body{padding:15px;}
.entry-body:after{content:'';display:block;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:14px solid #fff;left:20px;bottom:25px;position:absolute;z-index:100;}
.entry-text{min-height:100px;overflow:auto;}

.lj-view-recent .inner-entry-userpic, .lj-view-day .inner-entry-userpic{display:none;}
.inner-entry-userpic:before{content:'';display:block;width:0;height:0;border-bottom:12px solid transparent;border-top:12px solid transparent;border-right:12px solid #008B8B;margin-left:-17px;margin-bottom:-35px;margin-top:10px;position:relative;z-index:100;}
.inner-entry-userpic{position:absolute;top:0;right:-88px;text-align:center;background:#008B8B;padding:5px;font-size:9px;text-transform:uppercase;line-height:100%;}
.inner-entry-userpic img{width:77px;height:77px;margin-bottom:3px;}
.pic-poster img{display:none;}
.inner-entry-userpic .ljuser a{color:#fff!important;}

.entry-metadata{}
.ljtags{margin:10px 0 0 0;font-size:11px;text-transform:uppercase;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#888;}

.entry-linkbar{font-size:10px;text-transform:uppercase;background:#ddd;padding:8px;text-align:right;}
.entry-linkbar ul{list-style:none;padding:0;margin:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;} 
li.first-el{border-left:none;padding-left:0;}
.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;}
.entry-linkbar li a{display:inline-block;width:102px;border:1px solid #bbb;background:#eee;text-align:center;margin:0 5px;}

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

/* ARCHIVE VIEW */

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

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

/* TAG LIST */

.ljtaglist{}
.lj-view-tags #alpha{padding:15px;background:#fff;border:1px solid #bbb;-webkit-box-shadow:1px 1px 5px 0 rgba(0,0,0,0.2);box-shadow:1px 1px 5px 0 rgba(0,0,0,0.2);}

/* SIDEBAR(S) */

#beta{}
#beta-inner{font-size:14px;color:#555;}

.module{padding:0;background:#fff;margin:0 0 20px 0;text-align:justify;line-height:140%;border:1px solid #bbb;-webkit-box-shadow:1px 1px 5px 0 rgba(0,0,0,0.2);box-shadow:1px 1px 5px 0 rgba(0,0,0,0.2);}

.module-header{background:#008B8B;border:none;color:#fff;padding:8px 15px;}
.module-header h3{margin:0;padding:0;font-size:19px;}
.module-header a, .module-header a:visited{color:#fff;}

.module-customtext{padding-top:157px;background:#ddd url(GIFURL)top center no-repeat;background-size:100%;border-radius:10px;}
.module-customtext .module-content{padding:0;}
.arrow{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid #fff;margin-left:15px;position:relative;z-index:100;}
.module-customtext span{display:block;background:#fff;padding:12px;border-radius:0 0 10px 10px;}
.module-customtext b{color:#008B8B;font-size:19px;}
.nav{text-align:center;border-top:1px solid #bbb;margin-top:5px;padding-top:5px;}
.nav a img{margin:0 20px;}
.nav a{opacity:0.6;}
.nav a:hover{opacity:0.8;}

.module-customtext2 .module-header{background:#008B8B url(http://i.imgur.com/0yNdXJ8.png)center left no-repeat;background-size:26px;padding:8px 15px 8px 40px;background-position:8px center;}
.module-customtext2 .module-content{padding:15px;}

.module-typelist .module-header{background:#008B8B url(http://i.imgur.com/ETBWscD.png)center left no-repeat;background-size:26px;padding:8px 15px 8px 40px;background-position:8px center;}
.module-typelist ul{list-style:none;margin:2px 0 0 0;padding:0;}
.module-typelist li{margin:0;padding:0;}
.module-typelist a{display:block;padding:8px 15px;border-bottom:1px solid #bbb;}
.module-typelist a:hover{background:#008B8B;color:#fff!important;}

.module-layoutcredit{background:transparent;margin:0;text-align:center;border:none;-webkit-box-shadow:none;box-shadow:none;line-height:100%;text-transform:uppercase;letter-spacing:5px;font-size:10px;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit. module-content{padding:0;}
.module-layoutcredit p{padding:0;margin:0;}
.module-layoutcredit a{color:#888;}

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

/* CONTENT FOOTER */

#content-footer{clear:both;height:0;}

/* ICON REPLACEMENTS */

img[src*="img/userinfo.gif"], .ljuser img[src*="img/userinfo.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/K2ObPb6.png) no-repeat!important;padding:16px 0 0 18px!important;opacity:0.6;margin-bottom:2px;}
img[src*="img/community.gif"], .ljuser img[src*="img/community.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/haRbY5b.png) no-repeat!important;padding:16px 0 0 18px!important;opacity:0.6;margin-bottom:2px;}
img[src*="img/icon_protected.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/2mZsPNe.png) no-repeat!important;padding:24px 0 0 24px!important;opacity:0.6;}
img[src*="img/icon_private.gif"]{width:0!important;height:0!important;background:transparent url(http://i.imgur.com/Xc6GeCX.png) no-repeat!important;padding:24px 0 0 24px!important;opacity:0.6;}

003: Directions

→Go to Basics, choose S2, fill in your title and subtitle if desired, then save.
→Go to Links List, fill in your links if desired, then save (remember to use the first link title with no URL for your link module title.)
→Go to Look and Feel, choose Complete Style for the layout, then save.
→Go to Custom Options, and choose the following:

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

→Link text to leave a comment: Comment

→Fill in sticky note and title if desired.

→Body of custom sidebar module: <div class="arrow"></div><span><b>Character Name</b>
YOUR INFO HERE<div class="nav"><a href="/"><img src="http://i.imgur.com/9SIFfsP.png"></a><a href="/profile"><img src="http://i.imgur.com/vqDD093.png"></a><a href="/friends"><img src="http://i.imgur.com/pnECWf2.png"></a><a href="/calendar"><img src="http://i.imgur.com/cSlo09c.png"></a><a href="/tag"><img src="http://i.imgur.com/4vwEmNm.png"></a></div></span>

→Body of second custom sidebar module: Your secondary blurb

→Person to credit if you have an individually created layout: © Layout by Tessisamess
→URL to link the credit to: http://tessisamess.insanejournal.com/

→Sidebar Ordering: Custom text, custom text two, links, layout credit, (none) OR default is fine if you haven't edited these dropdowns previously

→Custom stylesheet: Input the code above and save; make sure to replace GIFURL in the CSS with your gif

004: CTRL+F This Shit

→#fff to change entry and sidebar block background.
→#eee to change page and entry link backgrounds.
→#ddd to change the entry footer background color.
→#bbb to change the borders, link hover color.
→#008B8B to change the teal accent font.
→#888 to change credit and tags link color.
→#555 to change page font color.
→0, 0, 0 to change the box shadow color.

→http://i.imgur.com/OWbNint.png to change sticky note icon.
→http://i.imgur.com/0yNdXJ8.png to change blurb icon.
→http://i.imgur.com/ETBWscD.png to change navigation icon.
You can find the full icon set used here.

→Cabin,helvetica,arial,sans-serif to change font family. (This is the only font on the page. To change just the headers, change the duplicate font I've placed in h1, h2, h3, h4 for you. This will change the entry and sidebar headers.)
→http://i.imgur.com/bQSo31w.jpg to change the background pattern.

005: Rules and Shit

→Please put my credit in its designated spot.
→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.