Remove White Bar in the Footer

• 

  michellekwiatkowski · Member · Jan 20, 2014 at 3:26 am

  • Copy link
  • Add topic to favorites

  There is about a half inch white bar at the bottom of my website right above the footer info. Is there any way to make this black and remove it?
  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  hfzrhmn · Member · Jan 20, 2014 at 3:30 am

  • Copy link

  This should change the white bar to black:

  .site-midrow {
       background: #000000;
  }

• 

  michellekwiatkowski · Member · Jan 20, 2014 at 3:34 am

  • Copy link

  PERFECT! Thanks so much.
  Any idea how to remove the “permalink” from this posts page?
  http://hisanddhers.wordpress.com/category/his/

• 

  hfzrhmn · Member · Jan 20, 2014 at 3:41 am

  • Copy link

  I suppose you mean the post titles? If yes, this code should do the trick:

  body.archive h2.postitle {
  	display: none;
  }

• 

  michellekwiatkowski · Member · Jan 20, 2014 at 3:44 am

  • Copy link

  Not the post titles. If you notice when you go to the category I linked you to, each post has a title “TEST” but the middle post has “PERMALINK” at the bottom. THAT’S what I am trying to figure out how to move.. or maybe even make it black if possible.

• 

  hfzrhmn · Member · Jan 20, 2014 at 3:47 am

  • Copy link

  You have 4 posts there currently. The middle column has two posts: the “Test” one with no image, and the “Permalink” one with the image. The “Permalink” is the post title, similar to the “Test” titles on the left and right column.

• 

  michellekwiatkowski · Member · Jan 20, 2014 at 3:50 am

  • Copy link

  I see. Thanks again. I didn’t even realize there was no picture with that post. One last question.. I am having trouble reducing the padding above and below the header image. I have tried uploading a slimmer header image but the theme will make you crop the image is it’s not the right dimensions. I have also tried this code with no success:

  .header-image {
  margin-top: -50px;
  }

  Any suggestions?

• 

  hfzrhmn · Member · Jan 20, 2014 at 4:09 am

  • Copy link

  Yeah, the header image is set to have a certain height: 275 pixels.

  If you do this:

  #header,
  #header-image {
      height: 100px; // Insert your own height here
  }

  It should modify the header area’s height.

  Since the theme doesn’t allow you to upload smaller image, you might want to still upload a 275 pixels high image, but edit the image so that whatever you want to display is only on the top portion (I hope I’m being clear enough with this).

  With the CSS above, the rest of your header image will still be there, but hidden.

• 

  michellekwiatkowski · Member · Jan 20, 2014 at 4:14 am

  • Copy link

  Hmmm..This is what I typed in and saw no changes (tried a few others numbers too):

  #header,
  #header-image {http://hisanddhers.files.wordpress.com/2014/01/hisandhers1.png
  height: 100px; // -40px
  }

• 

  hfzrhmn · Member · Jan 20, 2014 at 4:21 am

  • Copy link

  Maybe because of the ‘http://hisanddhers.files.wordpress.com/2014/01/hisandhers1.png’ thing?

• 

  hfzrhmn · Member · Jan 20, 2014 at 4:22 am

  • Copy link

  Oh perhaps you can use this instead (add the !important):

  #header,
  #header-image {
      height: 100px !important; // Insert your own height here
  }

• 

  michellekwiatkowski · Member · Jan 20, 2014 at 4:24 am

  • Copy link

  Well that would be my header image. If I use the css above, it automatically removes my header. :/

• 

  michellekwiatkowski · Member · Jan 20, 2014 at 4:27 am

  • Copy link

  Okay so I adjusted it to this and I am only able to edit space below the header. Not above.

  #header,
  #header-image {
  height: 230px !important; // -10px
  }

  The “-10px” does nothing to the top padding.

• 

  hfzrhmn · Member · Jan 20, 2014 at 4:29 am

  • Copy link

  Oh, right, if you also want to use your own custom-size header image:

  1) Upload that image with the Media Uploader.
  2) Get the image’s URL.
  3) Use the CSS below:

  #header,
  #header-image {
      height: 100px !important; // Insert your header's height here
  }
  
  #header-image {
      background: url('http://your-custom-banner-url-here') no-repeat !important;
  }

  That should do it.

• 

  michellekwiatkowski · Member · Jan 20, 2014 at 4:37 am

  • Copy link

  Awesome. You’re right that worked perfectly. Thanks again for all the help!!! It’s greatly appreciated.

  Any idea why the post titles are being cut off?
  See the first post:
  http://hisanddhers.wordpress.com/category/hers/

• 

  hfzrhmn · Member · Jan 20, 2014 at 4:42 am

  • Copy link

  It can be fixed this way:

  .lay1 > div .postitle {
      overflow: visible !important;
  }

  But note that the theme author decided to add that clipping effect in the first place. I am not sure why, so there’s a possibility my fix above might cause some layout issues on some other places.

• 

  michellekwiatkowski · Member · Jan 20, 2014 at 4:51 am

  • Copy link

  That is strange. Worked fine but I noticed if I make the title longer it just cuts everything off. Not sure what the right fix is.
  First post:
  http://hisanddhers.wordpress.com/category/hers/

  I noticed this blog must have done something similar as well otherwise their text would be cut off too:
  http://unfadingbeauty.co.uk

• 

  hfzrhmn · Member · Jan 20, 2014 at 5:05 am

  • Copy link

  I checked that Unfading Beauty site and it does have this in the Custom CSS:

  .lay1 > div .postitle {
  overflow: visible !important;
  }

  Identical to what I posted earlier.

• 

  michellekwiatkowski · Member · Jan 20, 2014 at 5:07 am

  • Copy link

  For some reason that is having zero effect on my post widths. Not sure what to to.. could other CSS be overriding it?

• 

  hfzrhmn · Member · Jan 20, 2014 at 5:10 am

  • Copy link

  This Custom CSS of yours is the cause:

  .lay1 > div .post-content {
  	width: 100px;
  	margin: 0 auto;
  }

  If you remove those, your post width will go back to normal.