UPDATES

10/22/06 I'm so sorry I haven't updated in FOREVER, school and friends have consumed me. I added countless questions to the FAQ today. If your question isn't answered, comment me. Thank you to all who subscribed, and once again I'm sorry that I haven't updated in over a month. I can't guarantee that I will update every day, but I will update at least once every month. 9/1/06 Sorry for the lack of updates! I've been so consumed with school. I added more to the FAQ today. I've been getting some questions like 'I don't get it. Help me!' Well, I need to know what you don't get, or else I don't know how to help. 8/4/06Today I've changed a lot about the site... there's a new layout, if you haven't noticed, I added more to the FAQ and got a new song. Hope you like all the changes! 8/1/06I got a button today! Thank you Xo_Buttttons_oX! If you love me, link me. 7/25/06I'm settled in my new house, and ready to answer any questions. 7/18/06I'm moving. The packers are going to pack up the computer soon, so I won't be able to update or answer questions for a week or so. I hope you understand? 7/12/2006I added more to the FAQ today. Thanks for all the subscribers!!! Wow!! 7/7/2006Well, no one's been commenting or subscribing much. Are there no more questions? No more viewers? 7/3/2006Happy fourth of July!! 6/16/06I will be gone for about ***5 days.*** I'm taking a vacation... so I won't be able to add to the FAQ or update until the 21st. But still keep commenting and subscribing anyways, thanks!!!!!!!!!! 6/14/06Wow, lots of people have been coming here and asking questions and subscribing. Thank you! Well, I'm going to add more to the FAQ in a minute. EVERYONE's questions will be answered there... thanks. By the way, 46 subscribers... only 10 days after I've remodeled this site... thanks. Keep subscribing&&commenting! 6/10/06Well, I'm about to add more to the FAQ at the bottom of this site. I've answered everyone's questions in the FAQ that's commented so far. And later today I'm going to make more of those edited stylesheets. Subscribe and commet if I'm helpful! =] 6/5/06Welcome to my layout tutorial site! I hope I'm helpful. If you think you're pretty good at making layouts you learned how to make from here, you can go to my layout contest site at http://www.xanga.com/cute_contests_dude 

I have

147

subscribers so far! WOW, Thank you!!

If you love me, link me!

Check out www.xanga.com/oohlala_iconz -it's me!

Welcome to how_to_make_layouts_bykirsten. I made this site for all you beginners that want to know how to make a layout. But please know that layout making isn't for everyone.

Alrighty- I'm going to guide you through the steps of layout making. If your confused or anything commet me and I'll try to clear it up for you, but if you don't get it please don't get all pissy at me.

FIRST STEP- STYLESHEETS

In order to make a layout, you need something called a stylesheet. A stylesheet is all those confusing letters and numbers that you put in your Header when you're putting in a layout. Different stylesheets make different layouts. Here are a few layouts. Make a note of the one you like. I'll show you how to use the stylesheet in a few.

001- Icons at the top and background.

002- Just a background

003- Large background image with title

004- Title, background and blinky things

005- Just a title <<------------ This is the easiest layout to make- I strongly recommend this one to beginners

006- Photograph at top and blinky things

All of those are only *some* of the choices of the type of layout you can make. Choose one you like. But don't do anything yet!!!!

SECOND STEP-

BACKGROUND IMAGES

Did you notice that almost all the layout stylesheets up there have background images? This is how to get them. Go to a graphics site, like http://www.xanga.com/gorgous_xx_bkgrounds, http://www.xanga.com/flippydippy_backgrounds or http://www.xanga.com/perception_fx. Find a background that you like on any of these sites. Then, right click the graphic and go to Save Picture As... . Save it to your Pictures folder. You with me????? Now, go to an image hosting website, such as www.photobucket.com or www.tinypic.com . Upload your graphic/background on either one of these sites. Then you can use the URL for your background for the layout. But not now. Don't do anything yet!

THIRD STEP- HEX CODES

Don't freak out. Hex codes probably sounds too confusing to you, but it's nothing, really. Hex Codes are a six-numbered code for a color, like 00bfff. Every color has its own hex code. You can choose from billions of colors to create a layout! The hex code site is www.xanga.com/hexcodes . When you are making your layout, and it asks for the colors you want, you fill in the hex code for your chosen color. Pretty nice, huh?

FOURTH STEP-

FILLING OUT A STYLESHEET PT. 1

When you find a stylesheet you like, copy and paste the whole thing onto a Microsoft Word Document. It depends on the stylesheet, but it could take up between three pages and seven. Yes, it does take a long time to fill out the stylesheets when you first start. But the more layouts you make, the less time it takes you to fill these out, cuz you actually know what you're doing.

FIFTH STEP-

FILLING OUT A STYLESHEET PT. 2

Below is the stylesheet for this layout. I edited it myself so you know exactly what to do and where. So go ahead & copy and paste this onto a Microsoft Word Document. It should take up about five pages. & Go ahead and get started!

*/ Here, put your layout site name and the link to it so people know the layout was made by you. /* <P>Layouts by Kirsten: <A href=http://www.xanga.com/lays_by_kirsten =_new>Layouts by Kirsten </A></P> */ This is where the title goes. So erase all the hex codes and words and replace them with your own /* <FONT style="FONT-WEIGHT: regular; FONT-SIZE: 35pt; COLOR:9999ff; LINE-HEIGHT: 20pt; FONT-FAMILY:times new roman ; LETTER-SPACING: -5pt" </FONT><BR><FONT style="FONT-WEIGHT:times new roman; FONT-SIZE: 30pt; COLOR: 9999ff; LINE-HEIGHT: 20pt; FONT-FAMILY:times new roman; LETTER-SPACING: -3pt"> You know she’s your best friend when she memorized your phone number but she can’t remember her own <3 </head></font><br><br> */ Again, put in the link to your layout site and your layout site name. /* <a href=http://xanga.com/lays_by_kirsten!! target="_blank">lays_by_kirsten</a><br /> <!-- End Script by Blogring.net --> <style type="text/css"> /* <span class='searchlite'>paradise</span> Stylesheet */ /* by kirsten (xanga.com/lays_by_kirsten) */ /* <a href='http://BlogRing.Net' target='_blank'>http://BlogRing.Net</a> */ */ This is where hex codes come in handy. What do you want the background color to be? Fill it in with your answers. /* body { background-color: #ffffff; background-image: none; background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-color: #ffffff; */ This is where you can edit the scrollbars. Stick with light colors, like white or gray. It looks better- but don’t make all the colors the same color! If you do it looks like a border, not a scrollbar. /* scrollbar-arrow-color: #00ff00; scrollbar-track-color: #ffcc00; scrollbar-shadow-color: #ff66cc; scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ff9933; scrollbar-darkshadow-color:#ff99cc; scrollbar-3dlight-color: #ffffff; } .left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p { /* You know when you make a new weblog entry, there is a certain font it is set to? Well this edits it, choose a color, font, and size /* /* edits main text */ font:normal 12px times new roman; line-height:16px; color:#ff3399; letter-spacing:0px; text-align:justify; } table.footer TD { /* this makes the footer at the bottom centered */ /* leave it alone unless you know what to do*/ text-align: center; } .left B, { font: bold 12px times new roman; color: "#ff3399"; line-height: 16px;} .blogbody b, .standard b, p b, strong { /* Have you had one of those layouts where when you make the font bold, the color changes? This edits that- make sure you choose a different color than the one you put up there /* /* edits bolded text in your entry */ font-weight: bold; color: #ff9900; } div.blogheader, .caption { /* You know the dates you see over your weblog entries, this edits them. /* /* edits the dates */ font-family: times new roman; width: 325px; text-transform:lowercase; font-size:28px; line-height:18px; font-weight:regular; height: 1px; color: #ff9900; letter-spacing:-3px; text-align: center; background-color: #ffffff; /* This edits the borders around the dates. /* BORDER-left: #99ff00 5px solid; BORDER-right: #ff9900 5px solid; BORDER-bottom: #ff6699 5px solid; BORDER-top: #9966ff 5px solid; } a:link, .footernav.link, a.footernav:link, a.footernav:active { /* This edits all the links on your layout, like your subscriptions, look&feel, etc. /* /* edits all links */ color:#ff3366; text-decoration: none; font:normal 12px times new roman; line-height:16px; } a:visited, a.footernav:visited, { /* Make these links a different color than the normal links. /* /* edits the links that the user has visited */ color: #ff3300; text-decoration: none; font:normal 12px times new roman; line-height:16px; } a:hover { /* Edit to your liking. /* /* edits when user mouseovers the links */ color:#ff3366; text-decoration: underline; border-bottom: 2px solid #66ff00; font:regular 12px times new roman; line-height:16px; letter-spacing:0px; text-align:justify; } input, select, textarea, .textfield, .button { /* this edits the buttons, dropdowns, etc. */ border: 3px solid #ffcc00; font:normal 12px times new roman; background-color:#ffffff; letter-spacing:0px; color: #ffcc00; } table.left { /* this edits the menu module */ border: 5px solid #ff3366; width:160px; background-color:#ffffff; } table.blogbody { /* this edits the other the place where the blog is */ border: 5px solid #ff9900; background-color: #ffffff ; width: 325px; font:normal 12px times new roman; line-height:16px; color: #ff3399; } table.left th { /* on your menu module, this edits the title part of it */ /* like BLOGRINGS, POSTING CALENDAR, etc */ background-image: none; font: bold 12px times new roman; color: #ff3399; border: none; background-color: #ffffff; BORDER-left: #ff3399 5px solid; BORDER-right: #ff9900 5px solid; BORDER-bottom: #66cc00 0px solid; BORDER-top: #9999ff 5px solid; } table.left TD { /* on your menu module, this edits the body part of it */ background-image: none; background-color: #ffffff; BORDER-left: #ff3399 5px solid; BORDER-right: #ff9900 5px solid; BORDER-bottom: #66cc00 px solid; BORDER-top: #9999ff 5px solid; font:normal 12px times new roman; line-height:16px; color: #ff3399; } table.search TD, table.search, table.announcements { /* border of search bar (if you have it) */ background-color: #ffffff; border: 1px solid #ff9900; } table.search TD, table.announcements TH { /* this should be left alone */ /* unless you know what to do */ border: 1px solid #66cc00; } table.navigation, table.main, table.footer { /* the width of your blog with modules */ width: 500px; } hr { /* This edits just some line at the bottom, it’s not very important. /* /* horizontal divider */ border: 1px solid #66cc00; } </style> /* This edits fun blinky boxes! Fill them in with the colors of your choice, but don’t do anything else. /* <!-- Blink Boxes : Provided by Blogring.net --> <script language=JavaScript> <!-- //blink boxes - xanga.com/add_ons //by sean f http://www.xanga.com/seanmeister //fixed to work with new security measures by //hotaru_01 http://www.xanga.com/hotaru_01 // customize by changing the values below // these are the various colors, in quotes, seperated by commas var blinkColors = new Array("#ff3399","#ff9900,"#66cc00"); /* < ----- This is where you fill in the colors /* // the border color var blinkBorderColor = "#ff9900" // the border width, in pixels var blinkBorderWidth = 4; // the # of rows var blinkRows = 1; // the # of columns var blinkCols = 5; // the width of the entire box, in pixels or % var blinkWidth = 500; // the height of each row, in pixels var blinkRowHeight = 10; // speed of blinking, in milliseconds var blinkRate = 8; // do not edit below this line st=setTimeout; document.write("<table id='blinkbox' width='" + blinkWidth +"' border = 0 cellspacing='" + blinkBorderWidth + "' cellpadding=0 bgcolor='" + blinkBorderColor +"'>"); for (r = 0; r < blinkRows; r++){ document.write("<TR>"); for (c = 0; c < blinkCols; c++){ document.write("<TD height='" + blinkRowHeight + "'></TD>"); } document.write("</TR>"); } document.write("</table>"); // ... and this makes it blink function blinkIt() { changecell = Math.floor(Math.random() * (blinkCols * blinkRows)); changecolor = Math.floor(Math.random() * blinkColors.length); bb = document.getElementById("blinkbox"); bbtd = bb.getElementsByTagName("td"); bbtd[changecell].style.backgroundColor = blinkColors[changecolor]; st('blinkIt()', blinkRate); } blinkIt(); //--> </SCRIPT> <!-- End Script by Blogring.net --> <!-- begin code provided by createblog.com --> <style type="text/css"> .blogbody u, .standard u, p u, u { font-weight: lighter; color: #ff3399; border-bottom: #66cc00 2px;} </style> <!-- end code provided by createblog.com -->   

More of these edited stylesheets coming soon.  

Got any questions about layout making?? Commet me here asking nicely your question, and I'll probably answer.

FAQ

Still confused?? Just read the FAQ below! The questions are organized by topic. If your question isn't answered, you can comment me on the entry above asking nicely your question.

FAQ

Stylesheet Questions

1. Q-How do you make a stylesheet?

2. Q- I don't get the whole Microsoft Word thing. What do I do again?

3.  Q- How do you know what to change on a stylesheet?        

A-A stylesheet is kind of like a form. Anything after a colon (;), you have to change. See the last question in this section.

4. Q- Can you make a layout without using a stylesheet?      

A- No. You have to use a stylesheet.

5. Q- How do you get a stylesheet?     

A- You could go to a layout site, find a layout you like, and use that stylesheet. Or you could go to a layout tutorial site like mine and find some beginner stylesheets there. You could even go to your personal xanga and use your layout's stylesheet.

6. Q- What do you do after you copy and paste the code onto a document?   

A- You begin filling out the stylesheet. Replace everything after the semicolon (;) or colon (:) with what you want in the layout. Remember- you don't have to replace everything- but you can't leave it all the same. Here's an example. Everything I need to replace is in red.

A- It doesn't matter. I use Photobucket, I think it is easier and less confusing- I would recommend that, but it doesn't matter, they are both pretty much the same.

Displaying the Layout Questions

1. You know the thing you see on layout sites, that has a link to the layout? How do you get that?

2. Q- How do you get the scrolly box thing that's below?
A- Just highlight the whole box. Right click and click 'copy'. Then go to wherever you want it, delete everything in this box, and put in whatever you want.

Highlight this whole box here, right click and go to where it says 'Copy'. Then paste it wherever you want, delete everything it says in here& write whatever you want.

---

Adding Stuff to Layout Questions

 

1. Q- How do you make a layout without the date?

 

A- You'd have to get a certain stylesheet-- if you can't find one without the date, you'll have to find the code for it and put it in the stylesheet- I'm sure the code is on http://www.xanga.com/allthebestcodes.

---

2. Q- How do I make a layout with extra modules (boxes)?

A- You'd have to find a stylesheet for it. If you can't, here's the code. Alert all your layout viewers to put it in their website stats. Just add it onto whatever layout you want.

<!-- Script by Paul Chen --><td id="customRight" style="display:none" vAlign="top" width="200"><!-- module:end --><!-- module:start --><table class="left" cellSpacing="0" cellPadding="4" width="100%" border="1"><tr><th class="left" vAlign="top" align="center"><b>About Me &hearts;</B></th></tr> <tr><td class="left" vAlign="top">Write About You Here Include Your<strong> Name </strong> <i> Age </i> <u> Intrests </u> and more!! have fun &hearts;<br></td></tr></table><br/><!-- module:end --><!-- module:start --><table class="left" cellSpacing="0" cellPadding="4" width="100%" border="1"><tr><th class="left" vAlign="top" align="center"><b>Music</b></th></tr> <tr><td class="left" vAlign="top">Put a Playlist or Say What Is Playing on your Xanga<br></td></tr></table><br/><!-- module:end --><!-- module:start --><table class="left" cellSpacing="0" cellPadding="4" width="100%" border="1"><tr><th class="left" vAlign="top" align="center"><b>TITLE HERE</B></th></tr> <tr><td class="left" vAlign="top">Heres an Extra Module For what Ever You Want<br></td></tr></table><br/><!-- module:end --><!-- module:start --><table class="left" cellSpacing="0" cellPadding="4" width="100%" border="1"><tr><th class="left" vAlign="top" align="center"><b>Credit</B></th></tr> <tr><td class="left" vAlign="top">THIS LAYOUT WAS MADE BY<br> **your layout site name here**<br></td></tr></table><br/></td><script>extra=false;j=document.getElementById('MoreoverModule1_lblModuleTitle')if(j){extra=true}index=0;var mytds = document.getElementsByTagName('td');var i = 0;for(i=0;i<mytds.length-1;i++){if(mytds[i].width=="200"){index++;if(index==(extra ? 2 : 1)){break;}}}var sidebar = (extra ? mytds[i]: mytds[i].parentNode)var tsibpc = document.getElementById('customRight');var rightSide = tsibpc.cloneNode(true);rightSide.style.display = "block";sidebar.appendChild(rightSide);</script>

---

3. Q- How do I make a background image take up the whole page?

 

A- You can't make just any picture take up the whole screen. You'll need a large wallpaper to do that. Any wallpaper should work. Go to www.google.com and search for wallpapers.

---

---

I Don't Get It! Questions

1. Q- I don't get it! Can you help me?

 

A- Well, yes. But you'll have to be more descriptive on what you don't get. No, I won't IM you and personally talk you step-by-step through it. I did that on this site, didn't I?

---

2. Q- Can you teach me one-on-one how to make a layout?

 

A- Nope. Sorry. I don't have time.

---

3.

Q- I don't get it! Can you make a layout for me to put on my layout site?

 

A- That would be called jocking. The reason I made this site is so that people can learn to make their own layouts, not take someone else's. So, no.

---

---

Other Questions

 

1. Q- I want to make a right module layout, but the module doesn't show up, or when it does it's in the middle of page... HOW CAN I FIX IT?!?

 

A- Did you put the code for the module in the website stats in your Look&Feel? That's where it needs to go.

---

 

Q- My computer doesn't have a microsoft word document... what else can I make a layout on?

 

A- It really doesn't matter at all. You could make a layout on a Text Document, in a blank email, or even on the Header section of your Look & Feel. You can make a layout anywhere you want, as long as it's somewhere on your computer and you use a stylesheet.

---