[personal profile] sa1nt posting in [community profile] style_system
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.

Date: 2022-10-04 09:27 pm (UTC)
sporky_rat: A Dreamsheep dreaming of DW Support (_support)
From: [personal profile] 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.

Date: 2022-10-04 11:08 pm (UTC)
london_fan: Almost invisible text: /*CSS-Ninja*/ body {display: none;} (CSS|Code|Ninja)
From: [personal profile] 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 [insanejournal.com profile] tessaisamess who made the S2 layouts you linked to (I think). Maybe something like this would work for you?

Date: 2022-10-05 04:17 pm (UTC)
london_fan: Muppets - Statler and Waldorf with animated text: Some of these ideas aren't half bad. - Yeah, they're all bad. (Muppets - Statler and Waldorf (all bad))
From: [personal profile] 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.

Date: 2022-10-05 04:23 pm (UTC)
london_fan: Text (in clock radio style): Error 4:04 am - Sleep not found (Error 4:04 am - Sleep not found)
From: [personal profile] 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?

Date: 2022-10-05 05:47 pm (UTC)
london_fan: Stephen Fry holding a large light bulb (Stephen-wise man)
From: [personal profile] 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.

Date: 2022-10-05 08:26 pm (UTC)
london_fan: Symbols of failing tech (no wifi, endless loading, low battery, no reception) with the text "The Four Horsemen Of The Modern Apocalypse" (Tech - Four Horsemen Modern Apocalypse)
From: [personal profile] 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)

Date: 2022-10-05 11:15 pm (UTC)
london_fan: Sherlock - Teacup with eyeball (surprisingly okay) (Sherlock - Tea (surprisingly okay))
From: [personal profile] 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: [community profile] house_of_london, just to give you an idea how it will look in the end.

Date: 2022-10-06 12:08 pm (UTC)
london_fan: Sherlock - NRK parody|Rebooting (Sherlock - NRK parody|Rebooting)
From: [personal profile] 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 [insanejournal.com profile] tessaisamess' tutorial:



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

Date: 2022-10-06 12:17 pm (UTC)
london_fan: John and Sherlock looking intently at an laptop. Some fairy lights in the background. Christmas is cancelled. (Sherlock/John (Christmas is cancelled))
From: [personal profile] 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.

Profile

Dreamwidth style system discussion

July 2025

S M T W T F S
  123 45
6789101112
13141516171819
20212223242526
2728293031  

Style Credit

Expand Cut Tags

No cut tags
Page generated Sep. 4th, 2025 12:41 am
Powered by Dreamwidth Studios