can i make a static footer?

  • Author
    Posts
  • #872698

    dominicleebh
    Member

    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

    #872822

    justpi
    Member

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

    #872995

    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

    #873027

    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;
    }
    #873048

    dominicleebh
    Member

    Thank you so much for the help. im about to purchase the Custom design and the on demand theme.

    #873084

    dominicleebh
    Member

    how and where do i insert the image?

    #873107

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

    #873108

    dominicleebh
    Member

    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

    #873110

    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;
    }
    #873111

    dominicleebh
    Member

    hi,

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

    #873112

    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.

    #873129

    dominicleebh
    Member

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

    #873131

    Awesome!

    #873193

    micfacch
    Member

    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?

    #873196

    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/

    #873199

    tanyameyers
    Member

    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;
    }

    #873200

    tanyameyers
    Member

    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!)

    #873201

    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?
    https://en.forums.wordpress.com/forum/css-customization/#postform

    #873202

    tanyameyers
    Member

    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!

    #873203

    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.

The topic ‘can i make a static footer?’ is closed to new replies.