![[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: Body & Background Images
Links: Code Index // Custom CSS // Theme & Layout Change for Beginners // ColorPicker.com // Background & Headers Tutorial // Tutorials
Okay, I thought I'd pace these tutorials farther out (maybe once a week) but there are a few I think I should just get out there, just in case you are "practicing" what I'm explaining.
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.
To start out we will be working in Custom CSS of a Flexible Squares Layout. You should use the THEME & LAYOUT CHANGE FOR BEGINNERS to start things off and then come back here to proceed. If you already understand this process then the template I use is Flexible Squares: Autumn. Remember to choose NO for all three options (unless you are using PAID LAYER customizations and then the first one is a yes).
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.
Secondly, every line of code ends with a ; and every section of code starts and ends with brackets { }. Don't forget this as we move forward.
The coding I would like to work with is from my layout Oxygen.
As you can see (image above) everything behind the journal which fills the browser window is the body of your layout. This is an important part of the coding. You are essentially starting the layout off. Here is the basic body coding.
First you'll see I've started off the coding with /*---- and some text. This essentially is a note to myself which layout I'm working with and makes it possible for you to know where you got the layout and which layout you are looking at. And should you ask for my help, I can tell which layout you are using.
Second you might need a way to find a colors "code". You can got to ColorPicker.com for this.
Third you can see the body section here. Each line has it's importance.
Now what about if you want that background image to cover up the body color? In the box above I've added all the coding you'll need for a background image. There is also the Background & Headers Tutorial.
As you can see I've essentially doubled background image through background-size. The transparent falling snow would have to go first because it needs to be on top of the snow. So I could add a third image, say something laying over the background but I want it to snow on top of it. It would have to go in between snow and background in the image section. Which means all other commands would also have to go in the middle of the others.
So for the header image on this layout. I have the size set to inherit for the turquoise background and then auto for the logo.
Now what about the stuff under the body coding above the General Section?
This is additional items that apply to the whole of your layout except the blockquote. Typically I'd have this in the Entries Section but I edit it all the time so I have it up high.
a, a:link, a:visited { color: #004359; }
This coding will control your links for the entire journal (if you don't customize the others). a, a:link, a:visited means I've essentially made the exact same coding for a as well as a:link and a:visited. If you wanted to do different customizations for a:visited you would simply separate it out like this: a:visited { color: #004359; }
a:hover { color: #444444; }
This coding is the hover customization for all your links on your journal (if you don't customize the others). You can add a font-weight or a text-transform to either of these codes.
blockquote {
width: 70%;
background: #444444;
margin-left: auto;
margin-right: auto;
padding: 10px;
color: #ffffff;
font-size: 13px;
line-height: 16px;
font-family: "trebuchet ms", arial, sans-serif;
text-align: left;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
}
As I said before the blockquote is more a part of the entries but I just dump it in the code here so it is easy to get to. So I'm going to tell you about it now.
blockquote a:hover { color: #ffffff !important; }
Without this coding, if I were to have a link in my blockquote it would revert to the a:link coding. Sometimes this is fine but other time is makes the links impossible to see. So we add code for links within the blockquote. Here I've also decided when I have a link in my blockquote I want it to look italisized.
i img { border: 10px solid #f5f5f5; }
This code is unnecessary but I love adding it. What it means is that if you are posting and your click you image and then select italic it will enable this coding which will put a 10px border around your image. But you have to essentially italicize your image. As you can see I've customized the image at the top of this post as well.
b, strong { color: #004359; }
i, em { color: #4c228a; }
u { color: #8CB53F; }
s, strike { color: #AD5C00; }
This is color customizations for bold text, italicized text, underlined text, and strikethrough text. You can even add other customizations like a different font or a different size. So say italisized text always looks to small to you. If my entries are at font-size: 14px; I could put font-size:15px; after the color option in the i, em coding. This will make ALL italisized text size 15px.
So now here is what our coding has come to:
Theme: Flexible Squares
Actions: Creating Your Own Layout: Body & Background Images
Links: Code Index // Custom CSS // Theme & Layout Change for Beginners // ColorPicker.com // Background & Headers Tutorial // Tutorials
Okay, I thought I'd pace these tutorials farther out (maybe once a week) but there are a few I think I should just get out there, just in case you are "practicing" what I'm explaining.
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.
To start out we will be working in Custom CSS of a Flexible Squares Layout. You should use the THEME & LAYOUT CHANGE FOR BEGINNERS to start things off and then come back here to proceed. If you already understand this process then the template I use is Flexible Squares: Autumn. Remember to choose NO for all three options (unless you are using PAID LAYER customizations and then the first one is a yes).
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.
Secondly, every line of code ends with a ; and every section of code starts and ends with brackets { }. Don't forget this as we move forward.
The coding I would like to work with is from my layout Oxygen.
As you can see (image above) everything behind the journal which fills the browser window is the body of your layout. This is an important part of the coding. You are essentially starting the layout off. Here is the basic body coding.
First you'll see I've started off the coding with /*---- and some text. This essentially is a note to myself which layout I'm working with and makes it possible for you to know where you got the layout and which layout you are looking at. And should you ask for my help, I can tell which layout you are using.
Second you might need a way to find a colors "code". You can got to ColorPicker.com for this.
Third you can see the body section here. Each line has it's importance.
- background-color will be the color behind your layout whether you end up using a repeating image or not. I typically set this to a color that compliments the layout whether or not I cover it up. This is a pale gray which is fine if we do play to cover it.
- font-family is important for the same reason as color. Note the first font is surrounded by "quotes". This isn't always required but should your coding have trouble displaying a font I would make sure there are quotes around your font. These listed fonts are default browser fonts. We will get into changing a font in another tutorial. You will notice; however, I've listed several fonts. This is to ensure your text is displayed in a manner you wish. So our first font is lucida grande but should someone's browser out there not support this font it will move on to the next font being trebuchet ms and so on and so forth. A safe bet as a back up font is Arial and Verdana. 99.9% of the time they are one someone's computer.
- font-size again is important for the same reasons as color and font-family. Some use pt rather than px but I'm more comfortable with px.
- margin is often set at 0 but in this case it is 10px 0 20px 0. What does this mean? Essentially it means TOP, RIGHT, BOTTOM, LEFT. So it is moving clockwise around the layout. I have TOP set at 10px which means there is a 10px gap at the top of the layout. I have put both LEFT and RIGHT at 0 because I do not want a margin on either side of the journal (this would make your browser scroll horizontally in addition to vertically) but sometimes a gap at the bottom of the journal makes things easier to see. Here I have it set to 20px.
Now what about if you want that background image to cover up the body color? In the box above I've added all the coding you'll need for a background image. There is also the Background & Headers Tutorial.
- background-image is where you will put the direct link from PhotoBucket or you Scrapbook between the parenthesis (HERE).
- background-repeat is if you want your background to repeat. So say it is a big image that fills up the entire screen you might not want it to repeat. You'd go with no-repeat. Your only options here are repeat and no-repeat. Though there is the occasion you might want to have repeat-x or repeat-y which only means you want the repeat to go only horizontal (x) or only vertical (y).
- background-attachment is whether or not the background scrolls with the journal or will it stay stationary. Your options are really fixed and scroll. If you were using a really large image for the background not only would you not want it repeating but you would want it to be fixed. A fixed image would always apply if you want an image to stay in one place on your background maybe to the left or right of your layout.
- background-position gives you many options. This really depends on your image. If you are using a small image that you'll have repeating sticking with the left top positioning is probably best. However, if you are using a large image you might want to go center center. I recommend testing different options to see what looks best. This positioning goes horizontal and then vertical in alignment. Your options will be left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom.
- background-size is essential to images of different sizes. So say you want this image to be filling the entire screen with no scrolling and no repeating but it doesn't quit fit. Change the size option to cover. This will stretch the image to fill the screen always. You might want to center this in positioning. Contain should fill the screen but part of your image might not show up which is okay for large textured images but not so great if you want a scene in the background. You can also put in lengths which is width and height such as 75px 100px or percentage 50% 100% which would be useful for a fixed image to the left or right of your journal. As you can see in the above coding we have inherit which is what you'd want to use for a small repeating pattern image. There is also the option for auto which again would be good for a repeating image.
As you can see I've essentially doubled background image through background-size. The transparent falling snow would have to go first because it needs to be on top of the snow. So I could add a third image, say something laying over the background but I want it to snow on top of it. It would have to go in between snow and background in the image section. Which means all other commands would also have to go in the middle of the others.
So for the header image on this layout. I have the size set to inherit for the turquoise background and then auto for the logo.
Now what about the stuff under the body coding above the General Section?
This is additional items that apply to the whole of your layout except the blockquote. Typically I'd have this in the Entries Section but I edit it all the time so I have it up high.
a, a:link, a:visited { color: #004359; }
This coding will control your links for the entire journal (if you don't customize the others). a, a:link, a:visited means I've essentially made the exact same coding for a as well as a:link and a:visited. If you wanted to do different customizations for a:visited you would simply separate it out like this: a:visited { color: #004359; }
a:hover { color: #444444; }
This coding is the hover customization for all your links on your journal (if you don't customize the others). You can add a font-weight or a text-transform to either of these codes.
blockquote {
width: 70%;
background: #444444;
margin-left: auto;
margin-right: auto;
padding: 10px;
color: #ffffff;
font-size: 13px;
line-height: 16px;
font-family: "trebuchet ms", arial, sans-serif;
text-align: left;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
}
As I said before the blockquote is more a part of the entries but I just dump it in the code here so it is easy to get to. So I'm going to tell you about it now.
- width is at 70% which means 70% of my entry. I make it much smaller than my entry because it is a quote and I want it to stand out as such.
- backround or background-color is optional and just like any other background coding. You can even put in a background image.
- margin is set to auto right and left so it centers the blockquote in my post.
- padding leaves a 10px gap inside the blockquote which makes it easy to read and astetically pleasing.
- font-size, line-height pertain to the text. I'm choosing the font-size which I can do without a font-family (though I have one here). If you eliminate these lines it will fall to your entry coding and if that isn't coded it will fall to subcontent>maincontent>content>body. The line-height is for those fonts that seem to need more or less room in a line. You can eliminate it or set it to auto.
- font-family is only if you want a specific font in the blockquote. If you eliminate these lines it will fall to your entry coding and if that isn't coded it will fall to subcontent>maincontent>content>body.
- text-align can center, right align, or left align your blockquote text. Again if you don't include it it will fall to your entry coding... etc.
- box-shadow is exactly that a shadow. It makes it look a bit like your blockquote is coming off the page. First is the horizontal offset, then the vertical offset, blur and then spread. If you set both the horizontal and vertical offsets to 0 you will see a shadow behind the entire object you have the shadow behind. This is fun to experiment with and can be put behind virtually any bit of coding. Sometimes it will work and sometimes it will looke odd. You can mess with it to determine if you like it or not.
blockquote a:hover { color: #ffffff !important; }
Without this coding, if I were to have a link in my blockquote it would revert to the a:link coding. Sometimes this is fine but other time is makes the links impossible to see. So we add code for links within the blockquote. Here I've also decided when I have a link in my blockquote I want it to look italisized.
i img { border: 10px solid #f5f5f5; }
This code is unnecessary but I love adding it. What it means is that if you are posting and your click you image and then select italic it will enable this coding which will put a 10px border around your image. But you have to essentially italicize your image. As you can see I've customized the image at the top of this post as well.
b, strong { color: #004359; }
i, em { color: #4c228a; }
u { color: #8CB53F; }
s, strike { color: #AD5C00; }
This is color customizations for bold text, italicized text, underlined text, and strikethrough text. You can even add other customizations like a different font or a different size. So say italisized text always looks to small to you. If my entries are at font-size: 14px; I could put font-size:15px; after the color option in the i, em coding. This will make ALL italisized text size 15px.
So now here is what our coding has come to:
Any questions about this tutorial? Please Comment.
layout_lounge
(no subject)
Date: 2015-05-08 10:52 pm (UTC)(no subject)
Date: 2015-05-08 11:33 pm (UTC)(no subject)
Date: 2015-05-14 09:58 am (UTC)(no subject)
Date: 2015-05-14 08:40 pm (UTC)(no subject)
Date: 2015-05-14 09:46 pm (UTC)