tesscodes | Layout: Botanique

Information

It's gonna be a busy, busy month, so the theme for March is going to be simplicity! Stripped down layouts without a bunch of bells and whistles so that I can ensure that I have time to both move and still post fun content! To add some balance, April's theme is actually going to be the opposite, so if you're dying for more sliding and popup info modules in your layouts, you're gonna love next month's lineup!

That said, today we have a blushing one column layout with image accents and a custom non-Google font! It should be pretty easy to replace the banner and userpic backgrounds, but make sure you change the padding on .inner-entry-userpic if your icon is sitting funny over its background. Next month I may make extra background options for this layout, so let me know if you'd like that so I know if it's worth the time to make them!

This layout has no sidebar, so make sure to stick credit in your profile page instead! Enjoy! ♥

Layout Coding

/*-- BOTANIQUE - TESSISAMESS - 2018 --*/
/*-- 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:Rollfast;src:url(https://dl.dropbox.com/s/h1h1ahsta8smjg0/Rollfast-Regular.otf);}

@font-face{font-family:'Lato';font-style:normal;font-weight:400;src:local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;}

body{margin:0;padding:0;background:#FFFBF9;font-family:Lato,helvetica,arial,sans-serif;font-size:15px;color:#111;}
blockquote{font-style:italic;background:#F2EAE4;border-left:6px solid #E2DED5;padding:10px;}
h1,h2,h3,h4,h5,h6{font-family:Rollfast,palatino linotype,serif;font-weight:normal;margin:0;color:#D0AB9C;}
a, a:visited, a:active{color:#D0AB9C;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;color:#A3867A;}

/* WHOLE PAGE CONTAINERS */

#container{background:transparent;width:750px;margin:0 auto;}
.layout-one-column #alpha{margin:0;}

/* HEADER */

#header{padding:50px 0;color:#111;}
#banner-inner{height:350px;background:transparent url(https://i.imgur.com/zNsVVUw.png)center no-repeat;background-size:auto 100%;display:flex;align-items:center;justify-content:center;}

#nav-above{position:absolute;top:0;right:20px;list-style:none;margin:0;padding:0;font-size:9px;font-weight:bold;text-transform:uppercase;letter-spacing:2px;background:#F2EAE4;}
#nav-below{display:none;}

#nav-above li:last-of-type{display:none;}
#nav-above a{display:inline-block;padding:5px 10px;color:#999;}
#nav-above a:hover{background:#E2DED5;}
.banner-viewlinks{display:inline;padding:0;border:none;}
.current a{color:#999;}

#header-text{background:transparent;border:none;margin:0;padding:0;}
#banner-header{font-family:Rollfast,palatino linotype,serif;text-align:center;margin:0 0 10px 0;font-size:48px;}
#banner-description{font-family:Lato,helvetica,arial,sans-serif;text-align:center;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:3px;margin:0;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;padding:0;}
#alpha a, #alpha a:visited{color:#D0AB9C;}
#alpha a:hover{color:#A3867A;}

.content-nav{margin:30px 0;font-family:Rollfast,palatino linotype,serif;font-size:24px;}
.nav-top{display:none;}
.nav-bottom{text-align:center;}
.entrypage{text-align:center;}

#tagpage-header{text-align:center;}
#tagpage-header h2{font-size:30px;}

.date-header{display:none;}

#column-footer{clear:both;}

/* STICKY NOTE */

#sticky-note .entry{background:#F2EAE4;}
#sticky-note .entry-inner{border:none;}

#sticky-note .entry-header{text-align:center;color:#D0AB9C;}
#sticky-note .entry-header h2{margin:0;padding:0;font-size:30px;}

#sticky-note .entry-text{min-height:0;padding:0;}

#sticky-note .entry-footer{display:none;}

/* ENTRIES */

.entry{margin:0 0 40px 0;padding:40px;border:1px solid #E2DED5;position:relative;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3{margin:0;padding:0;font-size:30px;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#D0AB9C;}

.entry-datetime{color:#999;font-size:9px;font-weight:bold;text-transform:uppercase;letter-spacing:2px;position:absolute;bottom:49px;left:40px;}
.lj-view-day .entry-datetime{display:none;}

.inner-entry-userpic{position:absolute;top:0;left:-95px;text-align:center;background:url(https://i.imgur.com/rzarlsr.png)center top no-repeat;padding:28px 35px 0 39px;background-size:120px;}
.inner-entry-userpic img{width:65px;height:65px;border-radius:65px;margin-bottom:30px;}
.outer-entry-userpic, .mid-entry-userpic{display:none;}

.pic-poster:before{content:'';display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #F2EAE4;margin:-10px auto 5px auto;}
.pic-poster{left:26px;position:absolute;background:#F2EAE4;margin-top:-30px;padding:5px;text-align:center;line-height:1;font-size:9px;letter-spacing:1px;text-transform:uppercase;display:block;width:85px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);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;}
.inner-entry-userpic:hover .pic-poster{opacity:1;margin-top:9px;}
.pic-poster img{display:none;}

.ljuser{font-size:9px;font-weight:bold;text-transform:uppercase;letter-spacing:2px;}

.entry-content{margin-top:15px;}
.entry-text{min-height:80px;overflow:auto;text-align:justify;line-height:150%;}
.entry-text img{max-width:100%;}

.ljtags{margin:20px 0 0 0;font-size:9px;font-weight:bold;text-transform:uppercase;letter-spacing:2px;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#999;}

.entry-metadata{display:none;}

.entry-linkbar{margin:20px 0 0 0;padding:10px 0 0 0;border-top:1px solid #F2EAE4;font-size:9px;font-weight:bold;text-transform:uppercase;letter-spacing:2px;text-align:right;}
.entry-linkbar ul{list-style:none;padding-left:0;margin-left:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;}
.entry-linkbar li a{padding-left:;}
.entry-linkbar li a:before{content:' / ';color:#111;}
.entry-linkbar li:first-of-type a:before{content:'';}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;}

/* ARCHIVE VIEW */

.yearlinks{text-align:center;font-family:Rollfast,palatino linotype,serif;margin-bottom:10px;font-size:40px;}
.year{list-style:none;margin:0;padding:0;}
.year li{display:inline;padding:0;}

.lj-view-archive .entry-content{margin:0;}
.yeartable{border-collapse:collapse;border:4px solid transparent;width:100%;}
td.monthlable, td.viewmonth{font-family:Rollfast,palatino linotype,serif;background:transparent!important;font-size:22px;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.dayname{font-family:Rollfast,palatino linotype,serif;text-align:center;background:#D0AB9C!important;color:#fffbf9;font-size:22px;}
.yeartable td{border:3px solid #fffbf9!important;background:rgba(0,0,0,0.03);padding:5px;}

/* TAGS & MONTH VIEW */

.lj-view-tags #alpha h2{font-size:30px;}
.lj-view-tags #alpha, .lj-view-month #alpha{padding:40px;border:1px solid #E2DED5;}

.ljtaglist{margin:0;padding:0;list-style:none;}
.ljtaglist li{margin-top:5px;}

/* CONTENT FOOTER */

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

/* TINYICONS */

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

.entry-header img{margin-bottom:0;}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle 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
♡ Disable customized comment pages for your journal: Yes
♡ Link text to leave a comment: Comment
♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired.
♡ 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!

FONTS

Lato - Page text
Rollfast - Header text

IMAGES

https://i.imgur.com/zNsVVUw.png - Header background
https://i.imgur.com/rzarlsr.png - Userpic background
https://i.imgur.com/6u8OR2r.png - User and lock icons

COLORS

#fffbf9 Page backgrounds and dayname text on calendar

#f2eae4 background for top nav, sticky note, userpic hover info, and blockquote

#e2ded5 Entry and blockquote border, top nav hover background

#d0ab9c Headings and links color, dayname background

#a3867a Link hover color

#999 Top nav links, entry date and tags

#111 Page text

0,0,0 Box shadow on userpic hover info

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!