• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Need help creating space between posts filled with background?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Need help creating space between posts filled with background?

This topic is: resolved

Tagged: Mindstream

  • This topic has 4 replies, 2 voices, and was last updated 11 years, 1 month ago by kelsum.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 31, 2014 at 2:39 am #107598
    kelsum
    Member

    Hello,

    I would like to create space between posts filled with the site's background. Examples of what I like are http://thewiredteacher.com/ and The 411 Pro Theme.

    My site: http://www.resilientartist.com
    I'm currently running the Mindstream theme

    Please help?

    Thanks

    http://www.resilientartist.com
    May 31, 2014 at 3:48 am #107600
    eamonmoriarty
    Participant

    At line 489 of style.css I removed the white background color to leave it transparent

    #content {
        box-shadow: 0 0 3px #BBBBBB;
        float: left;
        padding: 25px 40px;
        width: 600px;
    }

    At line 512 of style.css I have added a background color (white) and padding like this:

    .post {
        background-color: #FFFFFF;
        border-bottom: 5px solid #EEEEEE;
        margin: 0 0 25px;
        padding: 10px;
        position: relative;
    }

    You could also add a border if you wish
    You can play around with the values, colors etc to suit yourself.


    Eamon Moriarty
    EM Dzine

    June 1, 2014 at 8:57 pm #107799
    kelsum
    Member

    Solved it!
    Thanks very much!!!!

    Do you know how to widen the posts to the left? Make the white space of the post take up more of the space to the left of the screen?

    Thanks again!

    June 2, 2014 at 5:47 am #107810
    eamonmoriarty
    Participant

    I'm not sure if this is what you have in mind:

    At line 489 of style.css you have:

    #content {
        box-shadow: 0 0 3px #fff;
        float: left;
        padding: 25px 40px;
        width: 600px;
    }

    You could increase the width of the content to 640px and decrease the padding on the left by 40px like this:

    #content {
        box-shadow: 0 0 3px #fff;
        float: left;
        padding: 25px 40px 25px 0px;
        width: 640px;
    }
    

    That will increase the with of the content

    If you actually want more whitespace at the left of your posts you can change line 510 to the following:

    .post {
        background-color: #FFFFFF;
        border-bottom: 5px solid #EEEEEE;
        margin: 0 0 35px;
        padding: 20px 20px 20px 40px;
        position: relative;
    }

    The 40px gives you more padding on the left pf your posts. You can change the value to suit yourself.


    Eamon Moriarty
    EM Dzine

    June 3, 2014 at 4:51 pm #108013
    kelsum
    Member

    Thanks again for your help Eamon!!!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble