[starlit]
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!
Comments 
Dec 22 11 (UTC)
eppy: (Default)
This was so helpful, thank you for organizing it for us!
Dec 22 11 (UTC)
aymiah: (HNG: /HUGS YOU)
yessss thank you so much for doing this. love being able to use my layout! :D
Dec 23 11 (UTC)
thank you that was very useful!!
Dec 23 11 (UTC)
virkatjol: (Default)
THANKS!!!!!!!! THis is awesome!!
Dec 24 11 (UTC)
rapturesmusic: (Default)
THANK YOU SO MUCH!!! You have no idea how happy I am to be able to use my layout from LJ. The sidebar doesn't look as pretty, but I'll try to get that figured out. Thank you!
Dec 24 11 (UTC)
outdatedclocks: (Default)
ty, this is very helpful <3
Dec 24 11 (UTC)
crosspistols: (The world)
I've got the raw code for the minimalism layout if you want to add it?

Oh, also, the Mixit link is the layout coding for Expressive.

Edited 2011-12-24 07:27 pm (UTC)
Dec 24 11 (UTC)
avictoriangirl: (avg)
Thank you SO much!
Dec 25 11 (UTC)
alcarcalime: (Text: OMG)
This is awesome! Thank you!
Dec 25 11 (UTC)
n3uromanc3r: (DBSK - JYJ_01)
Thank you so much, it was very useful and easy to follow! [heart]
Dec 26 11 (UTC)
caffeinified: (-Text: Rainbow In Cloud)
Thanks so much for doing this! Now my layout is awesome and your instructions were easy to follow! :)
Dec 26 11 (UTC)
chiibug: (Default)
aaah, this was awesome.
thank you! :)
Dec 27 11 (UTC)
spud66cat: (SG1-Sam-Lost City)
Thank you! This was very helpful!
Dec 28 11 (UTC)
evergreenelk: (mystical)
Thanks so much for the great tutorial. I tried out a few before I found yours. So happy to finally be able to use my flexible square layout!
Dec 28 11 (UTC)
brightflower: (Default)
Thank you so much for this tutorial! Now I've got my pretty red layout on both sites, and I'm so excited!! You're the best! :D
Dec 29 11 (UTC)
redcirce: orange octopus (cephalopod)
THANK YOU FOR THIS. :)

My LJ is now eerily cloned, and that custom CSS I bought in an auction didn't go to waste!
Dec 30 11 (UTC)
disprove: (Default)
This is awesome, thank you! This tutorial made fiddling with my layout a lot easier.
Jan 02 12 (UTC)
lyricism: (Default)
thank you so much for making this tutorial!
Jan 03 12 (UTC)
lyraelia: (Suits - Harvey (08))
I've been searching for a way to import my custom LJ theme across here. This is an amazing help, thank you so much!
Jan 04 12 (UTC)
chankaylore: (Default)
you are amazing beyond words, thank you ♥
Jan 04 12 (UTC)
femshep: (Default)
It's giving me a weird error for Smooth Sailing... Pasting it here, and if you have any idea what's going on, advice would be fantastic. :)

S2 Compiler Output at Wed Jan 4 05:04:13 2012
Error compiling layer:
Compile error: line 10, column 5: Can't declare usage of non-existent property
S2::NodeProperty, S2/NodeProperty.pm, 90
S2::NodePropGroup, S2/NodePropGroup.pm, 77
S2::Checker, S2/Checker.pm, 374
S2::Compiler, S2/Compiler.pm, 34

Context
6: layerinfo previews = "smoothsailing/layout.jpg";
7:
8: set tags_aware = true;
9: propgroup presentation{
10: property use page_recent_items;
11: property use page_friends_items;
12: property use use_shared_pic;
13: property use view_entry_disabled;
14: property string layout_header_usericon {
Jan 05 12 (UTC)
some_kinda_hero: (Hugs - Cut off)
Sweet baby unicorn, I appreciate you endlessly. Thank you soso much for this. *hugs*
Jan 06 12 (UTC)
You can remove the extra "Tags" and "Memories" in the Flexible Squares layout by adding this to the CSS:

ul.navheader li+li+li+li, ul.navheader li+li+li+li+li { display: none; }

ul.navheader li+li+li+li+li+li { display: inline; }
Jan 07 12 (UTC)
saleh: (Mischief)
Thank you so much! ♥
Jan 10 12 (UTC)
darlynne: (Default)
oh gosh, thank you so much! i was directed here by a friend and this post helped me more than you can imagine. :)
Page 4 of 6
<<[1] [2] [3] [4] [5] [6] >>
This page was loaded Oct 20th 2017, 10:39 am GMT.