Previous | Next

How to use IJ layouts on DW

How to use IJ layouts on Dreamwidth

Please note that this guide is specifically for S2 layouts with a focus on S2 Complete Style; if your layout is not S2 you will not be able to convert it to DW, from what I've read. If your layout is S2 but is a different layout type, it should still be pretty easy to determine which steps to change (ie. anything specific to Complete Style.)

The Short & Sweet version:

Skip down to Step One if you think you'll need more in-depth explanations. Here's the short version without full link paths if you just want a quick step-by-step without the explanations:

• Go to Your Layers
Create top-level layer
Type: Layout
Core Version: 1
Click Create
• Click the Edit button on your new layer; it will say layer (none)
• Replace the text in the compiler with the Complete Style Raw Source Code and save
• Go to Your Custom Layers and click Apply Theme
• You're ready to install a custom Complete Style Layout! (If you experience inconsistencies while porting the layout, check the bottom section of this guide.)

Step One

Go to: Customize > Developer Area > Your Layers
Create top-level layer
Type: Layout
Core Version: 1
Click the Create button next to these options.
You will see a new layout layer generate above that looks something like:
###### layout (none)
Click the Edit button next to this layer.

Step Two

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.

Copy this page's contents and paste it into your Dreamwidth compiler, then click the Compile & Save button. Now you can go back to Customize and a new option in the tabs will be present, called Your Custom Layers. Choose Apply Theme on the layer you've just created, and now you can install your S2 Complete Style layout the way you would any other layout!

But wait, there's more!

Ever notice how a ton of Complete Styles just don't want to import correctly onto Dreamwidth? Annoying, I know. The most likely culprits are the following:
  1. You may want to set the control strip to disable by adding in: #lj-controlstrip{display:none;} as this will mess with a lot of fixed and absolute elements in layouts. If you need the control strip present, check for any elements with absolute or fixed positioning and adjust their top position accordingly to make room for the control strip.

  2. The icons next to usernames and communities have different filepaths on one site than the other, so you'll notice that even though your layout replaces them, they're not showing up. Run a replace all to make the following URL changes:
    img/userinfo.gif becomes identity/user.png
    img/community.gif becomes identity/community.png
    img/icon_protected.gif becomes entry/protected.png
    img/icon_private.gif becomes entry/private.png
    img/icon_groups.gif becomes entry/groups.png

  3. Page view classes for what type of page you're on vary SLIGHTLY between DW and IJ, so you may want to run a replace all on .lj-view-friends to change it to .lj-view-read, just in case the distinction appears in the layout you want to use.

  4. If the extra class to show usernames on your reading page is screwing up the way the entry titles sit, you can disable them with: .header-poster{display:none;}

  5. Another thing that is most likely screwing up your layout is the fact that DW uses a different method to display userpic information. So go ahead and set .pic-poster{display:none;} too so that the two aren't fighting with each other. If it's still doubling up on what you see, go through the layout you're installing from IJ and remove any other styling for .pic-poster to fix that.

  6. You also may notice that your layout disabled the Tracking entry link, but it's still showing up. In this case jump to a[href*=subscriptions] and change it to a[href*=track] instead.

  7. DW layouts have more top nav links than IJ layouts do. If you want them disabled (for instance, if your Complete Style layout only looks good with four or five links in the top nav) you can do so by disabling the memories links using .banner-viewlinks a[href*=mem]{display:none;} and the tags page link using .banner-viewlinks a[href*=tag]{display:none;} but be sure to keep in mind that if .banner-viewlinks has any padding/margin/border they'll hang around in weird empty spots where the links used to be. The best fix for this is to reset those and move the padding/margin/border to #nav-above a instead.

  8. Here is a quick fix code to add into your layout, if you want all of the above issues (aside from image replacements) disabled:

    #lj_controlstrip, .header-poster, .pic-poster, .banner-viewlinks a[href*=mem], .banner-viewlinks a[href*=tag]{display:none;}
Are you noticing glitches in addition to the ones I've mentioned above and need a catch-all fix for it? Leave a comment and I'll run it through and add the fix to this tutorial!

A quick sidenote for entry codes!

Is the entry code you picked acting funny when you try to use it on DW? No worries! This is almost always an issue with codes that use the hidden click method (codes with sections based on an anchor link, where you can't see the section until you click the link it's tied to.) Generally the issue is lots of whitespace in weird places that it shouldn't be. To fix this, just stick your code into a Notepad or similar and run a Replace All on all instances of <br> to change them to <br/> instead!

♡ You're Done! ♡



Mar. 14th, 2018 09:44 pm (UTC)
Thank you for doing this!
Mar. 14th, 2018 11:03 pm (UTC)
Aw, you're welcome! ❤ It was a long time coming haha.
Mar. 14th, 2018 10:46 pm (UTC)
Thank you so much for posting this! :) <3
Mar. 14th, 2018 11:04 pm (UTC)
No problem! 😘 I'm glad I finally got time to troubleshoot for the guide's issues section!
Mar. 15th, 2018 04:50 pm (UTC)
I've been waiting for this my entire life. Thank you so much. ♥
Mar. 15th, 2018 05:38 pm (UTC)
Aw, no problem! Let me know if you run into any snags! ♥
Mar. 16th, 2018 02:54 am (UTC)
re: step 7 under "there's more," do you think you can clarify where you've stated that "the best fix for this is to reset those and move the padding/margin/border to #nav-above a instead" a little bit more? How does one reset the .banner-viewlinks and what do you mean by moving the padding, etc to #nav-above?

Sorry, that part is what's throwing me. Love this guide, btw!
Mar. 16th, 2018 03:12 am (UTC)
Resetting a CSS spec is basically just reverting it to zero; so, if you have .banner-viewlinks and it has, say, padding:0 5px;margin:0 8px;border-left:1px solid #000; and it's screwing up the fact that you also disabled some of the links by adding gaps and borders where those links used to be, that's because this class is for the list item wrapping that link and not the actual link itself. In that case you'd reset the CSS in that to padding:0;margin:0;border:none; and put it into #nav-above a instead, the class for the actual links in the top nav.

You can read more about that here!

(But yeah, resetting CSS is really just changing the preset styling to more or less achieve the same effect as if it didn't have that styling in the first place. Obviously, if you don't like the border something has but you still wanted a border you would redo the border styling rather than reset it to none. Same with any other type of CSS styling; you can either reset or change it!)
Mar. 16th, 2018 03:16 am (UTC)
Thank you for such a quick and informative response! I'll have to try that out tomorrow; I kind of hack jobbed the layout I was porting over by playing with some display:none toggles, which works for now, but I'd like to see what it looks like done properly.
Mar. 17th, 2018 06:18 am (UTC)
Absolutely, any time! ♥ Let me know if you run into any snags or have any other questions while you're porting IJ layouts over!
Mar. 29th, 2018 12:11 am (UTC)
Oh my god this is everything I have ever wanted

A question, though! I had success doing this with Complete Style layouts, but I decided to give Generator a whirl and see what happened. Obviously using the Complete Style layer didn't work, but I was able to dig up the raw source code for Generator over here (http://www.insanejournal.com/customize/advanced/layerbrowse.bml?id=generator/layout).

I'm trying to use your Revenant (http://tessisamess.insanejournal.com/59110.html#cutid1) layout (because damn, heart eyes), but this (https://imnotdone.dreamwidth.org/) is the result I've got. If I uncheck the 'Use layout's stylesheet(s)' box it pretty much stays the same, just blacks out the top bit in the profile. I'm not familiar at all with the Generator code so I thought I'd swing in and see if it's an easy fix; if it's time consuming, no sweat, I don't want to take up your time with a side project.

Thanks again for writing up this guide, I'm so excited to be able to use your layouts on DW!! I can't wait till things are steady enough on my end to hit you up on patreon regularly.
Apr. 2nd, 2018 03:49 pm (UTC)
Awww, thank you so much! I've been meaning to do this writeup for a while now, haha.

Unfortunately, DW doesn't have any framework support for the really old S1 style systems, so the Generator source code they have is actually the CSS-only S2 version of it, which doesn't support any of the custom coding we use to make Generator layouts with custom sidebars and all that. :(

However! If you do ever decide to hit up my Patreon, I actually have a DW-specific version of Revenant made with Tabula Rasa over there on the $20/mo tier!
May. 11th, 2018 02:46 am (UTC)
I'm using this conversion in conjunction with one of your existing layouts, and for some reason, the links at the top of the page aren't working (Recent, Archive, etc.) and they're not as close to the top as the layout is normally on InsaneJournal:

Here's the Dreamwidth example.

Do you have any idea what might be going wrong?
May. 11th, 2018 02:47 am (UTC)
Also, thank you for any help you can offer!