bdbrown on "Remove white space / margin / padding around content in middle column"

ساخت وبلاگ

آخرین مطالب

امکانات وب

bdbrown on "Remove white space / margin / padding around content in middle column"

I am using the Hueman Theme, and it's awesome! However, I would like to remove all of the white space (padding? margin?) around the content in the center column. I am currently using the 3-column layout with main content in the center, and I would like my sliders, etc. to extend all the way to the gray background of the sidebars. Is there a way to do this? I already tried changing both the specific row's settings and the global settings to "full width" but to no avail.

My site is https://trisef.com

I would recommend using a child theme or a plugin that allows you to add custom CSS so any changes you make will not be removed when your theme is updated.

Try adding this CSS:

.pad { padding: 0px;
}

Thanks for the prompt reply! But unfortunately, that did not work...

Try removing the padding by inheriting the parents like below:

#page .content .pad { padding: 0;
}

Apply the above css code either in your child theme or in parent theme's style.css and see if it's working if not then use the following one:

#page .content .pad { padding: 0px !important;
}

The padding of the center content will be removed and the left and right whitespace of the content section will be removed.
Hope this is what you want

wayne7941
Member
Posted 13 hours ago #

Thanks, but that didn't work either. Btw, the "#page" part of the code shows up red...am I supposed to input a value (such as the post id or something)?

wayne7941
Member
Posted 13 hours ago #

I tried to look in Hueman theme's style sheet, not sure which part(s) applies to what I need, but here are some that I thought might apply??

Base layout:

#wrapper { min-width: 1024px; height: 100%; }
.container { padding: 0 20px; }
.container-inner { max-width: 1380px; min-width: 1380px; width: 100%; margin: 0 auto; }
.main { background-color: #fff!important; position: relative; }
.main-inner { position: relative; min-height: 600px; /* instead of sticky footer */ }
.content { width: 100%; position: relative; }
.pad { padding: 30px 30px 20px; }

3-column content middle:

.col-3cm .main { background: url(../img/sidebar/s-right-s2.png) repeat-y right 0; }
.col-3cm .main-inner { background: url(../img/sidebar/s-left.png) repeat-y left 0; padding-left: 340px; padding-right: 260px; }
.col-3cm .s1 { float: left; margin-left: -340px; }
.col-3cm .s2 { float: right; margin-right: -260px; /* ingenuity! */ position: relative; right: -100%; }
.col-3cm .content { float: right; }

@wayne7941 -

1. Your child theme CSS isn't working because you're missing two closing brackets:

@import url("../hueman/style.css");
.sidebar .widget { padding: 30px 30px 0px; }
.widget { font-size: 18px; <------------
.ps-widget--exteal { font-size: 18px; <------------
.entry { color: black; }
.entry.excerpt { color: black; }

2. Fix those and then add this:

.content .pad { padding: 0;
}

3. You don't need the @import line.

wayne7941
Member
Posted 7 hours ago #

@bdbrown -

It didn't work at first, but then I added 'px' to '0,' and it worked! Thank you, thank you, thank you! You're amazing.

I don't suppose you could tell me how to only apply it to certain pages?

wayne7941
Member
Posted 7 hours ago #

What I mean is, I like having no padding on the homepage and others, but all of my WooCommerce store pages look better with the padding, and I don't know how to edit the woocommerce pages...

You can identify the page by looking at the <body> element classes:

<body class="archive tax-product_cat term-books term-18 plg-peepso woocommerce woocommerce-page col-3cm full-width topbar-enabled mobile-sidebar-hide chrome product-columns-3 s1-collapse s2-collapse" cz-shortcut-listen="true">

In this case we want to apply the padding style to all pages except the store pages. The store pages are identified by the ".woocommerce-page" class so we can exclude them using the CSS "not" property (https://css-tricks.com/almanac/selectors/n/not/):

body:not(.woocommerce-page) .content .pad { padding: 0px;
}

bdbrown
Member
Posted 3 minutes ago #

Also, since you're using a child theme you don't need the CSS plugin. Move that CSS code from the plugin to the child theme style.css file and remove the plugin.

- - , .
.

WordPress ...
ما را در سایت WordPress دنبال می کنید

برچسب : نویسنده : استخدام کار wpss بازدید : 291 تاريخ : سه شنبه 22 تير 1395 ساعت: 10:45

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه