never let them see you cry
Tutorial : Adding LJ Layouts to DW (All Users) 
May 06 09
crush: Adventure Time (Idol | Ice Cream)
If you migrated from LJ, which is probably the majority of you, you probably miss having layouts like Flexible Squares, Smooth Sailing, and Mixit.. Do not fear, there is a way around the system but you need a Paid, Premium, or Seed account. This will not work with Basic users, sorry to say. Dreamwidth recently announced that all users can use Layers, but for Basic users it's limited. So I've tried to make this as easy as possible, but if you have any questions/comments/concerns, just reply to this entry.

The Tutorial

  1. Go to the Advanced Customization area of Dreamwidth.
  2. Click on the link under "Advanced Options" that says Your Layers.
  3. Look toward the bottom of that page and you'll see this:
  4. Under the "Create top-level layer" is where you will start. From the "Type" drop down menu, choose Layout and from the "Core Version" drop down menu, choose 1. Choosing Core 2 won't let this work, just so you know. So it'll look like this:
  5. Hit "Create" and it'll make the new layout. Since I already installed Flexible Squares and Smooth Sailing, I'm going to use Mixit for this tutorial but it should work for all the layouts as far as I know. :)
  6. Click on the "Edit" button and it'll take you to another screen that looks like this:
  7. UPDATED: Because Livejournal made changes to the raw source code for each of their layouts, the way the tutorial was originally written will not work.  I have linked the source code for four layout bases, but do not have the others. I'm sorry for any inconvencience they may be to people, but hate the system, not the writer of the tutorial.
  8. Here are the Source Codes that will work with the rest of this tutorial: Flexible Squares | Smooth Sailing | Mixit | Nebula
  9. If you are looking for any other layout styles, I'm sorry, they are not available here and I'm not good enough with coding to be able to make them work as well. I apologize for any inconvenience this makes, but by the time I realized I had to provide the code, it was already too late to salvage the others! :/

  10. Copy all of the code. Using the Select All (keyboard command Ctrl+A) and just copy it (keyboard command Ctrl+C). Now you want to paste it into the layer window in your other tab. Click "Save & Compile" at the top of your window.  There should be no errors.
  11. Now go to the Your Layers again and you'll see that it now lists your layout! Yay, now, that's the hard part and everything now should be easy as pie. Well, hopefully...I think? Yeeeah.
  12. Now go to your Customize Journal Style page and to make life easier, click on the Your Custom Layers link under the "Select a New Theme" area.
  13. Choose the layout you want by click the button that says "Apply Theme", so I'm going to pick Mixit, because that's what I want to mess with. It'll automatically apply the layout to your journal.
  14. WE'RE NOT DONE YET! Keep reading kids. :P
  15. Click on the Customize link and it'll take you to a very similar page that looks pretty much what you had on LJ.
  16. I'm going to use this layout by [community profile] thefulcrum for this tutorial. Go to the Custom CSS area of this page.
  17. Uncheck the box that says "Use layout's "Base Weblog" stylesheet" because you don't want to use that.
  18. Paste the code from the layout you want to use into the large textarea.
  19. Hit the "Save Changes" button.
  20. You are done.

Things to Note

  • If you don't use CSS for your layout, you won't have a layout, it'll just be Times New Roman text without any special format. Boring boring, yes, but that's life, unfortunately.
  • Flexible Squares is a little limited and I'm trying to figure out how to not make it so. Basically, layouts from people like [livejournal.com profile] milou_veronica might not look as nice because you can't cut down the list of navigation links (such as getting Memories and your website removed from the list in the menu).
  • If you're using someone else's CSS, please, oh please remember to give them proper credit. :)
  • If you intend to add any modifications to your "layout" layer (not the "theme" layer!), please make sure to follow the instructions here so everything shows up all right.
That's all folks!
Jan 15 12 (UTC)
Ignore my last post, figured it out. :)
Jan 19 12 (UTC)
wallflowering: From the ET interview September 2014 (Chris O'Donnell: GAP ad)
Thank you so much for this! ♥
Jan 19 12 (UTC)
l6e: (Default)
Thank you. Even with the LJ change, your coding for Flex has worked. Much obliged.
Jan 19 12 (UTC)
lastdance: (rain)
Exactly what I needed. Thank you!
Jan 20 12 (UTC)
valaunbound: (emote →  excited smile)
Thank you SO much for this, my layout has transferred amazingly :D

Do you have any idea how to get rid of the extra Memories link in my navlinks though? The code posted for flexible squares in this thread won't work in Expressive and unlike Smooth Sailing (that I have on another account) the menu options to not show it in customize don't show up.

Edited 2012-01-20 09:43 pm (UTC)
Jan 21 12 (UTC) - FIXED!
valaunbound: (emote → cute smug)
Searched for 'Menu' in the imported Mixit Layer - then deleted the section that told the layout to get the memories link :D

Basically delete this section of code:

var Link memories_url = $.journal->get_link("memories");

# Memories
if($memories_url.url != "") {
println safe """
  • $*text_view_memories
  • """;

    Edited 2012-01-21 12:59 am (UTC)
    Jan 26 12 (UTC)
    pastself: (Alicia)
    Thank you so much for this - it was ludicrously useful!
    Jan 27 12 (UTC)
    nello: (Default)
    Thank you SO much for this. Everything is so clear and easy to follow. You're a life-saver. /o/
    Feb 04 12 (UTC)
    spika: (Default)
    Thank you so much for this guide! It's really helpful. Just one thing, expanding comments does not work when using any LJ layout ported to DW. Do you have any idea how to fix this?
    Feb 04 12 (UTC)
    spika: (Default)
    Actually, it works properly in Nebula, at least. I'm not really sure what the difference is.
    Feb 05 12 (UTC)
    kordella: (bite me)
    thanks for this! i have a question though ;; i'm not sure if it's the css or the flexisquares code, but when i put "text-decoration: underline" in the css for the subject title, a little hyphen shows up. do you have any idea on how to get rid of it?
    Feb 05 12 (UTC)
    luuupin: (Default)

    I was wondering: do you know why we might not be able to use this for communities? I have been trying to figure out, but when I am working on a community, there isn't a "Your Custom Layers" link for me to use. It's kind of boggling me.

    Thanks for posting this, though! I have used it on other accounts (that were not communities) and worked great.
    Jul 03 12 (UTC)
    lastunicorn: (Doctor Who: Text - Kissing Strangers)
    You. Rock.

    Sep 29 12 (UTC)
    type_wild: (Default)
    Thank you <3
    Oct 02 12 (UTC)
    thank you so much for this. your instructions were so clear and easy to follow.
    Oct 21 12 (UTC)
    ballerines: (leighton meester: crown)
    this is incredibly helpful, thank you!

    Edited 2012-10-21 05:00 am (UTC)
    Nov 06 12 (UTC)
    prototypical: (ILU sign language)
    The text in the bottom screenshot has changed a little bit, but this is still incredibly helpful. I just got my layout (Flexible Squares) changed over to finally completely feel at home here and I have a Smooth Sailing one in my personal files that I'm happy to know I can change to with this guide. Thank you very much -- I'm a scientist, not a coder!
    Nov 06 12 (UTC)
    whiskyinmind: (Default)
    Fantastic - thanks so much for this!
    Nov 16 12 (UTC)
    lysanatt: (Queenie: OMGSQUEE!)
    Thank you, thank you, thank you! I've used Smooth Sailing for ... seven years, and the version I had compiled here had a few glitches I couldn't solve. Your updated version worked perfectly and no more glitches to annoy me.

    You're a saviour!
    Nov 16 12 (UTC)
    aralias: (charles ii loves to party)
    thanks for this! very useful :D
    Nov 18 12 (UTC)
    elf_fu: (Default)
    Thank you so, so, SO much for this. It's made my transition to DW a lot easier and feel a lot more like the "home" I used to have.
    Dec 02 12 (UTC)
    suicidal_zombie: (Default)
    for flexible squares, you can see on my current layout, 'tags' and 'memories' in the nav bar are normal text, whereas i use alt characters for the rest of my nav links. is there something i can add to the layer that will let me change what 'tags' and 'memories' says in the nav bar? i tried looking through the layer and couldn't find anything :/
    Dec 11 12 (UTC)
    asthedrivensnow: (Default)
    Fabulous. Thank you.
    Dec 14 12 (UTC)
    waltzingalong: (Default)
    Thanks for this! I used this to copy my LJ layout directly over to DW, and it works great except for the mood, location and music parts (which are filled in and selected, and display fine on LJ) won't display on mine.

    Any ideas how to fix this? Thanks :)
    Dec 22 12 (UTC)
    syntax: &lt;user name=sixties site=livejournal.com&gt; (Default)
    the images are broken :(
    Jan 13 13 (UTC)
    popo_licious: (Default)
    Just wanted to give you my thanks for posting this! ^__^
    May 25 13 (UTC)
    Thank you for this tutorial!
    Page 5 of 6
    <<[1] [2] [3] [4] [5] [6] >>
    This page was loaded Oct 20th 2017, 10:26 am GMT.