How to Personalize Footer
February 9th, 2008
How to have a personalize footer with your name on it?
The answer: You have to make your own footer image.
If you can make a banner, you sure can make a footer youself! And yes, with your name stamped on it. I will be basing my tutorial on this theme that I made – Hannah Montana.
As you can see above is the footer image I made for that theme. How did i achieve this?
-
1. Using photoshop, i opened a new document with the dimensions 770px by 254 px. The width is the same as the width of the page-body and the banner. You can have your own dimensions but what’s important is, it has to be the same width as your page body.
-
2. I basically use the same background of the page-body to achieve proper blend for the entire theme. Then i open the elements like the pictures and swirls and pasted them on the my document. You can drag the elements wherever you want them to be by using the Move Tool.
-
3. Using the Text Tool, I stamped my name along with www.multiplythemes.com on it.
-
4. Then I hit File > Save for Web Devices (Alt+Ctrl+Shift+S on my Keyboard) and save the image as a JPEG file.
Once you have made this banner image. You can now upload it on your Multiply or Photobucket (whatever your image hosting site is) and then get the URL. If you upload your images in Multiply, make sure you zoom it in before you get the Image Location or URL. When it is zoomed in already, you can Right Click on your mouse, Select Properties and then copy the URL.
Now for the CSS. We will then try to put the image on our theme. This is the code i use for the footer of the Hannah Montana theme:
-
div#ownedfooterc {
background: url(“URL OF YOUR IMAGE”);
background-color: transparent;
width: 770px;
border: 10px solid #86492e;
border-top: none;
height: 254px;
margin-bottom: 40px;}
As you have noticed, I have added the width and height of my code to perfectly fit my image. If your image’s height is different, change the values of the width in your CSS. Once you have done it, click on Save and you’re good to go!
If you have any questions or suggestions on this tutorial, feel free to drop me a comment below.
Entry Filed under: Tutorials,simplyJACY
28 Comments Add your own
1. nissi | March 5th, 2008 at 12:54 pm
hi, i had this background that i made using adobe.. i want this to be the lay out of my multiply.. how can i do that? a big THANKS
2. simplyjacy | March 5th, 2008 at 3:45 pm
so, you had this image that you want to use as background?
usually, the background image can be put up by hosting it online and get the url. copy the url and paste it at the code below:
body {
background: url(“http://urlofyourimage”);
}
3. esioul | March 12th, 2008 at 6:05 am
…I’ve created my own footer after fooling around with the photoshop tool I used…
when it come to the code, I get lost. I did everything you told in the directions but the image won’t show up.
help.
4. simplyjacy | March 12th, 2008 at 12:50 pm
what base theme are you using?
if you’re using avlack, you may put this code if it’s not on your CSS:
div#ownedfooter {background-color: transparent;
height: 300px; /*<–height of your image*/
width: 760px; /*<– width of your image*/
border: none;
background: url(http://urllocation) no-repeat;
}
5. tine | May 15th, 2008 at 11:04 am
Hi!what’s the size of the banner if your base theme is avlack?thanks!
6. badz | June 13th, 2008 at 1:52 am
u hAvent mEntion whEre wiLl i paSTe thE coDE
7. simplyjacy | June 14th, 2008 at 12:35 am
paste the code in Custom CSS.
if you already have a CSS, paste it in the bottom.
8. luisa | June 18th, 2008 at 12:52 pm
can u do this using paint.net?
9. simplyjacy | June 18th, 2008 at 3:20 pm
yes luisa you can!
10. niKa | July 4th, 2008 at 3:55 pm
how do i remove the blue parts on the sides of my banner. i want to make it transparent so that the bodu background will stand out more
11. jenn | October 18th, 2008 at 12:53 am
i cant get it.. i followed all your steps but it wont appear.. HELP!
12. aivy | October 22nd, 2008 at 3:24 am
can somebody teach me how to customize the body? can you give me the codes for that and also the codes for the customize guestbook..please help me..
13. Teri | October 25th, 2008 at 1:48 pm
I have a question. How do I change the heading under the groups? I have the heading saying guest book. I want to change it to groups.
14. Phil | November 10th, 2008 at 11:15 pm
If you’re using base theme MOD, what are the sizes?
15. simplyjacy | November 10th, 2008 at 11:29 pm
just like you change it on a personal page. click on Customize My Site and click on Edit on that box that said “guestbook” and change it.
16. ika | November 12th, 2008 at 9:32 am
hey… um… could you teach me on how to make a banner… as much as possible, can you make it a step-by-step process???
like:
> how to start making one using photoshop
> size of the banner to fit my page
>how to make it long…. to fit my page, etc…
i really have trouble making one…. thank you… and btw, i really like your advices, they are so helpful…..
17. simplyjacy | November 12th, 2008 at 6:34 pm
I’ll take that into consideration. However, making a banner is similar to making a footer. The only difference is pasting it on the particular part of the CSS.
in Avlack, the typical width of the banner is 780px. the height doesn’t matter. you can adjust the height in the code to fit the height of the image.
18. grace | November 14th, 2008 at 9:47 pm
mas naiintindihan ko tutorials mo.
19. Farhana | November 30th, 2008 at 10:13 pm
Hi,
I am using avlack for my multiply site and I tried using this code for the footer and it didn’t exactly turn out right. It fact it only show 1/4 of the background pic. can you help (www.banzaishoots.multiply.com) It looks like it’s been cut off..
Can I email you my codes to see where I’ve gone wrong?
20. simplyjacy | December 5th, 2008 at 12:16 am
for Base Theme MOD, the width is 740px; the height doesn’t matter. you can simply change the height on the CSS to match the height of the image that you made.
21. simplyjacy | December 5th, 2008 at 12:19 am
you don’t need to email me the codes. i was trying to check your site on multiply but it seems that multiply is not loading for now.
if it works on your end, look for the this code:
div#ownedfooter {background-color: transparent;
height: 310px;
height: 130px;
width: 780px;
border: none;
background: url(‘http://farm4.static.flickr.com/3196/3058868180_54c9323ffb_o.png’) no-repeat;
}
delete the height and replace it with this:
height: 200px;
22. dan | December 12th, 2008 at 10:18 am
Hi, i have a question how do i change the font color of my layout and how do i make borders at the sides?
23. dan | December 12th, 2008 at 10:20 am
i using the newspaper base theme,
24. ingrid | January 10th, 2009 at 10:43 pm
can I use photobucket?
25. arlyn | January 16th, 2009 at 2:04 pm
hello simplyjacy
first id like to commend you and this site
really very helpful
especially for me who
who doesnt know much about css
secondly i have a question.
i have this problem with my footer
i want to change the color
but its not changing
thanks
26. chingkay | January 25th, 2009 at 5:07 am
i followed all your css but my footer doesn’t seem to appear.. what am i doing wrong? tnx..
27. Multiply: Step-by-Step Gu&hellip | March 19th, 2010 at 3:35 pm
[...] Making a Banner with your Photo Animate your Banner How to Personalize Footer [...]
28. Mae | June 30th, 2010 at 5:24 am
Hi, if you check my site, there seems to be a problem. There are two things I cant seem to fix:
1. I couldn’t change the position of the multiply corporate links nor change the background
2. the bottom of the page is not appearing at the end when you scroll, looks like its been cut off, and whenever i put the footer i can’t see it
hope you may be able to help. thanks!
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed