?

Log in

 
 
16 June 2013 @ 01:23 pm
Tutorial: Using Flexible Squares at Dreamwidth (Smooth Sailing, Mixit, Nebula)  
Account Status: Free
Actions: Using Flexible Squares at Dreamwidth (Smooth Sailing, Mixit, Nebula)
Theme: Flexible Squares


1. Let's make sure you are signed in at Dreamwidth. Usually the first page you land on after signing up is the Dreamwidth main page which shared DW news with you. Go to the navigation bar at the top and Select Organize then Select Style.

2. You should see the Select Journal Style page. From here choose the Developer Area on the left navigation bar.

3. In Advanced Customization you should go down and click Your Layers. Those of you who've messed with layers at LiveJournal may understand things here but for those of you who have not, I'll walk you through it. Don't worry.

4. In Your Layers you will see something similar to this. As you can see I already have a Flexible Squares Layer but let's ignore that. Go down to Create Layer.

5. Here you are going to want to choose the Type as Layout and the Core Version as 1 (as shown) and click Create.

6. Again ignore my Flexible Squares Layout. You'll see under the LiveJournal S2 Core, v1 a layout (different number) that says none. We are going to edit this layer. Click edit.

7. You'll see a window like this (again different layer number). You can delete the layer info information that is listed here. We'll be adding a completely fresh layer from LiveJournals source code.


8. The source code we want to add is below. You should copy all of this coding and then paste it all into the Layer Editor. Download the source code you wish to use.
9. After pasting, it should look like this. Click the Save & Compile button at the top. At the bottom it should tell you there are no errors. This means you are done with this step. If there are errors try deleting all the code, recopying it and pasting it again.

10. Then you will go to Select a Theme and click on Your Custom Layers:

11. You should see something along these lines. Click the Apply Theme button.

12. It will then say Customize under the "Custom Layer Theme". Click customize.

13. Now it looks much like LiveJournal. You can now go down to Custom CSS.

14. Here you will want to check-mark the Use external stylesheets because of the Flexible Squares Layer. Then below that paste the coding from the Flexible Squares layout you want and click Save.

15. Now go to your journal. You should have a Flexible Squares layout. You can now go into Customize Journal Style and Custom CSS to tweak any Flexible Squares layout you want.


To set up a Flexible Square's layout in a community at Dreamwidth, you'll need to be in account for your community when you are "changing theme" and go through these steps in your community.

Let me know if you have any issues....
 
 
Mood: accomplishedaccomplished
 
 
 
Welcome to the Federation Starship SS Buttcrack!moony_blues on June 16th, 2013 09:17 pm (UTC)
You are a god-send. Worked perfectly for me!
Jill aka Josireesanwar on June 16th, 2013 09:40 pm (UTC)
Great! I'm so glad!
Judith Bartholomewjoyfulljunebugg on June 16th, 2013 10:48 pm (UTC)
You have no idea how happy you made me today! THANK YOU!!! (^ ▽ ^ @)
Jill aka Jo: SPN: Cowboy Deansireesanwar on June 17th, 2013 05:48 pm (UTC)
You are very welcome.
semisweetsoulsemisweetsoul on June 17th, 2013 06:06 pm (UTC)
Wow! That's a wonderful post. I'll find great use for it. Adding to mems for a future use. Thank you very much!

PS: My comment won't show, and I've tried many times. With my luck, it's going to appear as spam.

ETA: Yes, it's working!


Edited at 2013-06-17 06:07 pm (UTC)
Jill aka Jo: Hug: Stock drawing on fingerssireesanwar on June 17th, 2013 09:25 pm (UTC)
Thank you. I'm glad it is helpful.

I don't know what the issue is except that non-members have to input captcha. This is just an anti-spam measure that shouldn't hinder posting.
Fickle Whimsficklewhims on September 4th, 2013 12:08 pm (UTC)
Would you know if there's a way we can still make use of Dreamwidth modules/other features even if we use LJ layout codes?

Thanks so much. :D
Jill aka Josireesanwar on September 4th, 2013 07:12 pm (UTC)
I don't spend a lot of time at Dreamwidth so I'm not sure what you are referring too. Can you show me an example and where in Dreamwidth you find these?
Fickle Whimsficklewhims on September 9th, 2013 01:42 pm (UTC)
Ah, never mind, I think I've figured it out. Thank you very much! :D
Lost In Yaoi Eternity: Gleevessto on September 7th, 2013 09:00 am (UTC)
Why they just don't add a tab for Visual Editor (WYSIWYG or how was its name)! It is hard non experienced with html users like me to deal with all these commands.@_@

Sorry for the rant, thank you for the very helpful post and for the whole community!
星の雫: 嵐♥_♥kirameki_mei on October 30th, 2013 10:41 pm (UTC)
I LOVE YOU!!!!!
I was trying so hard to figure out how to change my dreamwidth layout *and I failed every time I tried*
Thank you so much for this tutorial!
Jill aka Jo: Misc: Firefly Calvin & Hobbssireesanwar on October 30th, 2013 10:56 pm (UTC)
You are so welcome.
my_cnnr: katemy_cnnr on June 26th, 2014 11:34 pm (UTC)
Worked brilliantly - not a lick of trouble. Thanks so much!
Jill aka Josireesanwar on June 26th, 2014 11:59 pm (UTC)
Great! You're welcome.
Christienbebentoo on September 11th, 2014 09:50 am (UTC)
It always shows be the same error whenever I re-try it.
Jill aka Josireesanwar on September 11th, 2014 09:14 pm (UTC)
What is the error?
(Deleted comment)
Jill aka Josireesanwar on November 15th, 2014 12:57 am (UTC)
Great! Happy to help.
 A lover of truth, a worshipper of freedom: A sleeping fairyhughville on April 18th, 2015 12:19 pm (UTC)
Thank you SO much for this! I'm going to use one of your layouts.
Jill aka Josireesanwar on April 22nd, 2015 09:02 pm (UTC)
Yay! Very cool.
hpttmodshpttmods on August 15th, 2016 06:16 am (UTC)
Thanks so much for this!

-josephinestone
Jill aka Josireesanwar on August 15th, 2016 10:18 pm (UTC)
You are welcome.
zero to goalnihonarashi on January 3rd, 2017 03:35 pm (UTC)
hello thank you so much for this. now im using ur layout with some color and fonts modified :D and now i want use this layout too in dw but there are some different even i already use your tutorial^^;
normally the layout
http://imgur.com/s0svOXy
http://imgur.com/d6wDpsP
but when i try to dw it become like this
http://imgur.com/dlhJnfT

the sidebar, calendar, pages summary sidebar cant be shown on the page. instead there's tag link on header. can you help me? thanks! :)
sacchanxdsacchanxd on January 4th, 2017 11:04 am (UTC)
Just imported nearly everything on to DW and now my journal style as well, thanks to you! Thank you very much <3
Jill aka Josireesanwar on January 6th, 2017 10:12 pm (UTC)
So welcome.
iLLa: DEARcrystilia_ixora on January 6th, 2017 03:29 am (UTC)
When I tried this my entry is unclickable..
What should i do? Thanks

http://crystilia-ixora.dreamwidth.org
iLLa: DEARcrystilia_ixora on January 6th, 2017 06:34 am (UTC)
I deleted everything and redo it again. Thank you. It works. 。^‿^。
Sassy.sarahmarie on January 14th, 2017 03:33 pm (UTC)
What does this mean?


S2 Compiler Output at Sat Jan 14 15:28:57 2017
Error compiling layer:

Compile error: line 8, column 1: Unknown token encountered while parsing layer: [TokenIdent] = body
S2::Layer, S2/Layer.pm, 68
S2::Compiler, S2/Compiler.pm, 27
Jill aka Jo: TL: New Librarians walkingsireesanwar on February 7th, 2017 08:02 pm (UTC)
Okay so I've been backing up to DW and I got this error but I suggest starting over and trying it again. That worked for me.
Sassy.sarahmarie on February 8th, 2017 03:53 am (UTC)
I found out what I was doing wrong! Thanks though!
Cassiecassie_faith on April 6th, 2017 03:32 am (UTC)
I'm getting this:

"Error
You've reached your maximum number of allowed layers."

Does my account need upgraded or something?
Jill aka Josireesanwar on April 17th, 2017 10:17 pm (UTC)
http://www.dreamwidth.org/customize/advanced/layers

Go to your layers and make sure you don't have a ton of different ones. Otherwise I would try again.
Jojustjo2u on April 8th, 2017 12:15 pm (UTC)
This worked brilliantly for me to put flexible squares on dreamwidth. Thank you! However on livejournal I used the custom CCS box to add a custom header. Do you know whereabouts in the coding should I add the custom text for that bit now?
Jill aka Josireesanwar on April 17th, 2017 10:16 pm (UTC)
Jo: Windowjustjo2u on April 17th, 2017 10:43 pm (UTC)
Hey there. Thanks for the reply. Yeah I had that already and have always used that for my header but if you follow step 14 of the tutorial above and paste the coding for flexible squares in there (as well as into the layer code section) I couldn't figure out where to add the custom header code into it. Ignored step 14 and just put the header code in and hey presto it worked.
phoenix1966phoenix1966 on April 17th, 2017 06:07 pm (UTC)
Thanks for going to all the hard work of sharing this with us.

I followed the steps and it worked perfectly, but I want to apply the Flexible Squares Layout to a comm I own and it only shows up when I search for it when logged in for my personal account. Is there a way to access this for a comm?
Jill aka Jo: Bones: overhead bones tablesireesanwar on April 17th, 2017 10:10 pm (UTC)
Yes, once you created the custom theme over at DW there is no need to do that step again. When you go to the customization of the comm just start at step 10 by finding that customized theme again and then put in your coding into the CSS section.
phoenix1966phoenix1966 on April 17th, 2017 10:41 pm (UTC)
I appreciate the quick response. Thanks very much for that.

I guess I wasn't making myself clear. "Flexible Squares" only shows up in my searches if I'm working as "phoenix1966". When I switch to the comm name user, it does not appear in the search field. so I can't apply it to the comm theme. I'm stumped.
Jill aka Josireesanwar on April 17th, 2017 11:29 pm (UTC)
1. Go to Customize Style http://www.dreamwidth.org/customize/options
2. Change to the Community you want.
3. Click Select Different Theme.
4. Click Your Customized Layers on the Left.
5. Select the Custom Flexible Squares option.
6. You can then click on Customize
7. Go to the CSS and you can put in your coding.
phoenix1966phoenix1966 on April 17th, 2017 11:56 pm (UTC)
Again, I thank you for your help.

The custom layer does not appear when I am working as the comm owner. Don't burn up more of your time over it, but here are two screen shots so that you can see what I mean (and that I'm not an idiot :))

http://ic.pics.livejournal.com/phoenix1966/64297108/36901/36901_800.jpg

and without the option

http://ic.pics.livejournal.com/phoenix1966/64297108/37332/37332_800.jpg
Jill aka Josireesanwar on April 18th, 2017 12:08 am (UTC)
That is really strange because I have several communities over there and I can see mine. I wonder why that would be.
phoenix1966phoenix1966 on April 18th, 2017 07:10 pm (UTC)
Just as an FYI, I stayed logged in as the comm user and recreated the custom layer in that account, which seemed to stick and I was able to customize the comm using your Flexible Square "fix".

Thanks again for your time with these tutorials.
Jill aka Josireesanwar on April 18th, 2017 09:24 pm (UTC)
Interesting. I don't think I had to do that but I'm going to put it in the tutorial just in case things have changed.

Thanks for letting me know that.
sexycazzysexycazzy on April 21st, 2017 08:00 pm (UTC)
Have decided to start cross-posting from DW, but never liked the layout over there, wanted to copy my LJ journal over to DW and your tutorial was a huge huge help! Thank you! :D
Jill aka Josireesanwar on April 24th, 2017 05:25 am (UTC)
I'm so glad!
jun_mjun_m on April 28th, 2017 06:19 am (UTC)
You helping me. Thank you so much for guideline.
Faerynautwinterlitwings on May 21st, 2017 01:33 pm (UTC)
Thank you so much for this! I have a question:

I am currently using your (absolutely gorgeous!) layout 99 - Impact. When I follow these instructions everything looks great except the header image is missing. I'm using the exact same code as on LJ (I added my own custom header image and header icon image). If you look at my LJ you can see it works great, but if you look at winterlitcity.dreamwidth.org, the header picture is missing.

What do I need to do to get it back?

Jill aka Josireesanwar on May 22nd, 2017 11:25 pm (UTC)
I don't know. I would recommend recopying the layout over to the Custom CSS. Maybe something happened to it when you did it the first time. I'm not entirely sure because I can recreate our layout over at DW https://theworkshop.dreamwidth.org/ without issue. So I would just try cutting and pasting the entire code again and see if that fixes it.
Faerynautwinterlitwings on May 23rd, 2017 12:08 am (UTC)
Thank you! I tried re-pasting the code and it worked like a charm. I'm so relieved because I just love this layout :D