tesscodes | Layout: Iconic (Reply)

Two Column (Sidebar on Left) | Two Column (Sidebar on Right) |

Information

Hey guys! I really wanted to make another layout for icon makers, so this time we've got a grid-aesthetic minimalist design with directory options to change how many entries per column and how many icons per entry you'd like to display. The columns are fluid and will collapse automatically, so you don't need to worry about them squishing on smaller screens. Enjoy! 💖

Layout Coding

/*-- ICONIC - TESSISAMESS - 2022 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*--

Find more fun stuff at:
	tessisamess.insanejournal.com
	tesscodes.dreamwidth.org
	patreon.com/tessisamess

--*/

/* REPLACEMENTS */

:root{
/* COLORS */
	--headings-color: #111;
	--text-color: #222;
	--date-tags: #999;
	--lightest: #fff;

--page-bg: #fff;
	--content-bg: #fff;
	--borders: #D8E3E0;
	--accent: #298E78;

/* FONTS */
	--main-font: Open Sans,calibri,arial,sans-serif;
	--headings: Raleway;
	--title-font: Raleway;

--body-text: 12px;

--title-text: 20px;
	--subtitle-text: 11px;
	--nav-text: 11px;

--side-text: 12px;
	--side-titles: 19px;

--entry-titles: 19px;
	--entry-info: 10px;

--set-titles: 20px;
	--set-info: 11px;

/* DIMENSIONS */
	--header-height: 50px;

--entries-per-row: 3;
	--entry-spacing: 0;

--side-width: 250px;
	--side-padding: 20px;

--margin: 1px;
	--padding: 30px;
	--entry-icon: 60px;

/* DISPLAY */
	--tags-title-display: block; /* block OR none */
	--tags-title: 'Categories';

--entry-title-display: block; /* block OR none */
	--entry-date-display: block; /* block OR none */
	--entry-tags-display: block; /* block OR none */

--set-icons-per-row: 4;

/* IMAGES */
	--private: url(https://i.imgur.com/dJgLxi8.png)center left no-repeat!important;
	--locked: url(https://i.imgur.com/tIooCJT.png)center left no-repeat!important;
	--customs: url(https://i.imgur.com/LcxM0s0.png)center left no-repeat!important;
}

/* FONTS */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVuEorCIPrE.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* GENERAL */

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

*, *:before, *:after{box-sizing:border-box;}
body{margin:0;padding:0;background:var(--page-bg);font-family:var(--headings);font-size:var(--body-text);color:var(--text-color);}

blockquote{font-style:normal;padding:15px;border:1px solid var(--borders);margin-left:25px;margin-right:25px;}
h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;text-transform:uppercase;letter-spacing:1px;}
img{max-width:100%;}
ul{list-style:circle;}
hr{border:none;border-top:1px solid var(--borders);}
summary{cursor:pointer;}
summary:focus{outline:none;}

a, a:visited, a:active{color:var(--headings-color);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:var(--accent);text-decoration:none;}

.ljuser{font-weight:bold;}
.ljuser a[href*="profile"] img{display:none;}
.ljuser a[href*="profile"]:before{content:'@';}
.ljuser a[href*="asylum"][href*="profile"]:before{content:'#';}

/* WHOLE PAGE CONTAINERS */

#container{background:transparent;padding:var(--margin);}
#container-inner{max-width:var(--content-width);margin:0 auto;}

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

.layout-two-column-left #alpha{margin:0 0 0 calc(var(--side-width) + var(--margin));}
.layout-two-column-left #beta{float:left;width:var(--side-width);}

.layout-two-column-right #alpha{margin:0;}
.layout-two-column-right #beta{float:none;width:auto;}

/* HEADER */

#header{position:sticky;top:0;z-index:3;background:var(--content-bg);padding:0;color:var(--headings-color);border-bottom:1px solid var(--borders);text-transform:uppercase;}

#banner-text{height:var(--header-height);padding:0 calc(var(--header-height) / 2);display:flex;align-items:center;}
.layout-two-column-left #banner-text{justify-content:space-between;flex-direction:row-reverse;}

#nav-above{list-style:none;margin:0;padding:0;font-size:var(--nav-text);}
#nav-below{display:none;}
.banner-viewlinks{display:inline;padding:0;border:none;}
.banner-viewlinks:last-of-type{display:none;}

#nav-above a{margin-left:10px;}
.current a{color:var(--headings-color);}

.layout-two-column-right #nav-above{display:none;}

#header-text{display:flex;align-items:center;background:transparent;border:none;margin:0;padding:0;}
#banner-header{font-family:var(--title-font);text-align:center;font-size:var(--title-text);}
#banner-description{font-family:var(--headings);text-align:center;font-size:var(--subtitle-text);margin:0 0 0 10px;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;border-left:1px solid var(--borders);padding:0;}
.lj-view-recent #alpha-inner{-webkit-column-count:var(--entries-per-row);-moz-column-count:var(--entries-per-row);column-count:var(--entries-per-row);-webkit-column-gap:var(--entry-spacing);-moz-column-gap:var(--entry-spacing);column-gap:var(--entry-spacing);-webkit-column-width:calc((100px * var(--set-icons-per-row)) + (1px * var(--set-icons-per-row)) + (var(--padding) * 2));-moz-column-width:calc((100px * var(--set-icons-per-row)) + (1px * var(--set-icons-per-row)) + (var(--padding) * 2));column-width:calc((100px * var(--set-icons-per-row)) + (1px * var(--set-icons-per-row)) + (var(--padding) * 2));}

#alpha a, #alpha a:visited{color:var(--accent);}
#alpha a:hover{color:var(--date-tags);}

.content-nav{margin:var(--margin) 0 0 0;}
.nav-top{display:none;}
.nav-bottom, .entrypage{text-align:center;}

#tagpage-header{text-align:center;}
#tagpage-header h2{margin-bottom:var(--margin);}

.date-header{display:none;}

#column-footer{clear:both;}

/* STICKY NOTE */

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

#sticky-note .entry-header{text-align:center;color:var(--headings-color);}
#sticky-note .entry-header h2{margin:0 0 10px 0;padding:0;font-size:var(--entry-titles);}

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

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

/* ENTRIES */

.entry{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;margin:0 0 0 -1px;padding:var(--padding);background:var(--content-bg);border:1px solid var(--borders);border-top:0;position:relative;}

.entry-header{background:transparent;border:none;padding:0;display:var(--entry-title-display);}
.entry-header h3{margin:0 0 10px 0;padding:0;font-size:var(--entry-titles);}
#alpha .entry-header a, #alpha .entry-header a:visited{color:var(--headings-color);}

.lj-view-day .entry-datetime{display:none;}
.entry-datetime{position:absolute;top:var(--padding);right:var(--padding);font-size:var(--entry-info);color:var(--date-tags);text-transform:uppercase;letter-spacing:1px;display:var(--entry-date-display);}

.inner-entry-userpic{display:none;float:right;text-align:center;padding:.5em 0 .5em 1em;}
.lj-view-friends .inner-entry-userpic{display:block;}
.inner-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);}
.outer-entry-userpic, .mid-entry-userpic{display:none;}

.pic-poster{text-align:center;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:block;}
.pic-poster img{display:none;}
.pic-poster a[href*="profile"]{display:none;}

.entry-content{margin:0}
.entry-text{min-height:0;overflow:hidden;font-family:var(--main-font);line-height:1.6;text-align:justify;}

.ljtags{margin:5px 0 0 0;font-size:0;display:var(--entry-tags-display);text-align:left;}
#alpha .ljtags a, #alpha .ljtags a:visited{font-size:var(--entry-info);color:var(--date-tags);margin:5px 5px 0 0;border:1px solid var(--borders);padding:0 5px;display:inline-block;}
#alpha .ljtags a:hover{background:var(--borders);color:var(--text-color);}
.ljtags a:before{content:'#';}

.entry-metadata{display:none;}

.entry-linkbar{margin:0;font-size:var(--entry-info);text-align:right;text-transform:uppercase;letter-spacing:1px;}
.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:10px 0 0 5px;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions], .entry-linkbar li a[href$=html]{display:none;}

.icon-prev{padding:10px 0;text-align:center;line-height:1;}

.icon-prev .set-prevs{display:flex;align-items:center;justify-content:center;}
.icon-prev .set-prevs img{width:100px;margin:0 8px 0 0;}
.icon-prev .set-prevs img:last-of-type{margin:0;}

.icon-prev .set-info{margin:10px 0 0 0;}
.icon-prev .set-info h4{font-size:var(--set-titles);}
.icon-prev .set-info b{color:var(--date-tags);text-transform:uppercase;letter-spacing:2px;font-size:var(--set-info);}

/* ARCHIVE VIEW */

.yearlinks{text-align:center;margin-bottom:10px;}
.year{list-style:none;margin:0;padding:0;}
.year li{display:inline;padding:0;}

.lj-view-archive .entry-content{margin:0;}
.yeartable{border-collapse:separate;border:none;width:100%;}
td.monthlable, td.viewmonth{letter-spacing:2px;text-transform:uppercase;background:transparent!important;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.dayname{letter-spacing:2px;text-transform:uppercase;text-align:center;background:var(--accent)!important;color:var(--lightest);}
.yeartable td{border:none!important;background:rgba(0,0,0,0.05);padding:5px;}

/* TAGS & MONTH VIEW */

.lj-view-tags #alpha, .lj-view-month #alpha{padding:var(--padding);background:var(--content-bg);}

/* SIDEBARS */

#beta{border-right:1px solid var(--borders);}
#beta-inner{font-size:var(--side-text);color:var(--text-color);}

.layout-two-column-right #beta{position:fixed;top:0;right:calc(var(--header-height) / 2);z-index:3;height:var(--header-height);border:none;}
.layout-two-column-right #beta-inner{display:flex;font-size:var(--nav-text);text-transform:uppercase;}

.module{padding:var(--side-padding);background:var(--content-bg);margin:0 -1px 0 0;border:none;border-bottom:1px solid var(--borders);}
.layout-two-column-right .module{display:none;border:none;margin:0;padding:0;}

.module-header{background:transparent;border:none;display:none;}
.module-header h3{margin:0;padding:0;font-size:var(--side-titles);}
.module-header a, .module-header a:visited{color:var(--headings-color);}

.layout-two-column-right .module-viewlinks{display:block;}
.module-viewlinks ul{display:flex;list-style:none;margin:0;padding:0;}
.module-viewlinks li a{display:block;height:var(--header-height);line-height:var(--header-height);margin-left:15px;}

.module-customtext .module-content{padding:0;text-align:center;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.module-customtext img{max-width:calc(50% - 8px);margin:4px;}

.module-typelist{padding:0;}
.module-typelist ul{list-style:none;margin:0;padding:0;}
.module-typelist li a:hover{background:var(--borders);}

.layout-two-column-left .module-typelist li a{display:block;border-bottom:1px solid var(--borders);padding:12px 20px;}
.layout-two-column-left .module-typelist li:last-of-type a{border:none;}

.layout-two-column-right .module-typelist{display:block;}
.layout-two-column-right .module-typelist ul{display:flex;}
.layout-two-column-right .module-typelist li a{display:block;height:var(--header-height);line-height:var(--header-height);margin-left:15px;}

.module-categories .module-header{display:var(--tags-title-display);}
.module-categories .module-header h3{font-size:0;}
.module-categories .module-header h3:after{font-size:var(--side-titles);content:var(--tags-title);}

#tag-hierarchy ul{list-style:none;padding:0;margin:0;}
#tag-hierarchy li{margin:9px 0;}
#tag-hierarchy li ul{list-style:circle;padding-left:0;margin-left:25px;}
.tag-count{font-size:x-small;float:right;}

.all-link{text-align:center;}
.all-link p{margin:20px 0 0 0;}
.all-link a{border:1px solid var(--borders);padding:5px 10px;}
.all-link a:hover{background:var(--borders);}

.module-layoutcredit{padding:0;font-family:var(--headings);text-transform:uppercase;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:0;margin:0;}

.layout-two-column-left .module-layoutcredit{font-size:var(--side-titles);}
.layout-two-column-left .module-layoutcredit a{display:block;padding:var(--side-padding);}

.layout-two-column-right .module-layoutcredit{display:block;}
.layout-two-column-right .module-layoutcredit a{height:var(--header-height);line-height:var(--header-height);margin-left:15px;}

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

/* CONTENT FOOTER */

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

/* ICON REPLACEMENTS */

img[src*="img/icon_private.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;padding:16px 0 0 18px!important;}

img[src*="img/icon_private.gif"]{background:transparent var(--private);}
img[src*="img/icon_protected.gif"]{background:transparent var(--locked);}
img[src*="img/icon_groups.gif"]{background:transparent var(--customs);}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title, 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:
Two Column (Sidebar on Left) - Full sidebar
Two Column (Sidebar on Right) - Links list topbar
♡ Disable customized comment pages for your journal: Yes
♡ Navigation link names: Recent/Archive/Friends/Profile

♡ Fill in sticky note if desired.
♡ Fill in first custom sidebar module with your icon previews:
<img src="ICON_URL"> <img src="ICON_URL"> <img src="ICON_URL"> <img src="ICON_URL">
♡ Fill in second custom sidebar module with your blurb if desired.

♡ Person to credit if you have an individually created layout: Layout
♡ URL to link the credit to: https://tessisamess.insanejournal.com/145951.html

♡ Display of tags in sidebar: List

♡ Custom stylesheet: Input the CSS provided and save!

Icon Set Coding

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!

Layout: Iconic

Information

Layout Coding

Installation Guide

Icon Set Coding

Terms of Use

Post a comment in response: