Making A Layout: A Few Things to Start Off
May. 7th, 2015 04:47 pm![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
sireesanwar.livejournal.com posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
layoutloungeAccount Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Learing some of the repeating coding...
Hi everyone. I've been working on a tutorial which is going to be about 13 parts. It is essentially building a layout and what different parts of the coding does. If you come across a part of my explanations that just doesn't make sense to you at all... feel free to comment and ask.
I want to work with an already made layout and show you some differences and how things work. The idea is going to be that hopefully you will be able to remove sections of your layout and replace it with coding from another. This would be required if you liked the look of a layout but wanted the sidebar from another.
Also, most coding options like font's, text alignment, etc can be found in the Code Index. If you don't find something there please post a comment to the Code Index and I will help you out.
First things first, if you are going to be messing with your own journal chances are it will look odd for a bit. So if you currently have a coded layout save it. Copy the coding. Open a Notepad Text File. Paste it into the text file and make sure Word Wrap is off. Then save it. I tend to save mine as sireesanwar03-15-2015. That way I know it was for my personal journal and what the last date was that I used it. I always save my old codes in case I want to go back to them OR I mess something up and want to go back. This will also enable you to stop working in the middle of the new coding, save it in a similar manner and reinsert your old coding so if you have to stop for the day you journal is still readable.
Secondly, every line of code ends with a ; and every section of code starts and ends with brackets { }. This is important. You can see in the first bit of coding that we have body { this means we've opened up the coding for that section. Then at the end of that section we are closing it with }. All the lines between those brackets end with a semicolon ;. If you forget one of these it can and will throw everything off.
The coding I would like to work with is from my layout Oxygen.
Now what I want to go over is the lines of coding you will see repeating quite a bit through out the layout. This way I'm hoping I don't have to go over them every time I come across them.
color (color: #ffffff;): This is always the coloring of the text for whatever section you are looking at. If it is the text for the entry then your entry will show up in the color code listed. You might need a way to find a colors "code". You can got to ColorPicker.com for this. However, this element can be trumped by a link or a link section that has a color option.
font-family & font-size (font-size:12px;): This is going to be what type of font you'll want in your coding and then what size you want it to be. You may notice in the layout coding I have above that the font line looks like this: font-family: "lucida grande", trebuchet ms, arial, sans-serif;
line-height (line-height:14px;): Sometimes a font we use needs a little extra room for the Ys, Gs or Ps. So if you're font-size is 12px maybe you need the line-height to be 14px. But and even safer bet is to make it 110%. A percentage will always remain bigger or the size of your font. So if you have line-height set to 100% and suddenly you want to go from 14px font to 16px font, you can do so without worrying the line height needs to be changed. I tend to make my line-height 110% or 120% just to give the lines a little more room and make things readable for visitors.
letter-spacing (letter-spacing: 1px;): So say the font you are using seems like the letters are a bit squished together. You can add letter-spacing. It depends on how you wish the text to look. And if the letters seem really far apart you can trying something like letter-spacing: -1px;. This will bring the letters together.
text-align (text-align: left;): This is how we align our text for entries, comments, etc. Your options are left, right and center. This only centers text not an element of your journal.
text-transform (text-transform: lowercase;): This is how we change from uppercase to lowercase. You can also choose none or capitalize as other options. Generally, you'll want to just remove this line of coding if you are selecting the none option but if you are working with nested elements like sidebar text, sidebar link, sidebar hover link and you are have the sidebar link has UPPERCASE but when it hovers you want it to look normal then you will need to have text-transform: none; in the hover coding. The reason behind this is if you just remove that line from the hover section it will simply fall back on the link coding. So in this case we keep it.
font-weight (font-weight: bold;): This is how we designate that we want our font to be bold or not. Other options for this coding are normal, bold, bolder, lighter or increments of 100 (100, 200 etc up to 900). 400 is the same as normal and 700 is bold.
font-style (font-style: italic;): This is how we would tell the coding we want the font of a section to be italicized. There are other options for font-style: normal, italic, oblique, & initial. The only options I've ever used are normal or italic. If you are going to use normal, generally you can just remove that line of the coding. On occasion you will need it to prevent your text from being italicize because of another bit of coding in your layout, just like text-transform.
text-decoration (text-decoration: underline;): This is how we'd underline text. Also none, overline, line-through, blink, initial and inherit. If you are going to use none just remove the coding unless for some reason it continues to underline the text. If you are seeing underlined links go to your browser Options (Tools>Options>Content>Color) or Google the problem. Often a browser has links set to have a line underneath them.
margin: There are different things to know about the margin line. It essentially makes space around the outside of an item. Think of it like you would writing in something like Microsoft word. There are margins around the page but essentially these are margins on the outside of your text space (not the page). So if I want my journal to move down a bit from the lj navstrip I would be adding 10px to move it down.
You may see a line that looks like this: margin: 10px 0 20px 0; What this means is that I'm applying 10px to the top of something, 0 to the right, 20px to the bottom and 0 to the left. The margin attribute circles an elements to it means top, right, bottom, left. Different ways you can see the marin line.
Theme: Flexible Squares
Actions: Creating Your Own Layout: Learing some of the repeating coding...
Hi everyone. I've been working on a tutorial which is going to be about 13 parts. It is essentially building a layout and what different parts of the coding does. If you come across a part of my explanations that just doesn't make sense to you at all... feel free to comment and ask.
I want to work with an already made layout and show you some differences and how things work. The idea is going to be that hopefully you will be able to remove sections of your layout and replace it with coding from another. This would be required if you liked the look of a layout but wanted the sidebar from another.
Also, most coding options like font's, text alignment, etc can be found in the Code Index. If you don't find something there please post a comment to the Code Index and I will help you out.
First things first, if you are going to be messing with your own journal chances are it will look odd for a bit. So if you currently have a coded layout save it. Copy the coding. Open a Notepad Text File. Paste it into the text file and make sure Word Wrap is off. Then save it. I tend to save mine as sireesanwar03-15-2015. That way I know it was for my personal journal and what the last date was that I used it. I always save my old codes in case I want to go back to them OR I mess something up and want to go back. This will also enable you to stop working in the middle of the new coding, save it in a similar manner and reinsert your old coding so if you have to stop for the day you journal is still readable.
Secondly, every line of code ends with a ; and every section of code starts and ends with brackets { }. This is important. You can see in the first bit of coding that we have body { this means we've opened up the coding for that section. Then at the end of that section we are closing it with }. All the lines between those brackets end with a semicolon ;. If you forget one of these it can and will throw everything off.
The coding I would like to work with is from my layout Oxygen.
Now what I want to go over is the lines of coding you will see repeating quite a bit through out the layout. This way I'm hoping I don't have to go over them every time I come across them.
color (color: #ffffff;): This is always the coloring of the text for whatever section you are looking at. If it is the text for the entry then your entry will show up in the color code listed. You might need a way to find a colors "code". You can got to ColorPicker.com for this. However, this element can be trumped by a link or a link section that has a color option.
font-family & font-size (font-size:12px;): This is going to be what type of font you'll want in your coding and then what size you want it to be. You may notice in the layout coding I have above that the font line looks like this: font-family: "lucida grande", trebuchet ms, arial, sans-serif;
- Why is their more than one font list? The answer to this is your browsers default fonts. Some browsers may not have the same default fonts and so this list gives us something to fall back on. So if you're browser doesn't have lucida grande it will show you the text in the font trebuchet ms and on down the line should you not have that one. A safe bet is Arial and Verdana.
- Why does the first font have quotes around it? This tells the browser that it is the font to use but in some cases the quotes aren't necessary. However, should you put in a customized font (Google font tutorial) and you don't see it coming up then you should make sure those quotes are in place.
- I see you us px rather than pt for the font-size. Why? First off, pt means points and px means pixels. I use px because I feel it is more precise and easier for me to judge the size of the font.
line-height (line-height:14px;): Sometimes a font we use needs a little extra room for the Ys, Gs or Ps. So if you're font-size is 12px maybe you need the line-height to be 14px. But and even safer bet is to make it 110%. A percentage will always remain bigger or the size of your font. So if you have line-height set to 100% and suddenly you want to go from 14px font to 16px font, you can do so without worrying the line height needs to be changed. I tend to make my line-height 110% or 120% just to give the lines a little more room and make things readable for visitors.
letter-spacing (letter-spacing: 1px;): So say the font you are using seems like the letters are a bit squished together. You can add letter-spacing. It depends on how you wish the text to look. And if the letters seem really far apart you can trying something like letter-spacing: -1px;. This will bring the letters together.
text-align (text-align: left;): This is how we align our text for entries, comments, etc. Your options are left, right and center. This only centers text not an element of your journal.
text-transform (text-transform: lowercase;): This is how we change from uppercase to lowercase. You can also choose none or capitalize as other options. Generally, you'll want to just remove this line of coding if you are selecting the none option but if you are working with nested elements like sidebar text, sidebar link, sidebar hover link and you are have the sidebar link has UPPERCASE but when it hovers you want it to look normal then you will need to have text-transform: none; in the hover coding. The reason behind this is if you just remove that line from the hover section it will simply fall back on the link coding. So in this case we keep it.
font-weight (font-weight: bold;): This is how we designate that we want our font to be bold or not. Other options for this coding are normal, bold, bolder, lighter or increments of 100 (100, 200 etc up to 900). 400 is the same as normal and 700 is bold.
font-style (font-style: italic;): This is how we would tell the coding we want the font of a section to be italicized. There are other options for font-style: normal, italic, oblique, & initial. The only options I've ever used are normal or italic. If you are going to use normal, generally you can just remove that line of the coding. On occasion you will need it to prevent your text from being italicize because of another bit of coding in your layout, just like text-transform.
text-decoration (text-decoration: underline;): This is how we'd underline text. Also none, overline, line-through, blink, initial and inherit. If you are going to use none just remove the coding unless for some reason it continues to underline the text. If you are seeing underlined links go to your browser Options (Tools>Options>Content>Color) or Google the problem. Often a browser has links set to have a line underneath them.
margin: There are different things to know about the margin line. It essentially makes space around the outside of an item. Think of it like you would writing in something like Microsoft word. There are margins around the page but essentially these are margins on the outside of your text space (not the page). So if I want my journal to move down a bit from the lj navstrip I would be adding 10px to move it down.
You may see a line that looks like this: margin: 10px 0 20px 0; What this means is that I'm applying 10px to the top of something, 0 to the right, 20px to the bottom and 0 to the left. The margin attribute circles an elements to it means top, right, bottom, left. Different ways you can see the marin line.
- margin: 10px; This would mean all sides have a 10px margin.
- margin: 10px 0; This means that just the top is 10px and all the others are 0.
- margin-left: 10px; This is how you set just the left.
- margin-right: 10px; This is how you set just the right.
- margin-top: 10px; This is how you set just the top.
- margin-bottom: 10px; This is how you set just the bottom.
- margin-left: auto; & margin-right: auto; This would be how you center and element that isn't text. You'd use this to center you journal or your header image. This could also be listed as margin: 10px auto 10px auto;
Any questions about this tutorial? Please Comment.
layout_lounge
(no subject)
Date: 2015-05-08 05:19 pm (UTC)(no subject)
Date: 2015-05-08 06:42 pm (UTC)That is why I decided to take this on. So many people contact me and are stumped about something which, once explained, they totally get and they feel like they can do it themselves. I don't mind people asking for help but I remember just wanting to be able to find an answer so I could learn to do it. I'm hoping I can help other's feel like they can master it themselves. But I'm planning on being here when they are totally stumped. ;-)
(no subject)
Date: 2015-05-08 07:48 pm (UTC)(no subject)
Date: 2015-05-08 10:15 pm (UTC)