Need help? Check out our Support site, then


can i make a static footer?

  1. can i make a static footer with wordpress.com like the one from the following site, http://plugfarming.org/ ?

    or do i need to use wordpress.org

  2. You can, if you have the paid Custom Design upgrade.

  3. connectslocounty
    Member

    I do have the Custom Design upgrade. How do I do this?

    Also, is it possible to have a static header bar? (Which includes my pages?)

    Thanks

  4. CSS is theme-specific. I checked http://dominicleebh.wordpress.com/ and I see that you are currently using the Mystique theme.

    Here is an example to get you started. It takes the footer in the Mystique theme and sticks it to the bottom of the page.

    body {
    	margin-bottom: 80px;
    }
    
    #footer {
    	display: block;
    	position: fixed;
    	width: 100%;
    	bottom: 0;
    	left: 0;
    	margin-bottom: 0;
    }
  5. Thank you so much for the help. im about to purchase the Custom design and the on demand theme.

  6. how and where do i insert the image?

  7. You can upload images to your blog media library, here is a guide:
    http://en.support.wordpress.com/images/

  8. is that how I can create a footer, an example. http://plugfarming.org/ ,like this site.

    It's footer is shown on every page. it's always there no matter how you scroll it

  9. To make an element appear in the same place no matter how you scroll, you can use position:fixed.

    That same example I posted earlier will actually still work pretty well even though you've changed themes. If you add a background color to the footer, you can see it working better. Try this:

    body {
    	margin-bottom: 80px;
    }
    
    #footer {
    	display: block;
    	position: fixed;
    	width: 100%;
    	bottom: 0;
    	left: 0;
    	margin-bottom: 0;
    	background: #fff;
    }
  10. hi,

    Thanks but what I can't figure out is where to find this footer and to insert the image there.

  11. You can set a background image for the footer with the background element. It would look something like this:

    background: #fff url(YOUR_IMAGE_URL) repeat-x;

    You would want to add it to the "#footer" block in the previous example.

    Replace YOUR_IMAGE_URL with the image URL you would like to use. If you need to upload an image, note that it must be formatted and sized correctly first. You can upload the image you want to use to your media library and get a URL from there. Here is a guide:
    http://en.support.wordpress.com/images/

    Here is an example using a logo image as a placeholder so you can see how it works:

    body {
    	margin-bottom: 80px;
    }
    
    #footer {
    	display: block;
    	position: fixed;
    	width: 100%;
    	bottom: 0;
    	left: 0;
    	margin-bottom: 0;
    	background: #fff url(http://s.wordpress.org/about/images/logo-grey/grey-s.png) repeat-x;
    }

    You may also want to add a height or padding-top property to the #footer section depending on how large your image is.

  12. Thank you. It's exactly what i wanted and working fine

  13. Awesome!

  14. Hey so I have a similar question for my wordpress website: http://michaelfacchinello.com/

    I want to put a static graphic on the very bottom left of my page and static social media icons on the bottom right of my page. I tried figuring it out with the above advise, but had some trouble... I am using the blogolife template.

    Also, as I was trying to figure this out I deleted the original blogolife footer code, does anyone have it so that I may restore that?

  15. This forum is for blogs hosted at WordPress.com. I checked http://michaelfacchinello.com/ and I found that site is setup using WordPress software, but it is not hosted here at WordPress.com. See http://support.wordpress.com/com-vs-org/ to learn about the differences.

    Can you please ask the theme author or in the WordPress.org volunteer forums if you still need help? General volunteer support for the free WordPress software is done at http://wordpress.org/support/

  16. Hi, I'm also trying to add a footer (Bold Life theme, hosted on wordpress.com). tanyameyers.com is the url.

    I've purchased the Custom Design upgrade, and inserted the below CSS code onto the CSS Stylesheet Editor, but it did nothing. I'm an absolute newbie to CSS so would really appreciate some help!

    body {
    margin-bottom: 80px;
    }

    #footer {
    display: block;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    margin-bottom: 0;
    background: #fff;
    }

  17. Sorry, the code did work, but it put the footer at the bottom of my screen, so while I can scroll on the page the footer doesn't move with the page. (and I'm not sure how to add text to the footer!)

  18. The "position: fixed" rule you added is what made the footer not move with the page. Check out these pages:
    http://www.alistapart.com/articles/css-positioning-101/
    https://developer.mozilla.org/en/CSS/position

    What you are asking seems pretty different than what was asked earlier in this thread. Are you just trying to add text to the end of the footer in the Bold Life theme? Here is an example for doing that:

    #footer:after {
    	content: " Footer text goes here.";
    }

    If you meant something else, could you please start a new thread so questions about different topics and different themes stay separated?
    http://en.forums.wordpress.com/forum/css-customization/#postform

  19. Thank you!!

    I've got a CSS / HTML / Flash tutorial I'm going to watch, and I'm sure the CSS part will be extremely helpful for understanding this WordPress stuff and all the rules. In the meantime I appreciate your help!

  20. Nice! I'd be interested to know what the tutorial is and if you think it's good after you're done going through it.

  21. Here's the tutorial: http://code.google.com/edu/submissions/html-css-javascript/#html

    I've watched the html and CSS intro videos so far (haven't done the exercises) and so far it's GREAT. It's exactly what I needed.

    Hope it helps more WordPress users. :)

  22. Thanks for posting it! I love hearing what tutorials you guys find.

Topic Closed

This topic has been closed to new replies.

About this Topic