Need help? Check out our Support site, then


Aligning Footer Widgets in Imbalance 2

  1. Hi! I have very little experience in CSS coding, but I need help with customizing the Imbalance 2 theme for my blog.

    http://cool-breezy.com

    What I want to see:
    1. Move theme info/credit to the bottom of the page instead of the left to make use of all the extra space.
    2. Align one column of widgets to the left and one to the right with a space in the center for an image, a la http://thepatternedplate.com/.

    I've actually visited the forum page where she received the coding to make this happen on her blog, but as I enter it in to my CSS customization, nothing changes as far as the footer goes. I've found a few other forum pages with similar requests but none of the coding works as I enter it. Not sure if it's user error or what. :(

    NOTE: all of my blog entries are private at this point as I am unveiling the relaunch for this blog on Friday.

    Thanks in advance for your help!

    The blog I need help with is cool-breezy.com.

  2. Hi there, you can force the footer credits to the bottom and move the left widget area to the far left with the following.

    #site-info {
        bottom: 0;
        position: absolute;
        text-align: center;
        width: 100%;
    }
    #footer {
        background: url("URL_OF_IMAGE") no-repeat scroll center top transparent;
        position: relative;
    }
    }
    #footer-left {
        float: left;
    }

    To add an image between the two widget areas, replace URL_OF_IMAGE between the quote marks in the #footer background declaration above with the URL of your image uploaded to your media library.

  3. I've used your header image as an example in the code below. All you should need to do is upload the image you want to use to your media library then copy the URL into the last line below:

    #wrapper {
      position:relative;
    }
    
    #site-info {
      position:absolute;
      bottom:0;
      width:100%;
    }
    
    #footer-left {
      float:left;
    }
    
    #footer {
      background: url("http://stoopg1rl.files.wordpress.com/2014/09/coolbreezy2014.jpg") #fff no-repeat top center;
    }
  4. I'm copying and pasting and using the correct image link for the image I want to use, but none of these options are working. :( Nothing changes at all. I'm not sure if it's competing with something else I have in my coding or if I'm not putting it in the right order of things within the other lines of code I've used (not sure if that even matters).

  5. Hi there, in a .entry-content rule, you had the following in the value field in one of the declarations.
    #comments {

    I removed that from your custom CSS and all is well now.

  6. PERFECT! Thank you so much for your help!

  7. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic