WordPress.org

Forums

Esplanade
How can I add an image to the footer? Esplanade Theme (12 posts)

  1. lewgard
    Member
    Posted 1 year ago #

    I want to add an image to the footer, size 500w by 420h. I tried adding it in the footer widget, but I cannot get the size right. I looked through the css file but I'm not sure which section to change/add the width and height. Any suggestions? Thanks.

  2. CrouchingBruin
    Member
    Posted 1 year ago #

    If you post a link to your site so we can examine it, you'll have a better chance of someone offering CSS suggestions.

  3. lewgard
    Member
    Posted 1 year ago #

    Sorry...it's http://www.ewomanweb.com

    Any help greatly appreciated.

  4. CrouchingBruin
    Member
    Posted 1 year ago #

    Thanks for the link, but I don't see an image in the footer. I guess you must have taken it out when you couldn't get it to size correctly?

  5. lewgard
    Member
    Posted 1 year ago #

    You're right...it's back in now. It's in a widget, but I still cannot figure out how to enlarge it.

  6. CrouchingBruin
    Member
    Posted 1 year ago #

    Great, thanks.

    The main problem is that the footer widgets have a width of 30.8%. I don't know if that's because only three widgets can be added, but since you only have one, we can add some custom CSS (the Esplanade theme has a custom CSS option) to make it fill the whole footer:

    #footer-area #text-16 {
    	width: 100%;
    }
    #text-16 img {
    	width: 100%;
    }

    The first CSS rule stretches the text widget across the entire footer while the second rule makes the image itself stretch across. You can, of course, use different percentage values for the image, depending upon how much of the space you want to fill. I used percentages so the image will be responsive as the browser window resizes.

  7. lewgard
    Member
    Posted 1 year ago #

    Thanks for your time and assistance, CrouchingBruin. Unfortunately, I cannot get the image to enlarge. I'm stumped. Guess I don't know enough CSS to figure it out.

    Now I'm thinking of finding a plugin that zooms the image on hover. If I can find a simple one that works with the most recent WordPress version.

    Anyway...thanks for all your help.

  8. CrouchingBruin
    Member
    Posted 1 year ago #

    Where did you add the CSS, in the theme's custom CSS option?

  9. CrouchingBruin
    Member
    Posted 1 year ago #

    Nevermind, I see it in the source. I wonder why it's not working...

  10. CrouchingBruin
    Member
    Posted 1 year ago #

    OK, I see the problem. In your custom CSS, you have this rule:

    #header-image {
    	display:block;
    	max-width:99.1%;
    	padding:0.5%;
    	margin: 1.56% 0px;
    	box-shadow:0 0 0px #999;
    	background:none;
    	height: 130px;
            min-width: 900px;
    )

    The problem is that the rule is ended with a right parenthesis ) instead of a right bracket }, which means that rule, plus all of the CSS rules which follow it, aren't working. Change the right parenthesis to a right bracket and the rest of your custom CSS should work (hopefully not with unintended consequences).

  11. lewgard
    Member
    Posted 1 year ago #

    Ahhh haaaa !!! You are the best ! It worked perfectly. I just need to tweek the image size and quality; that is an easy fix for me.

    And I think I need stronger eyeglasses...

    Thank you so much!

  12. CrouchingBruin
    Member
    Posted 1 year ago #

    You're welcome. And I think I'm going to browse through your site, it looks like it might have some good info on how I can make some money on the side. ;)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic