[chipbphoto]

Hi Sakin,

I am trying to create what appears as a solid block of information in the Homepage Featured Content area. I have the background color of both the homepage headline and the featured content area the same color.

How can I:
– Reduce the space between the Homepage Headline and Featured Content
– Color the surrounding background of the featured content area to be #cccccc
– Reduce the empty space at the bottom of the featured content boxes
– Place an outline that surrounds the entire headline/feature content area

http://www.beingvalued.com

Many thanks!
chip

[Sakin]

Hi Chip,

1. Reduce the space between the Homepage Headline and Featured Content
— You can adjust the padding in the following css and then add it in “Appearance => Theme Options => Custom CSS” box.
.blog #main { padding-top: 50px; }

2. Color the surrounding background of the featured content area to be #cccccc
— you have already changed that.

3. Reduce the empty space at the bottom of the featured content boxes
— You can adjust padding and margin as per your need and then add it in “Appearance => Theme Options => Custom CSS” box.

#featured-post .post { padding-bottom: 50px; }
#featured-post p { margin-bottom: 40px; }

4. Place an outline that surrounds the entire headline/feature content area
— You can only separate headline but not featured Content area. Featured content area is linked with your latest post wrap. We cannot change this just with css. For this you need to build child theme and edit the placements though action hook.

[chipbphoto]

Hi Sakin – thanks as always for the great info! Here’s the update:
1 – done

2 – I’m actually looking to fill in the white area in between the content boxes with the #cccccc color. Currently, there is a white area with 3 blocks that are #cccccc in color. To the viewer, I want them to see a single rectangle of color for the content area. (note: I am using the featured content area as a static message, not tied to a post)

3 – done

4 – understand.

In the same area, is there a way to add a little padding to the inside of the content boxes so the text is not right up against the box edge?

Lastly, is there a way to add a space below the featured content area/above the blog post-widget area? The goal is to add a bit of space for a visual separation.

Many thanks!
chip

[Sakin]

2: The features post by default in inside the main wrapper. So, you will not be able to change the color of left and right side of featured content just from CSS. You need to hire the customizer and move the feature post before wrapper. But yes you can add #ccc color in between the featured post. For this, you can add the following css in “Appearance => Theme Options => Custom CSS” box.
#featured-post { background-color: #ccc; }

If you want to have spaces in homepage message then try the following css.

#homepage-message {
    background-color: #fff;
    border: none;
}
#homepage-message p { background-color: #ccc; }

To add margin below the featured content, you can add the following css in “Appearance => Theme Options => Custom CSS” box.
#featured-post { margin-bottom: 30px; }

For detail customization, I recommend you to hire customizer http://catchthemes.com/hire-customizer/

[chipbphoto]

Thanks Sakin!

[Author]

Posts