Making A Layout: Footer
May. 26th, 2015 02:24 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: Footer
Links: Code Index
If you've been updating your coding and saving it as we go, your footer may be looking something like this:
The coding I would like to work with is from my layout Oxygen.
Typically I place the Footer Section after the Header Section but since it is at the bottom of the layout you can most it down just about entries. Really it is up to you how you structure your coding. Most of the sections don't have to be in the order I've placed them in. The only things I would keep at the top would be the Body and the General Section. Since these things start off the layout. The BODY Section of all coding is at the top so leave that right where it is. But feel free to place others how you like.
This time I want to look at two types of coding. I'm going to pull both the Footer Section from this layout which is the #2 example above and then also coding for the #1 example above.
Let's go over option one first.
#footer: Much like #header styles the footer bar at the bottom of your page.
div#footer a:hover: Any A with :hover after it is always for the hover of those links. Typically my hover coding is pretty simple but here I have some coding which was clearly something I'd been using and didn't really remove. Shame on me. First, sometimes when there is padding in a links coding you'll need it in the hover.
ul.navfooter: This is going to work much like the version of it in the header section. The #footer is essentially the footer navbar and the ul.navfooter is the bit the links lie on. In both instances I don't do much with it but you can always mess with it like in the header and see what you can accomplish. Just don't leave it out.
ul.navfooter li: This applies to the links themselves, which is again much like the header. You can manipulate these individually. And in cases where there are more than one link, link the header you'd kee adding +li to code for the next link (ie ul.navfooter li + li:). In this bit we have the display as inline again to specify how we want to see the coding which is inline which each other. I don't think I've ever changed this.
.clearfoot: The idea behind this is that if my footer section say 80% of the width of the journal it would essentially clear both sides of the journal and float in the middle of the footer section. I have not found this to work well so I would remove it and use the margin auto options in the #footer. This is coding from an older layout so it took me a while to discover this bit of coding was worthless. At times, using clear: both; will work in sections of coding but I've never had too much success with it.
Now let's got over the option I figured out not long after that last bit of coding and really never went back! I'll also tell you I restructed this a bit from the coding in the layout at the top because I realized it was a little mixed up. Since, in this coding, we can customize each link, I want to show that.
#footer: This time we have a position set which is fixed. This means it is going to stay where it is no matter how much you scroll. And with a width or 100% it fills the browser putting the links on either side of the journal. Here the z-index is to prevent the links for disappearing behing usericon or other images. The down side to the way this footer is set up is that techically it is transparent but if you were to say color the background red....
ul.navfooter a: This starts of the first link which is to the left of the journal. I didn't code this section but much like the right side you could.
ul.navfooter li: So this is the part where we tell this link a few things. First, that we want the list-style to be none outside none. What does that mean? Well it is style, position and image. So in this case we want none for style, outside for position (of bullets) but we also want none because we don't want to see the bullets either. Again display is inline though I've noticed these footer links aren't perfectly aligned and I've never gotten them to be. Doesn't matter to be much though.
div#footer a, div#footer a:link: Now we get into making some customizations to this link. I've choose to make it see through or semi-transparent. The padding and margins are really where all the customizing comes in. Since I have these in a "square" for this layout, I need padding to provide this. This is why it is listed as padding: 20px 30px 20px 30px;. Then I recomment taking a look at the link after you save. I added some margins for good measure. Also, the color is going to be what your link color will be.
div#footer a:hover: Here is the first links hover so we can put a color into this. I need to add the padding but I'm not entirely sure it is necessary. That is going to be up to you.
ul.navfooter li + li a: Onto the SECOND link. Notice the li + li a. This is telling our layout that it isn't the first link but the section li which is a bullet point in a list which again all out of menus are. I have a float line here to send it to the right. If it wasn't here it would be over with the link to the left. In this big of coding the background-color needs that !important function otherwise you can't change the coloring though here it is the same.
ul.navfooter li + li a:hover: This is empty which means the hover is going to revert back to the other link and again they will be the same but if you want to have a different color for hover on the second link you can add there here.
ul.navfooter li + li: This is much like the ul.navfooter li but we need to code for the second link. It's list-style and display are the same however.
#footer .viewing: You'll notice the words "viewing most recent entires" is missing. This is what is removing that bit of text with the display: none;. You can add this bit of coding to almost any part of your layout. So say you have customized your journal not to have a sidebar but you don't think you want to remove the coding for the sidebar altogether (what if you want the sidebar back?). Add the display: none; to the #sidebar section and it will disappear.
So now here is what our coding has come to:
Theme: Flexible Squares
Actions: Creating Your Own Layout: Footer
Links: Code Index
If you've been updating your coding and saving it as we go, your footer may be looking something like this:
This is not what we want to see and as you would notice, there doesn't appear to be a previous link. Not good at all. We want something link one of these:
1. 
2.
2.
The coding I would like to work with is from my layout Oxygen.
Typically I place the Footer Section after the Header Section but since it is at the bottom of the layout you can most it down just about entries. Really it is up to you how you structure your coding. Most of the sections don't have to be in the order I've placed them in. The only things I would keep at the top would be the Body and the General Section. Since these things start off the layout. The BODY Section of all coding is at the top so leave that right where it is. But feel free to place others how you like.
This time I want to look at two types of coding. I'm going to pull both the Footer Section from this layout which is the #2 example above and then also coding for the #1 example above.
1.
1.Let's go over option one first.
#footer: Much like #header styles the footer bar at the bottom of your page.
- width: Here we have the width as being 100% which will make it as wide as the layout because the position in this one isn't coded making it default to static. Static means it is just falling into position with the rest of the layout. If I'd made my layout content 100% or even 90% of my browswer window, that would be how big the footer would be.
- text-align: This will align the text on the footer. In the example for #1 you see it is to the left. Generally I prefered it to be centered but that is up to you.
- color: Here the color also applies to the text but as you can see there is text on the footer that tells you what you are viewing besides the back and forward links. If you want that to disappear make this color the same as the background the text would be laying on.
- z-index: I gave this a value of 100 to prevent the footer from disappearing behind images and things that might hinder it. We always want to be able to see our links.
div#footer a:hover: Any A with :hover after it is always for the hover of those links. Typically my hover coding is pretty simple but here I have some coding which was clearly something I'd been using and didn't really remove. Shame on me. First, sometimes when there is padding in a links coding you'll need it in the hover.
ul.navfooter: This is going to work much like the version of it in the header section. The #footer is essentially the footer navbar and the ul.navfooter is the bit the links lie on. In both instances I don't do much with it but you can always mess with it like in the header and see what you can accomplish. Just don't leave it out.
ul.navfooter li: This applies to the links themselves, which is again much like the header. You can manipulate these individually. And in cases where there are more than one link, link the header you'd kee adding +li to code for the next link (ie ul.navfooter li + li:). In this bit we have the display as inline again to specify how we want to see the coding which is inline which each other. I don't think I've ever changed this.
.clearfoot: The idea behind this is that if my footer section say 80% of the width of the journal it would essentially clear both sides of the journal and float in the middle of the footer section. I have not found this to work well so I would remove it and use the margin auto options in the #footer. This is coding from an older layout so it took me a while to discover this bit of coding was worthless. At times, using clear: both; will work in sections of coding but I've never had too much success with it.
2.
2.Now let's got over the option I figured out not long after that last bit of coding and really never went back! I'll also tell you I restructed this a bit from the coding in the layout at the top because I realized it was a little mixed up. Since, in this coding, we can customize each link, I want to show that.
#footer: This time we have a position set which is fixed. This means it is going to stay where it is no matter how much you scroll. And with a width or 100% it fills the browser putting the links on either side of the journal. Here the z-index is to prevent the links for disappearing behing usericon or other images. The down side to the way this footer is set up is that techically it is transparent but if you were to say color the background red....
Can you see that it appears to be over a "entry". This means if you are scrolling and the link you want to click on falls in this "footer" space it will act like you can't click on it because it is as if you are click on this red bar (which is transparent in the coding). It can be annoying but I just scroll so I can get to the link.
- bottom: This tells our fixed coding to put itself at the bottom of our screen at 10px away. If I'd put a value of 50% our footer links would be centered vertically on the right and left of our journal. If I want this footer to move to the top of the journal I'd change it to top: 100px; because I have an LJ Navstrip and we don't want the footer to hide behind it.
- right: Again it is similar to the bottom but now I want it at a value of 0. You can ajust the value depending on the look of the footer.
ul.navfooter a: This starts of the first link which is to the left of the journal. I didn't code this section but much like the right side you could.
ul.navfooter li: So this is the part where we tell this link a few things. First, that we want the list-style to be none outside none. What does that mean? Well it is style, position and image. So in this case we want none for style, outside for position (of bullets) but we also want none because we don't want to see the bullets either. Again display is inline though I've noticed these footer links aren't perfectly aligned and I've never gotten them to be. Doesn't matter to be much though.
div#footer a, div#footer a:link: Now we get into making some customizations to this link. I've choose to make it see through or semi-transparent. The padding and margins are really where all the customizing comes in. Since I have these in a "square" for this layout, I need padding to provide this. This is why it is listed as padding: 20px 30px 20px 30px;. Then I recomment taking a look at the link after you save. I added some margins for good measure. Also, the color is going to be what your link color will be.
div#footer a:hover: Here is the first links hover so we can put a color into this. I need to add the padding but I'm not entirely sure it is necessary. That is going to be up to you.
ul.navfooter li + li a: Onto the SECOND link. Notice the li + li a. This is telling our layout that it isn't the first link but the section li which is a bullet point in a list which again all out of menus are. I have a float line here to send it to the right. If it wasn't here it would be over with the link to the left. In this big of coding the background-color needs that !important function otherwise you can't change the coloring though here it is the same.
ul.navfooter li + li a:hover: This is empty which means the hover is going to revert back to the other link and again they will be the same but if you want to have a different color for hover on the second link you can add there here.
ul.navfooter li + li: This is much like the ul.navfooter li but we need to code for the second link. It's list-style and display are the same however.
#footer .viewing: You'll notice the words "viewing most recent entires" is missing. This is what is removing that bit of text with the display: none;. You can add this bit of coding to almost any part of your layout. So say you have customized your journal not to have a sidebar but you don't think you want to remove the coding for the sidebar altogether (what if you want the sidebar back?). Add the display: none; to the #sidebar section and it will disappear.
So now here is what our coding has come to:
Any questions about this tutorial? Please Comment.
layout_lounge
(no subject)
Date: 2015-05-27 12:16 am (UTC)(no subject)
Date: 2015-05-27 11:20 pm (UTC)(no subject)
Date: 2015-05-27 04:43 pm (UTC)(no subject)
Date: 2015-05-27 11:21 pm (UTC)You are so welcome.