style_system | question (kind of a request maybe?)

question (kind of a request maybe?)

i love layouts with multiple columns for posts, like
https://tess090.insanejournal.com
https://tess072.insanejournal.com
https://tess071.insanejournal.com
however, i don't find any of these on DW, except a single one made by killthecake, which i tried to edit but don't manage to make it fit my likes. so any tips or suggestions? i'd also be happy if someone actually made layouts that looked similar to the above ones since i enjoy minimalist style and tiny fonts.

Flat | Top-Level Comments Only

Okay, once you've successfully saved and compiled that "Complete Style" layer, we can apply one of the multiple columns layouts you linked to above.

I just tried the first one ICONIC - Two Column (Sidebar on Right) for myself to figure out if there are any bugs. I also added the suggested additional fixes from the original tutorial.

There was one line of code from that custom layout concerning the entrylinks that caused some issues, but the layout works just fine without that, so I just removed that line.

Since I don't have any public entries on my personal journal to show you the results, I set the layout up (temporarily) on my creative community for you:

house_of_london, just to give you an idea how it will look in the end.

i'm looking into it now. so far, your explanation sounds more comprehensible to me than that of tess... sorry, i just think it's confusing (i have trouble understanding things if they are not extremely clear and specific)

There was one line of code from that custom layout concerning the entrylinks that caused some issues, but the layout works just fine without that, so I just removed that line.

which line though?

Just in case you want to try this layout later... It was this part:

.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;}

The full working code (including the suggested modifications from

tessaisamess' tutorial:

/*-- 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

--*/

/* FOR DREAMWIDTH CONVERSION */

#lj_controlstrip, .header-poster, .pic-poster, .banner-viewlinks a[href*=mem], .banner-viewlinks a[href*=tag], .entry-linkbar a[href*=track], .module-viewlinks li:nth-of-type(4), .module-viewlinks li:nth-of-type(5), .module-viewlinks li:nth-of-type(6){display:none!important;}

/* 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;}

.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*="entry/private.png"], img[src*="entry/protected.png"], img[src*="entry/groups.png"]{width:0!important;height:0!important;padding:16px 0 0 18px!important;}

img[src*="entry/private.png"]{background:transparent var(--private);}
img[src*="entry/protected.png"]{background:transparent var(--locked);}
img[src*="entry/groups.png"]{background:transparent var(--customs);}

I am going to remove this layout from my comm, but just in case you (or anyone else) wants to use this later...

nevermind, the "error line" was irrelevant for the one i tried it with (on another account). i understand now how it works. but am i stupid or why does tess mention the code having to be copied TWICE? i would have never figured out how its supposed to work without someone else explaining it to me in different words.

now i just need to remove the poster names because i don't like them appear on my sidejournals/private communities.

Hey, I am happy to hear you got it to work. I guess the instructions might be confusing for somebody who isn't used to working with layers. She basically gives a quick overview of the process and then some more detailed instructions which probably led you to understand you had to copy something twice.

I hadn't seen her tutorials before, but have taken a closer look now and have to say, there are a lot of really useful tutorials. I also found one where she goes into more detail about how to make these multiple columns layouts. Maybe that might be helpful for you if you want to play around an tweak things.

thank you. i can tweak the layouts relatively easily now that i was able to install them.

i faintly remember having looked into this link before and not understanding how to implement it...

Flat | Top-Level Comments Only

question (kind of a request maybe?)

no subject

no subject

no subject

no subject

no subject

no subject