Elegant Grunge – Changing the Post Comments’ Background?

• 

  fazor3d · Member · Feb 2, 2011 at 1:54 am

  • Copy link
  • Add topic to favorites

  Hello,

  My blog is running off the Elegant Grunge theme with custom CSS, and I can’t figure out how to change the posted comment’s background image to match. I’ve tried changing the (images/comment.jpg) code to point to a custom jpg in my image directory (like I did to change the other images), but it doesn’t seem to be working.

  Anyone have any advice?

  Thanks,
  Fazor

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

• 

  thesacredpath · Member · Feb 2, 2011 at 2:51 am

  • Copy link

  You have two selectors to deal with as far as I can see.

  #commentlist li .comment-content, #commentlist li .before-comment, #commentlist li .after-comment, #commentlist li .after-comment div {
  background: url("images/comment.jpg") no-repeat scroll right top transparent;
  }
  
  #commentlist li.bypostauthor .comment-content, #commentlist li.bypostauthor .before-comment, #commentlist li.bypostauthor .after-comment, #commentlist li.bypostauthor .after-comment div {
  background-image: url("images/comment-author.jpg");
  color: #000000;
  }

• 

  fazor3d · Member · Feb 2, 2011 at 3:26 am

  • Copy link

  Thank you! I thought that’s what I was doing, but when I deleted that portion of my custom CSS and added your lines in it seems to be working, so I must have missed something.

  The only other question I currently have is whether you can customize the “Like” button graphic?

  Thanks again.

• 

  thesacredpath · Member · Feb 2, 2011 at 3:44 am

  • Copy link

  If you go to settings > sharing and then where you sharing icons are, click on the right end of the bar (down arrow) you can choose from the default button, a “share” button or a “like” button.

  If those are not to your liking, you can create your own, upload it to the media library and then replace the relative URL in the CSS with the absolute URL to your uploaded icon.

  .sharing a.share-facebook, .sharing-hidden a.share-facebook {
  background: url("images/facebook.png") no-repeat scroll left center transparent;
  }

• 

  fazor3d · Member · Feb 6, 2011 at 6:36 am

  • Copy link

  Okay, I’ve started adding pictures to my posts and have come up with another question/problem. The images have a padding around them that is still the default white color. I’ve tried the “border:none” “background:none” stuff in the img tag on the post itself, but I assume there’s some setting in the CSS that is overriding this?

  I’ve looked through the Elegant Grunge original CSS but I can’t isolate the code I need.

  Is there something I can change in the CSS to change the image background/padding color? And while we’re at it, change the color of the image caption text?

  The post in question can be found here: http://njoystic.com/2011/02/06/marvel-ultimate-alliance-2-review/

• 

  thesacredpath · Member · Feb 6, 2011 at 6:52 am

  • Copy link

  That white that you are seeing is part of the “caption” CSS. You need to set a background-color: none; for it in the CSS.

  .wp-caption {background-color:none; }

• 

  fazor3d · Member · Feb 6, 2011 at 2:22 pm

  • Copy link

  Ha. I would have never guessed to look there; I was searching through the CSS looking for “image” or “img” and associated tags.

  Thanks thesacredpath. You’ve been an enormous help!

• 

  thesacredpath · Member · Feb 6, 2011 at 6:26 pm

  • Copy link

  You are welcome.