Mar. 14th, 2018
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.)
But first: 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, and you should be all fixed up. Now, let's move on to converting IJ layouts to DW!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• Click the Edit button on your new layer; it will say layer (none)
Type: Layout
Core Version: 1
Click Create
• 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 LayersCreate top-level layerYou will see a new layout layer generate above that looks something like:
Type: Layout
Core Version: 1
Click the Create button next to these options.
###### 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:- 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.
- 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
- 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.
- 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;}
- 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.
- 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 toa[href*=track]
instead.
- 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.
- Here is a quick fix code to add into your layout, if you want all of the above issues (aside from image replacements) disabled:
/* FOR DREAMWIDTH CONVERSION */
#lj_controlstrip, .header-poster, .pic-poster, .banner-viewlinks a[href*=mem], .banner-viewlinks a[href*=tag]{display:none;}
FAQs
Can I use S1 layouts (like Generator) on DW? No. Dreamwidth does not have the framework to support S1, only S2. Sorry!Can I use this method to convert other S2 layouts? Yes! You'll just click through to a different layout type when you get to Public Layers and follow the rest of the install steps from there! Steps 1-3 and step 6 from the "But Wait, There's More!" section of this guide should still apply to other layout types, but I can't say for sure that the other steps will since every layout has different classes and IDs.
Comments
Sorry, that part is what's throwing me. Love this guide, btw!
.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 topadding: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!)
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.
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!
Here's the Dreamwidth example.
Do you have any idea what might be going wrong?