Changing CSS for my post background

• 

  nationalmarketing · Member · Jun 22, 2014 at 11:27 pm

  • Copy link
  • Add topic to favorites

  Hello, I am using the “Fictive” theme, and I’m trying to change the background of the floating box that holds each post. I’ve purchased the customizable functions, which allows me to easily change the background of the full page, as well as some other colors without getting into the CSS coding, but it doesn’t let me change everything.

  I’d like to change the background color the floating boxes that each post sits in. I’ve tried two ways to try to change the background using CSS, but neither changed exactly what I wanted it to change.

  .hentry-wrapper { background-color: #ccc; padding:2em; }

  and

  .entry-content { background-color: #ccc; padding:2em; }

  But the first one made a thick grey border around the floating boxes and the second only highlighted the exact space that the text lied, but not the full box.

  Does anyone know the correct piece of code that would make the full floating box background change to grey?

  Thank you so much! I appreciate the help!

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

• 

  designsimply · Member · Jun 23, 2014 at 2:38 pm

  • Copy link

  I checked http://nationalfoodgroup.wordpress.com/ and I see it’s currently setup to use the Confit theme.

  So I looked at the Fictive demo site at http://fictivedemo.wordpress.com/ and I think the following CSS will make the change you were looking for in Fictive:

  .hentry {
  	background-color: #ffc;
  }

  Adjust the color code as needed.

  If you also wanted to change the background color of the site title area at the top left and the comment boxes on individual posts, you could adjust the example to this:

  .site-branding,
  .hentry,
  .comment-body {
  	background-color: #ffc;
  }

  You could add other elements as needed. Here’s a guide about how to find what selectors to use:

  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

• 

  nationalmarketing · Member · Jun 30, 2014 at 1:17 am

  • Copy link

  Thank you! I eventually did the combination of these two, and it worked, covering the entire area I wanted with the new color:

  .hentry {
  background-color: #eee !important;
  padding: 2em;
  border: 2px solid #41596a;
  }

  .entry-content {
  background-color: #eee;
  padding: 2em;
  }

  Thank you so much! I appreciate our time with this. I can’t try the comment css just yet, because my blog is private and I cannot seem to comment on it. (Unless my internet is just slow.)
  But I was try that later, because I’d love to change the background color of individual comments!

• 

  designsimply · Member · Jul 2, 2014 at 10:46 am

  • Copy link

  because I’d love to change the background color of individual comments

  One trick that’s helpful is to look at the demo site and use the built in browser tools to try things out.

  Here is a post from the Fictive demo site with some comment:
  http://fictivedemo.wordpress.com/2011/07/07/best-coffee-ive-ever-had/#comments

  Here is an example video showing how to find and test the selector needed to change the comment background color in the Fictive theme:

  Here is the CSS example from the video:

  .comment-body {
      background: #ffc;
  }

• 

  nationalmarketing · Member · Jul 2, 2014 at 11:27 am

  • Copy link

  Thank you! Those links will be very helpful for reference. I appreciate your help!