Tessisamess

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

Updated: July 14, 2020 to include more extensive DW-compatibility edits.

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
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 link 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. DW layouts also have more sidebar 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 network link using .module-viewlinks li:nth-of-type(4) and the tags page link using .module-viewlinks li:nth-of-type(5) and the memories link using .module-viewlinks li:nth-of-type(6) and you're all set!
   
   
9. 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], .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;}

10. Here is a quick fix code for icons to add into your layout if you're using any layout of mine that utilizes a :root directory:

    /* 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);}

    You can change the highlighted value replacements to url()center if using your own icons, otherwise this will work with any of my layouts from the past couple of years.

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!

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.

♡ You're Done! ♡