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

when working with my own layouts, i use ONLY custom CSS (except this one i currently use, it's the first one i had to install with a separate layer)

that being said:
it's not only that part, i literally don't understand anything after part 1.

"Your Complete Style theme layer needs to be copied into this compiler. Select the two lines already in the compiler and paste over them. You can find the Complete Style theme layer on Insanejournal at Customize > Advanced > Public Layers > Complete Style, where you then need to click Raw Source Code."

"this compiler"? i had to think what this means in the first place. i don't understand the entire paragraph. what is it referring to? is it saying i need to create a SECOND custom layer in addition to the first one? sorry, it's extremely confusing to me. (also i should add i don't have an IJ account)

Okay, let's break this down a little bit more, so I know how far you've come.

STEP 1 ends with Click the Edit button next to this layer.. The page that opens when you click the Edit button (403 errors withstanding), is the so-called compiler. At this point there should basically be a mostly blank site with just the two lines at the top:

layerinfo "type" = "layout";
layerinfo "name" = "";

This huge white space is the place to insert the whole lot of code found here. It's important that you actually override/delete the already existing two lines. Now that you copied that code here, you click the tiny [Save & Compile] button at the top of the page until you get the following message in the field at the bottom:

S2 Compiler Output at Wed Oct 5 ...
Compiled with no errors.

If you succeeded with this step your layer can now be found on Your Layer page under the name

Child of layer 1: LiveJournal S2 Core, v1
XXXXXXX | layout | Complete Style

Hopefully that more detailed explanation makes more sense to you? We're still working with just the one layer at this point. By editing it in the so-called compiler we just give it another name and introduce the basic layout instructions from IJ to DW, so that we can style our layout with CSS that's intended for IJ in the next step.

Please let me know if there are any issues with these steps so far or if you got this to work. Then we'll tackle the part where we actually add the custom layout.

Edited (Stupid grammar mistakes. ;)) 2022-10-05 20:27 (UTC)

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

no subject

no subject