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

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:

   /* FOR DREAMWIDTH CONVERSION */

#lj_controlstrip, .header-poster, .pic-poster, .banner-viewlinks a[href*=mem], .banner-viewlinks a[href*=tag]{display:none;}

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!

♡ You're Done! ♡