[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 
May 16 11 (UTC)
biodamped: for better or for worse (Default)
Sure thing! I've uploaded what ones I have on this computer to Google Docs - let me know if the conversion from txt to whatever their doc format is has wrecked it at all, and I'll re-upload it somewhere else. drop.io seems to have vanished into the ether and I can never remember my dropbox login >.<

So far I've found: Dear Diary, Minimalism, Opal OSWD, Style System (Bloggish) and Tranquility II. I know I used other ones, so tomorrow I'll check to see if they're on one of the other computers :3
These are all from mid 2009, and I've just attempted to do a clean install of Bloggish, with this layout. It was interesting since I had to create a theme layer as well as the source layer, and it's not an ideal import since dw have more menu links than lj did (you can see what I mean by comparing this image to how it actually looks: [community profile] doctor_donna), but it compiled with no errors and seems to have worked as well as I'd have expected doing a direct import of an lj-specific layout. So hopefully all those files will also import without errors (Opal does, but I'm too tired to check the rest now) and people will be able to make use of them. And with any luck, I can hunt up at least the rest of the base layers, if not some of their theme layers as well. I'll pass along any more files I upload as I do them!

Oh, and, re: the spam filters - I did try and install the new source code to see how many errors it returned, but after using MS word to compare and merge the old and new versions of code, there is SO much red showing what they've changed that I gave up. If you attempt it, I hope you have better luck :)
Jan 15 13 (UTC)
lastrat: (Default)
Heya, I just stumbled on this - I tried to do an install of Minimalism, and it keeps compiling with errors. I can't possibly pretend to find the source of the problem, but I'd be super grateful if you could help me out! :D
Jan 15 13 (UTC)
biodamped: for better or for worse (Default)
Hi! I just had a look at the source code and I think I've found the trouble. Ages ago when this tutorial was first posted, you had to manually find a couple of things before it would compile properly. I just uploaded the raw source files as they were on lj, and those lines of code are still in there. The element that's causing the error is "flag", and there's two lines of code that I've removed. If you try copying from the google doc now, it should compile with no errors.

There's one other thing that might cause a problem, which was also treated in the original version of this tutorial (I'm not sure when [personal profile] crush changed it). Because lj refer to the friends page as "friends" and dw refer to it as "read", we had to manually change "friends" to "read" in the source before compiling. Now it will compile without errors either way, but you might find that when it comes to installing your layout, the "read" page will link to a "friends" url, and just return a 404 (because there is no username.dreamwidth.org/friends, obviously!) If that happens, let me know. I can correct all instances of "friends" in the Minimalist source code and then you can just copy/paste again. :)

Good luck with your layout! I've not used a Minimalist one myself, it'll be interesting to see how it copies across.
Jan 15 13 (UTC)
lastrat: (Default)
Oh, awesome! Thank you so much! I'll definitely keep you updated, there's a minimalist one I've been eying for a while now, I was absurdly excited to see you had the source code here this afternoon. :D

Edit: If you want to check it out, I've uploaded the layout to this journal. Encountering a few issues, but I'm hoping I'll be able to work them out.

Edited 2013-01-15 02:56 am (UTC)
Jan 15 13 (UTC)
biodamped: for better or for worse (Default)
You're welcome! I'm glad it could be of use to someone - I keep meaning to go hunting for the other layouts I mentioned all the way back in my first comment, but I never have time when I think of it and I've always forgotten by the time I'm free. :P

Looks like I will need to change all the "friends" references in the source to "read" - clicking on the reading link from your top menu does take me to a 404. I thought it might. Google drive just crashed on my, but I'll get it updated sometime this afternoon and let you know when it is! The other stuff just looks like positioning/alignment from where I'm sitting, so hopefully nothing too difficult for you to work around.
Jan 15 13 (UTC)
lastrat: (Default)
Hahah, that is the way so many things happen for me, I feel you. :p

Yeah, I just noticed that, but I really appreciate your willingness to help! I would have been so bummed without it. :D
Jan 15 13 (UTC)
biodamped: for better or for worse (Default)
It's this terminal life problem of mine. ;)

It's not a problem at all! I drove myself insane trying to get lj layouts here a few years back, I know exactly what it's like. Of course, the easy option would be to use a dw specific one, but I *like* my layouts.

Google Drive is being a complete tosser and in the end I had to delete to version of Minimalism I had on there to be able to make any changes to it. I've re-uploaded it for you here - all the friends references should now say read, and point to the reading page properly, and I've checked that it compiles without errors, so fingers crossed that's all you need! If you run into any other problems, feel free to give me a shout. I can't fix everything but I'm happy to at least look at it. :)
Jan 15 13 (UTC)
lastrat: (Default)
Hmm, I uploaded the new minimalism sheet, but the reading page still takes me to a 404. I even changed the style, and went back to Minimalism, just in case. :|a
Jan 15 13 (UTC)
biodamped: for better or for worse (Default)
Hmm. Very odd. And of course Drive has stopped me from editing any further, oh my god. I miss the old Google Docs, it was so much easier to use!

If you go to your advanced customisation screen and edit that layer (http://www.dreamwidth.org/customize/advanced/layers), you should be able to ctrl + f for a reference "base_url/friends". Change friends to read, recompile and see if that makes a difference?
Jan 15 13 (UTC)
lastrat: (Default)
That took care of it! And yeah I feel you, I almost didn't realize I was working out of Google Docs the first time I opened it. xp Thanks again for all your help! :D
Jan 15 13 (UTC)
biodamped: for better or for worse (Default)
Win! I'll see if I can't edit that document some other time. And if not, perhaps I'll reupload the whole lot somewhere else and make a resource post on my own journal. (Drive is the worst, ugh.) Anyway, you're welcome, glad I could help!
Jan 22 13 (UTC)
lastrat: (Default)
Aha I'm sorry to slink back and bug you again, but hopefully this is a quick and easy fix (though what do I know, I don't quite get S2 code at all)!

So it turns out the layout I'm using actually calls for Minimalism Penguins specifically - I found the raw code on lj here, but when I try to compile it, it comes up with these errors:

Compile error: : Layer is declared theme but expecting a layout layer
S2::Checker, S2/Checker.pm, 365
S2::Compiler, S2/Compiler.pm, 34

You've already been SUCH a huge help, so if this is a quick fix, let me know - and if not, thanks anyway, and thanks again for everything else! <3
Jan 23 13 (UTC)
biodamped: for better or for worse (Default)
Hmmm. As far as I can see, Penguins is just a child/theme layer of Minimalism - basically a layout, rather than a layout STYLE if that makes sense? It still needs Minimalism to function, the same way a layout written from scratch would - all theme layers do is say what size and colour font to use, where to align the headers and so on. If you think of the style as a bookshelf, and the layout as books on the shelf, all Penguins is doing is specifying books of a certain size or colour, whereas a premade would specify books of a different size or colour to go on the shelf. The reason dw's compiler won't compile it is because it's just a colour theme layer rather than a layout all on its own. The lj layout you're using might be drawing on elements of the Penguins theme, and only changing certain colours or font sizes instead of all of them, but it still needs the Minimalism parent layout to work properly.

I can take a look at the layout premade and see if I can see why they call for Penguins specifically if you like! In all my years of coding, I've never seen anyone need to do that. Most of the layouts I've used rely on just the parent and completely rewrite any colours in the child layer, so it doesn't matter which one you pick; you could use Penguins or Georgia or Crazy Day or any of the other 46 children Minimalist has.
Jan 23 13 (UTC)
lastrat: (Default)
This is where I got the css - there only seem to be a couple problems that have me gnashing my teeth at this point: the journal title isn't showing up, and the red lines along the right aren't showing up. Which, I'm told, is because it's based on the Penguins layout - the lines sit where whatever the penguins graphic is would sit.

Your explanation gave me a thought though - DW apparently will allow you to create a theme based on a style, the same as it does for inserting LJ layers; I tried creating a theme based on minimalism and pasted in the lj Penguins code, but it compiled with errors, too. I don't know if that would make things simpler, or just complicate it further - but I thought it would be worth trying. xp
Jan 23 13 (UTC)
biodamped: for better or for worse (Default)
Ok, that's super helpful on both counts! I totally forgot that there's an option to create a theme layer as well as a layout layer, and that's EXACTLY what you need to do. In your advanced customisation area, create a style-specific layer and base it on Minimalism (it should be right down the bottom). That raw source you found is lj's current version, which is why there's so many errors. What you actually need is a version from a few years ago, which I've tracked down for you and uploaded here. Edit the style-specific layer, paste that in and compile as usual - you shouldn't get an error, I took the lj-specific stuff out already, but do poke me if you do. ^_^

Once you've done that, your developer area should have Minimalism and Minimalism Penguins both listed. Go back to the normal customisation area, select Penguins as your theme (it should be listed in "Your Custom Layers" in the side bar) and uncheck both boxes in the custom css area. Then just paste in the css from Minty Apple and you should have it all showing up properly. :D I've tested it on an rp journal of my own and both the title and that diagonal stripe show up. The only thing is, it's an empty journal for now, so it doesn't have entries to show me whether they align the way they should - I'll cross my fingers that all that stuff is ok!
Jan 23 13 (UTC)
biodamped: for better or for worse (Default)
Okay, because I'm a perfectionist, I actually just posted an entry, and it's not perfectly solved yet. Your diagonal side strip will only show up to a certain point using the css from Minty Apple. Once you've done everything in that first comment, go back to the custom css area and look right at the top where it says *---- BODY----*

Find this bit of the source:

html {background: #333333 url( http://i45.tinypic.com/10emyaw.png) repeat-x 0 100px;}
body {font: 13px arial; color: #606060; margin: 0; background: url(http://i48.tinypic.com/2nkro29.png) repeat-y center !important; margin: 0 auto; }
#hello-world {clear: both;}

and replace it with this:

html {background: #333333 url( http://i48.tinypic.com/2nkro29.png) repeat-y center !important; margin: 0 auto; }
body {font: 13px arial; color: #606060; margin: 0; background: url(http://i45.tinypic.com/10emyaw.png) repeat-x 0 100px; height: 400px;}
#hello-world {clear: both;}

and everything should show up exactly like the original. :D (The more I do this, the more I think I really should get around to design as a career. I'm starting to scare myself with how easily I can manipulate code I've never seen before.)
Jan 23 13 (UTC)
lastrat: (Default)
Oh my gosh, it's completely perfect! Thank you so much! And man, I fully believe you could, I would have been poking at this uselessly for ages before giving up. XD Seriously, thanks so much for helping me out with this, I really appreciate it. :DDD
Jan 23 13 (UTC)
biodamped: for better or for worse (Default)
Hurrah! I'm so pleased I could help. It's been ages since I coded at all, and even longer since I did it for something that wasn't Flexible Squares, so it was fun trying to work it out. In that kind of masochistic fun way, you know? :P And it really is an excellent layout. I've spent ages trying to convince all my lj friends to move over to dw, and so far, layouts seem to be the sticking point. Being able to help out with stuff like this means I have more arguments to wear them down with. "It doesn't MATTER how tricky the layout is, we will fix it!"

(I thought about it for a while, but design is such a thankless business sometimes, I think I'd get sick of it. It's more fun as a hobby when the only person you have to please is yourself. :3)
Jan 23 13 (UTC)
youwillgotohell: (Default)
Hahah, that is very true! Hobbies are always more fun than jobs. xp And man, I hope you succeed, I could not be happier since fleeing livejournal - and there are so many great tutorials like this one - and awesome people like you - that make it so very easy to port over any layout. Not to mention, there are some pretty rad ones at [community profile] dreamwidthlayouts. :D
Jan 23 13 (UTC)
biodamped: for better or for worse (Default)
They truly are. :P

Oh, me too. Sooner or later lj will destroy enough to make the site unusable, and then they will come. Oh yes, they will. (Totally assuming I'm talking to the same person, in which case, I congratulate you on your obviously excellent taste in rp characters. I've not played in Bond but I did Morgana for a while myself. :D)
Jan 23 13 (UTC)
youwillgotohell: (Default)
Whoops, yes still me! I forgot who I was signed in as but oh well. xp Hahah, thank you! I fully approve, Morgana is one of my favorites. :D

But seriously, lj is going to completely self-destruct one day, and they'll make their escape here. It's okay, we were all lj refugees at one point. :p
Jan 23 13 (UTC)
biodamped: for better or for worse (Default)
And on that day we will welcome the next generation of refugees with open arms. xD
May 29 17 (UTC) - Gradient Strip
Hi, sorry for interrupting but I have found the Gradient Strip source code :D

I made a new core 1 layer in DW, pasted it in and of course got errors. Maybe you'd like to help me? :) If so what would be the best way to upload the code so you can download it?

Edited 2017-05-29 11:11 pm (UTC)
May 29 17 (UTC) - Re: Gradient Strip
biodamped: for better or for worse (Default)

Oh gosh, I wish I could! I've never used Gradient Strip though, and have long been out of coding for a hobby - I've spent the last five years working in a completely unrelated field and wouldn't know where to begin now, with all the changes that would have been made to DW's backend in that time. I know S1/core 1 lj layouts are not something they intend to provide support for (I remember reading this in a newsletter, I think? It's basically to do with the redesign of lj's original raw code and the way DW has been structured; porting S1 and core 1 styles is problematic at the best of times, as that thread of mine above will show you!), but you could try poking around in the coding comms to see if someone with more up to date knowledge is around. Or the OP might still have some ideas! I'd imagine that any number of things could be causing the errors, between the updates that would have happened on both lj and dw. Sorry I can't be of more use - but I think I'd probably cause more errors than I'd fix now :(

May 30 17 (UTC) - Re: Gradient Strip
That's okay no worries. Posted my errors in DW styles so hopefully I'll have some luck there. Thank you for replying :)
This page was loaded Jun 14th 2025, 8:58 pm GMT.