Log in

No account? Create an account
10 December 2008 @ 11:09 am
Theme & Layout Change for Beginners  
We all have to begin the learning process somewhere. Don't feel bad about it because it took me a while to learn it too. I make mostly Flexible Squares layouts so I'm going to teach you to switch from what you are currently using (say Smooth Sailing or some such) to Flexible Squares and put in a new layout!

1. Go to Select Journal Style. It is going to tell you what your current layout theme is..

2. If it does not say Flexible Squares we will have to change it (if it does go to step 4).  Below you will see a bunch of Featured themes. We need to click for All Themes. Change the theme to whatever theme is needed for your layout (ie Smooth Sailing, Expressive, etc).

3. You may have to hit the next arrows until you find a Flexible Squares Theme (below I'm showing your two FS themes). Once you find a Flexible Square theme click the apply theme. I tend to use Autumn and sometimes this does effect the coding so for best results just use the Autumn layout.

4.  Your Current Theme at the top should now say Flexible Squares. You are next going to want to click "Customize your theme" under more options. (I usually work under the Autumn Flexi Squares if that helps. For my Smooth Sailing layouts I usually use Army Attire.)

5.  It will automatically take you to the Display section. Go down to Custom CSS and click.

6. On the Custom CSS page for Flexible Squares Themes you will be asked 3 questions. Mark them all NO. Then you are ready to insert the coding for one of Layout Lounge's Flexible Square Layouts. I would Save Changes now just to be safe. But we aren't done.

7. There are several different places to change stuff in the code you might need.
Background: Behind the journal
Header Image
Tiny Icons
8. Changing the background image is simple. At the top of the code under the BODY section there is a "background-image: url(BACKGROUND URL);": You will insert your direct image link into the ( ).

9. Header image is also pretty easy. Near the bottom of the coding you will find a part called HEADERIMAGE. You will put the direct image link into the () of " background-image: url(HEADER URL);". Above this code there is also height and width, make sure you match these dimensions to your header image.

10. Tiny Icons: Going through the Code you will find a section called SECTION: Currents, tags, comment links, direction under this you will see .ljtags {. In this coding there is background: url(TAGS IMAGE URL) no-repeat center left for a image that will sit next to your tags on your jounral posts. You will put the Image Direct Link for your tiny icon in the ( ).

Then you will scroll down to SECTION: Tiny Icons. Under this is the Subject Protected, Subject Private, LJ User, LJ User, LJ Comm, Location, Mood and Music codes. Each has a background: url(); where you will put the Direct Image Link in the ( ).

11. Make sure you don't lose any of the ( ) or ; in the coding where you are adding image links. Once done with all this you can click Save Changes. Go to your journal. It should look similar to the preview.

12. If the layout I made has special fonts used it will be indicated on the layouts page and all fonts can be downloaded at my Font Tutorial page.

If you are still having problems I can help you by going into your account to fix things. It would require you to change the password temporarily for me. I would never change or mess with anything you don't want me too and it is a last resort. Comment and we can decide together whether you need such extreme help.
catcey: Ornamentscatcey on December 11th, 2008 03:22 am (UTC)
Thanks for the walk through. The text doesn't match though. And since I never tag and still don't quite get that part I left it alone.
Jill aka Jo: Movie: Alicesireesanwar on December 11th, 2008 09:50 pm (UTC)
You are talking the appearance of purple text on your journal. Did you color this text when making the post? Because I'm thinking if you edited the post and highlighted the purple text and chose the Automatic color option it would change to red once saved. I learned this not too long ago in my own journal... made me very frustrated until I realized I did it to myself.
(no subject) - catcey on December 12th, 2008 04:10 am (UTC) (Expand)
(no subject) - sireesanwar on December 12th, 2008 06:14 pm (UTC) (Expand)
(no subject) - catcey on December 12th, 2008 11:06 pm (UTC) (Expand)
(no subject) - sireesanwar on December 12th, 2008 11:45 pm (UTC) (Expand)
(no subject) - catcey on December 13th, 2008 03:43 am (UTC) (Expand)
(no subject) - sireesanwar on December 15th, 2008 06:48 pm (UTC) (Expand)
ddevotchkaddevotchka on September 8th, 2009 01:27 am (UTC)
This was a great help to me, so thank you thank you so much! I don't understand the tiny icon bit but I didn't think it matters so I skipped that. But thank you!
Jill aka Jo: SPN: Eye of the Tigersireesanwar on September 8th, 2009 06:12 pm (UTC)
I'm so glad it helped and you are right the tiny icons aren't very important.
Shoneéscarletfbl on November 7th, 2009 01:11 am (UTC)
Hi! I was wondering if you could help me with my tiny icon problem.

You see, I got a custom layout by refuted, and it's awesome, but I'd like to change my community tiny icon to something other than the coffee cup because I sometimes get confused over what's what when every username and comm has the same tiny icon.

Example (meishali is a user, while epic_recs is a comm): Image and video hosting by TinyPic

I have a plus account, and I'm wondering if maybe it's the fact that I don't have a paid account that preventing me from changing things. :/

Here's the part of the CSS I've altered:

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i37.tinypic.com/2lbp5if.jpg);
padding: 16px 17px 2px 2px !important;

.ljuser a:hover b {
color: #9C9C9C;
background: transparent;

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-color: transparent;
background-image: url(http://i37.tinypic.com/2lbp5if.jpg);
padding: 16px 17px 2px 2px !important;

.ljuser:hover img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-image: url(http://i37.tinypic.com/t5gevc.jpg);

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-color: transparent;
background-image: url(http://i35.tinypic.com/99i8fm.jpg);
padding: 16px 17px 2px 2px !important;

.ljuser:hover img[src="http://p-stat.livejournal.com/img/community.gif"] {background-image: url


#ljuser_row img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{ width: 0; height: 0; padding: 0 16px 13px 0; background:
url(http://i37.tinypic.com/2lbp5if.jpg); }
Shoneéscarletfbl on November 7th, 2009 01:13 am (UTC)
CSS in Text Box
(no subject) - sireesanwar on November 7th, 2009 01:30 am (UTC) (Expand)
(no subject) - scarletfbl on November 7th, 2009 01:46 am (UTC) (Expand)
(no subject) - sireesanwar on November 9th, 2009 09:06 pm (UTC) (Expand)
(no subject) - curena11 on November 13th, 2016 02:22 am (UTC) (Expand)
(no subject) - sireesanwar on November 15th, 2016 01:25 am (UTC) (Expand)
Shira Annawhateversecretz on November 7th, 2009 06:09 am (UTC)
thank you so much!
This really helped me a lot.
Jill aka Josireesanwar on November 9th, 2009 09:18 pm (UTC)
You are so welcome!
(Deleted comment)
Jill aka Jo: ST: Spocksireesanwar on February 8th, 2010 10:14 pm (UTC)
You could turn off the custom entries. That way people could into your posts and see the generic set up of a livejournal post?

That is explained here.

If you still want the layout look I could make some small adjustments to the layout to make the entries a little bigger and the sidebar a little smaller but there isn't too much room for adjustment.
tiggeratl1tiggeratl1 on February 16th, 2010 12:59 am (UTC)
This community is AWESOME!! Thanks for setting this up!
It's like "customizing lj layouts for dummies" which I totally need.

I can't get my background to show up. I've checked it several times to make sure I didn't accidentally lose a ) or ; and everything seems fine. I was wondering if maybe I've saved it too large. Is there a certain size px that backgrounds should be saved as? Should I be matching the background size to my backgrounds dimentions like I did with the header?
Jill aka Jo: Lost: Not Alonesireesanwar on February 16th, 2010 11:06 pm (UTC)
You are welcome.

I would need to see the problem but I'm guessing it is more liking a link issue. If the background is really big it might show up strangely. But the background-repeat: repeat; part of the code should help small images be seen well and larger images should work too. If you put the code into effect I can take a look and see what the problem is.
Lady Strangesynnerxx on February 23rd, 2010 12:48 am (UTC)
Okay, so I read through this whole thing, and it does make snese to me, except for one part. There's no text all in my Custom CSS box to edit. How do I fix this because everything on my lj just changed to plain white with nothing on it. Help, please!
Jill aka Jo: ST: Red Shirtsireesanwar on February 23rd, 2010 01:17 am (UTC)
What I mean by edit the text in the Custom CSS is if you have a coded layout you want to use. You can look though the layouts I have available and use one of those.

The reason there is nothing on your lj is because it is waiting for that layout coding to be put into the CSS box.
(no subject) - synnerxx on February 23rd, 2010 04:33 am (UTC) (Expand)
(no subject) - synnerxx on February 23rd, 2010 04:51 am (UTC) (Expand)
(no subject) - sireesanwar on February 23rd, 2010 07:33 pm (UTC) (Expand)
(no subject) - synnerxx on February 23rd, 2010 08:56 pm (UTC) (Expand)
VesaSeiravesaseira on August 19th, 2010 05:27 am (UTC)
Thanks for this tutorial. :) I was doing things all wrong until I found your tutorial.
Jill aka Jo: Stock: Flowersireesanwar on August 19th, 2010 05:12 pm (UTC)
I'm so glad this could help you. Feel free to spread the word.
dis_netisdis_netis on November 24th, 2010 01:34 am (UTC)

This community has been a bit of a godsend, as I had no idea where to start with layouts and yours are beautiful and your instructions clear. However, I've finished my layout and its all lovely etc., but when I click into to read an entry now the adverts are giant and you can't read any text as its in a thin strip across the page. Do you know what I've done wrong and how I might fix it? I hope you can help! Thanks!
Jill aka Josireesanwar on November 24th, 2010 08:01 pm (UTC)
I'm glad I've been a help.

There are advertisements in your layout. Hmmm.... since I'm a paid member, I didn't realize this would be an issue. Let me look into it. I might be able to hide them for you or move them.
(no subject) - sireesanwar on November 24th, 2010 09:28 pm (UTC) (Expand)
(no subject) - dis_netis on November 24th, 2010 09:37 pm (UTC) (Expand)
(no subject) - sireesanwar on November 24th, 2010 09:39 pm (UTC) (Expand)
(Deleted comment)
Jill aka Jo: Friends: Heads in the doorsireesanwar on November 17th, 2011 12:31 am (UTC)
Are you still having problems? I've taken a look over at your LJ and it appears to be fine. Maybe I'm not seeing what you are.

(Deleted comment)
(no subject) - sireesanwar on November 17th, 2011 08:42 pm (UTC) (Expand)
(Deleted comment)
(no subject) - sireesanwar on November 18th, 2011 07:45 pm (UTC) (Expand)
nadiajundayamachan on July 31st, 2012 03:45 am (UTC)
oh my gosh thank you so much for your help...
i'm a beginner at lj so i don't know what to do to change my layout but thanks to you because you explain it really detail and easy to understand ^^
Jill aka Jo: GOT: Valarsireesanwar on July 31st, 2012 05:34 pm (UTC)
I'm so glad I could be of help.
eikkibunnyeikkibunny on January 4th, 2013 06:33 pm (UTC)
You are such a kind person, do you think you could help me and go into my account? ^^
Jill aka Jo: Chuck: Don't Panic Be Awesomesireesanwar on January 4th, 2013 07:56 pm (UTC)
I could but to make it easier I can just give you coding. What seems to be the issue besides the lack of layout.
(no subject) - eikkibunny on January 6th, 2013 03:13 am (UTC) (Expand)
(no subject) - sireesanwar on January 7th, 2013 11:15 pm (UTC) (Expand)
(no subject) - eikkibunny on January 8th, 2013 01:09 am (UTC) (Expand)
(no subject) - sireesanwar on January 8th, 2013 11:16 pm (UTC) (Expand)
aidos_dg on February 6th, 2013 11:36 am (UTC)
Changing of navigations

How can i change the words of the menu navigations?
For example the standard navigations are recent entries, archive, friends and user info. if i want to change the category is it possible?
bangel_4e: delena-hugbangel_4e on March 10th, 2013 06:11 pm (UTC)
Thank you so much. This layout is incredibly beautiful.
I just used it for this comm
I gave you credit in the profile page and will also give it when I make a new post.

Could I just ask a question?
Could I maybe switch the "rules" button to the "profile" button?

Edited at 2013-03-10 06:19 pm (UTC)
Jill aka Jo: BSG: By Your Commandsireesanwar on March 12th, 2013 12:19 am (UTC)
Great. Enjoy it.

Sure. That isn't under my control though. You can find that by going here (http://www.livejournal.com/customize/options.bml?authas=lovebites20in20&group=text) and change it in the navigation section.
(no subject) - bangel_4e on March 12th, 2013 04:13 pm (UTC) (Expand)
(no subject) - sireesanwar on March 12th, 2013 10:52 pm (UTC) (Expand)
southrnbygrace: Olicity 2southrnbygrace on May 27th, 2013 07:14 pm (UTC)
I'm a newbie to changing these things, but I thought I followed the directions. It doesn't appear that the header is showing up and the page seems way stretched out. Any suggestions?

Also, when I try to view the font tutorial, it says access denied.

Edited at 2013-05-27 07:15 pm (UTC)
Jill aka Jo: TVD: Carolinesireesanwar on May 28th, 2013 08:33 pm (UTC)
The font tutorial has downloads so it is a members only type thing. That is why you don't have access... sorry but I only want members having access to it.

You made sure you have changed the theme to a Smooth Sailing theme right?

For the layout you are using you want to steps 1 through 3 only changing it to Smooth Sailing. I usually use the Army Attire theme.... copy the coding you have in the CSS box before changing to Smooth Sailing.

If this isn't the problem let me know.
(no subject) - southrnbygrace on May 29th, 2013 12:14 am (UTC) (Expand)
(no subject) - sireesanwar on May 29th, 2013 12:24 am (UTC) (Expand)
(no subject) - southrnbygrace on May 29th, 2013 12:40 am (UTC) (Expand)
(no subject) - sireesanwar on May 30th, 2013 07:45 pm (UTC) (Expand)
(no subject) - sireesanwar on August 19th, 2013 10:05 pm (UTC) (Expand)
(no subject) - southrnbygrace on August 20th, 2013 12:30 am (UTC) (Expand)
(no subject) - sireesanwar on August 22nd, 2013 09:59 pm (UTC) (Expand)
southrnbygrace: So Close (Angel)southrnbygrace on May 31st, 2013 12:33 am (UTC)
I'm in no hurry. And if it ends up taking up too much time, don't even worry about it.
jungdaedreamjungdaedream on June 22nd, 2013 10:05 pm (UTC)
Hello um, I have a question. If you see my custom layout, there's the top and bottom bar in blue which is a remnant of the original flexible squares layout and I can't get it to go away ;; much like the purple top and bottom horizontal bars on your LJ. It's so ugly and frustrating, help!
jungdaedreamjungdaedream on June 22nd, 2013 10:08 pm (UTC)
Changed it to autumn flexible squares and retried so the bars are orange ; n ;
(no subject) - jungdaedream on June 22nd, 2013 10:27 pm (UTC) (Expand)
(no subject) - sireesanwar on June 24th, 2013 11:16 pm (UTC) (Expand)
신 혜림bomchii_97 on September 27th, 2013 06:09 pm (UTC)
Hi! Thank you so much for the wonderful layouts. it's really really pretty and pleasing. I would just like to ask if it's possible to change the color of the italicized words. Mine has a dark red color and it contrasted with the black background, it's quite hard to read. Can I change it? If so, how? Thanks so much...
Jill aka Jo: TP: I'm Finishedsireesanwar on September 27th, 2013 06:43 pm (UTC)
I'm pretty sure that it is at the beginning of the coding as

i { color: #??????; }

Where is this layout?
(no subject) - bomchii_97 on September 28th, 2013 01:34 am (UTC) (Expand)
(no subject) - sireesanwar on October 1st, 2013 09:55 pm (UTC) (Expand)
(no subject) - bomchii_97 on October 2nd, 2013 12:39 pm (UTC) (Expand)
(no subject) - sireesanwar on October 3rd, 2013 06:03 am (UTC) (Expand)
lmangellmangel on December 28th, 2013 12:35 am (UTC)
Hello there
I've tried to getting into making my Live Journal more lively a couple of times, but I have ended up giving up every time, I don't know why but I just can't seem to figure it out and I thought I was usually okay at this sort of stuff.

Using this I did get a little further but, when I try and customize the CSS, there is no text for the pre-made layout in the box, thus I cannot added changes to it, am I doing something wrong?
Jill aka Jo: Sanct: Helen Magnussireesanwar on January 5th, 2014 05:42 am (UTC)
Re: Hello there
Here is my suggestion to you. Don't start from scratch. Take a layout (you can use one of mine) and start changing things. Make little changes, save it and then see what happens. Not only will you start learning things about the coding but you will have something to start with.

This is how I got into layouts. I used a friends layout coding and started adding, changing, and removing certain things. Eventually, I started to understand the things I was looking at. Also, I rarely start from scratch when making a layout.

I tend to find something close to the image in my head and build on it.

Does that help?
pinkportraitpinkportrait on January 30th, 2014 04:14 am (UTC)
It doesn't say how to credit though :(
Jill aka Josireesanwar on February 4th, 2014 01:14 am (UTC)
You can put the below coding in your free text on your sidebar or in your profile.
(no subject) - pinkportrait on February 6th, 2014 04:07 am (UTC) (Expand)
facedancers: Drankfacedancers on April 6th, 2014 03:41 am (UTC)
Hi, I was hoping you could help me with a coloring issue I'm having. I was wondering if it was possible to change the color of the text "post comment" and "more options..." that you see when ever you type in the comment/reply box. I know you can change the background color of the boxes but I don't rly see a place in the code where I could change the text.
Jill aka Jo: Bones: Brennan squaresireesanwar on April 6th, 2014 05:40 am (UTC)
You're talking about the actual buttons like as I type this comment and I'm going to "post comment" or choose "more options" where it takes me to a screen that then gives me the ability to "preview" my comment?

I went to your journal and it appears there is coding for this under "input".

I think this is what you are referring too but if not let me know.
2hachi2hachi on July 4th, 2014 12:03 am (UTC)
thank you so much for the tutorial ^_^d
Jill aka Josireesanwar on July 4th, 2014 12:36 am (UTC)
You are very welcome.
chibineko26chibineko26 on December 23rd, 2014 03:53 pm (UTC)
thank you so much for this wonderful layout! i love it! ^^ oh and the tutorial is very easy to understand! ^^
Jill aka Jo: Outlander: Jamie and Claire close togethsireesanwar on December 23rd, 2014 08:55 pm (UTC)
Yay! I'm so glad! Enjoy!
jennifer_teddy: mariah careyjennifer_teddy on January 23rd, 2015 09:21 am (UTC)
Hi thanks so much for your wonderful page but could you help me?
Hi, I adore your page its wonderful and I love your layouts! But I have changed my theme to the one you said and pressed no on all boxes but there is no coding the box at all, it is just blank? And I tried adding a header image to the blank space and my page went crazy lol!

Thank you if you can help me!
Jill aka Josireesanwar on January 25th, 2015 06:42 am (UTC)
Re: Hi thanks so much for your wonderful page but could you help me?
Oh no. Okay so you added the coding after you changed the layout and marked all those questions no?

Which coding did you want to use? This will help me figure out what went wrong.
(Deleted comment)
(Deleted comment)
(Deleted comment)
(no subject) - sireesanwar on February 12th, 2015 07:09 pm (UTC) (Expand)
(Deleted comment)
(no subject) - sireesanwar on February 12th, 2015 07:26 pm (UTC) (Expand)
(Deleted comment)
(no subject) - sireesanwar on February 12th, 2015 07:33 pm (UTC) (Expand)
(Deleted comment)
(Deleted comment)
(no subject) - sireesanwar on February 12th, 2015 07:39 pm (UTC) (Expand)
(Deleted comment)
(no subject) - sireesanwar on February 13th, 2015 12:44 am (UTC) (Expand)
(Deleted comment)
(no subject) - sireesanwar on February 13th, 2015 08:13 pm (UTC) (Expand)
(no subject) - sireesanwar on February 12th, 2015 07:28 pm (UTC) (Expand)
(Deleted comment)