style_system | question (kind of a request maybe?)

sa1nt posting in

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

From:

sporky_rat

Most, if not all, of the official Dreamwidth layouts were made by volunteers.

It is very likely that you could use the same layout from the Insanejournal that you linked on Dreamwidth.

From:

london_fan

I've never used an IJ layout myself, but I've seen them imported to DW. There are some tutorials out there, e.g. this one by

tessaisamess who made the S2 layouts you linked to (I think). Maybe something like this would work for you?

From:

sa1nt

i know it's possible to import layouts, but that's not what i'm looking for... unless the import is with "custom CSS" instead of new custom layers.
1) custom layers require space and it's impossible to install them if you already have a few other layouts costumized. (i don't know exactly how many you can save until it tells you that but its NOT many, and i play around with layout customisation a LOT and don't want to delete a bunch of my finished ones just to be able to install a new layer)
2) i'd like to understand how the design element of "multiple entry columns" actually works and how to implement it myself, since, like i said, i play around a lot with layout customisation

From:

london_fan

Unfortunately I don't enough about how to style a genuine "multiple entry columns" layouts for DW myself; that's why I suggested importing from IJ as an "easier" solution.

That being said, I absolutely understand and respect your reasoning against it. Ultimately I switched to a genuine DW layout myself, too. In the long run it just does make more sense in terms of having the full functionality of (newer) DW features. Also, playing around with CSS to make things just perfect for your own preferences is awesome.

From:

sa1nt

i tried this now on a journal which still had room for custom layers. i don't seem to be able to do it... i don't really understand the explanation after "step 1" and if i follow it step by step it shows me an error when i try to insert the IJ code and doesn't let me save.

edit: to clarify, i don't mean the annoying 403 error, i mean an actual error it displays related to the copy-pasted HTML

Edited Date: 2022-10-05 11:41 am (UTC)

From:

london_fan

I can take a look into it later tonight when I'll have a bit more time (if you want me to). Just to be sure that I am looking into the right thing... you tried to insert this code into your layer and got a compiling error, right?

From:

sa1nt

yes please, and thank you, i appreciate any effort and help.

actually this code is the thing i can insert and save without problems. but then it stops. this code just gives me a totally unstyled layout, and i don't understand how to continue from there??? it says i need to save ANOTHER code and i think this means the code for the actual layout i want to use? and this is where i get the save error and i'm totally confused, i was reading the explanation multiple times and just don't get it.

Edited Date: 2022-10-05 05:26 pm (UTC)

From:

london_fan

Ah, thanks for the additional information. Now I have a better idea what the problem may be. I am pretty sure we can solve STEP 2 together. I guess this part is the issue: [...] and now you can install your S2 Complete Style layout the way you would any other layout!

That is pretty vague, because there are basically two ways to go about it, but I can see where these instructions might be confusing without any additional information.

So, just to get a better idea how you usually work (since you stated above that you already have saved multiple layers): when you apply CSS for your custom layout, do you usually use additional theme layers or do you insert the CSS in the box here? Either of these options will work and that's what needs to happen in STEP 2 to actually "style" the layout to what you want it to look like.

From:

sa1nt

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)

From:

london_fan

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. ;)) Date: 2022-10-05 08:27 pm (UTC)

From:

london_fan

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.

From:

sa1nt

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?

From:

london_fan

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

From:

sa1nt

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.

From:

london_fan

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.

From:

sa1nt

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

Profile

Dreamwidth style system discussion

July 2025

S	M	T	W	T	F	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Page Summary

Style Credit

Style: Radiant Aqua for Venture by onlyembers

Expand Cut Tags

No cut tags

Page generated Sep. 5th, 2025 04:38 pm

Dreamwidth style system discussion

question (kind of a request maybe?)

question (kind of a request maybe?)

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

July 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags