Theme & Layout Change for Beginners

[sireesanwar.livejournal.com]

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.

Comments

[catcey.livejournal.com]

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.

[sireesanwar.livejournal.com]

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.

[catcey.livejournal.com]

No, I'm talking about the text beneath the header, the font is not what it is in your example.

[sireesanwar.livejournal.com]

That is weird. It looks right to me. Hmmm...

I think I discovered the problem. You don't have those fonts on your computer so you can't see them. So stupid. Okay so do you know how to put fonts into your system?

Font's Used:
http://www.dafont.com/black-jack.font
http://www.abstractfonts.com/font/11136
http://www.fontstock.net/7635/Anke-Print.html
http://www.dafont.com/king-cool-kc.font

Go to these links and download to one folder. You will have to unzip these.

Then inside the unzipped folder you will find TTF files. You was to drag and drop these into your

C:\WINDOWS\Fonts

The will automatically load and that should make you see them on your journal.

I didn't know it would do this and I'm going to see if there is coding to change that up.

[catcey.livejournal.com]

I had a bad feeling that was going to be the issue, but you gave me an easy fix, which I totally appreciate. You might wish I'd never joined the group! LOL At the very least I'll know the exact questions to ask next time. Although who knows, knowing me I'll just run into a whole new set of issues I'm clueless about.

It looks nice and pretty now, thanks so much. And thanks for the patience I know it must take to deal with me. :)

[sireesanwar.livejournal.com]

Well in the future any layouts with "special" fonts will have the fonts download links too. I never thought of that so while you may have been learning something from me... I learned something too which I highly appreciate.

I'm not wishing you hadn't joined the group. I've actually enjoyed the questions. Sometimes people who know what we are doing don't realize they need to explain things and you've really helped. Now I have several walk-throughs to help those who don't understand this lingo.

In fact, a friend who I usually go into her account to change her layout read one of the Tutorials I made because of your questions and changed everything on her own so it is all for the best and NEVER hesitate to ask because I started this place to help... well and to have some place to post my hobby.

[catcey.livejournal.com]

Well, cool then. There's always a bright side. :)

[sireesanwar.livejournal.com]

Yes there is!

[ddevotchka.livejournal.com]

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!

[sireesanwar.livejournal.com]

I'm so glad it helped and you are right the tiny icons aren't very important.

[scarletfbl.livejournal.com]

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): (http://tinypic.com)

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

(http://i36.tinypic.com/vsl4cp.jpg);
}

#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); }

CSS in Text Box

[scarletfbl.livejournal.com]

.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 (http://i36.tinypic.com/vsl4cp.jpg); } #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); }

[sireesanwar.livejournal.com]

I can't tell you I'm really great with the tiny pics but have you tried changing the
#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); }

URL to see if that is making things difficult for you.

[scarletfbl.livejournal.com]

Change the URL? Which one?

[whateversecretz.livejournal.com]

thank you so much!
This really helped me a lot.

[sireesanwar.livejournal.com]

Sorry. The tinypic url.

[sireesanwar.livejournal.com]

You are so welcome!

[verizonhorizon.livejournal.com]

You are very helpful and knowledgeable! My question is, now that I have switched to the Flexible Squares layout and customized it in CSS to your Star Trek (command) layout (#38a) successfully, how can I make the width of the entries bigger? I mostly write fic, and it is too tiny! I would rather have less sidebar and more text area. I don't even need to see much background. But when I tried fiddling with the widths of the content and entries, I made a mess. Thank you for any help you can give on making my entry text area bigger.

[sireesanwar.livejournal.com]

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 (http://community.livejournal.com/layout_lounge/12705.html).

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.

[tiggeratl1.livejournal.com]

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?

[sireesanwar.livejournal.com]

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.

[synnerxx.livejournal.com]

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!

[sireesanwar.livejournal.com]

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.

[synnerxx.livejournal.com]

Ah, okay. Thank you for the help! You're a lifesaver, or an ljsaver as it may be. :D

[synnerxx.livejournal.com]

Obviously, I am an idiot, so could you please fix this mess for me?