Docs

[ptbright1]

Here’s what I’m hoping to accomplish. I’d like my post content to appear in a white box, with ample padding, and have space around all edges of the box to reveal the background color. How can I achieve this?

BTW, I’m working locally, but here’s a screenshot of what I’d like to accomplish.

[ptbright1]

Here’s that screenshot.

[Rad]

Hi there,

Thanks for posting in.

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

@media ( min-width: 980px ) {
.x-main.left {
    padding: 70px 35px 35px 35px;
}
.page .x-main.left .hentry .entry-featured, .single-post .x-main.left .hentry .entry-featured {
    margin-right: 0px;
}
.x-container.main:before {
    top: 0px;
    bottom: 0px;
    width: 72%;
    left: 0px;
}
}

Hope this helps.

[ptbright1]

Thanks! That seems to have worked. Now, can you help me do that with sidebar widgets? I’d like to have each widget in an individual box with space for the background to be visible in between. How do I do that?

Rough screenshot attached.

Thanks!

[Rad]

Hi there,

Please add this CSS as well,

.x-sidebar .widget {
    color: #333;
    background: #fff;
    padding: 15px;
    margin-top: 3em;
}
.x-sidebar .widget:first-child {
    margin-top: 0;
}

Cheers!

[ptbright1]

That seems to have added space, but isn’t breaking them into individual boxes. I want each widget in it’s own box. Here’s a screenshot of what happened after that code:

[Rue Nel]

Hello There,

Do you want something like this, http://prntscr.com/coqlaq? To break the sidebar widgets into individual boxes, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media ( min-width: 980px ) {
  .x-main.left {
    padding: 70px 35px 35px 35px;
  }

  .page .x-main.left .hentry .entry-featured, .single-post .x-main.left .hentry .entry-featured {
    margin-right: 0px;
  }

  .x-container.main:before {
    top: 0px;
    bottom: 0px;
    width: 72%;
    left: 0px;
  }
}

.x-sidebar .widget {
    color: #333;
    background: #e5e5e5;
    padding: 15px;
    margin-top: 3em;
}

.x-sidebar .widget:first-child {
    margin-top: 0;
}

I would recommend that you create a staging site. This is very useful because you can test drive any X updates in the staging area, do the customizations, easier for us to give any support you need and troubleshooting without disrupting your live site. Once everything is perfect, you can easily and flawlessly proceed the update in the live site. To know how to create a staging area, please check out these articles:
http://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/
https://maintainn.com/2015/02/how-to-create-a-staging-site-for-wordpress/

Please let us know how it goes.

[Author]

Posts