Theme alignment with sidebars

72hourplan
(@72hourplan)

12 years, 10 months ago
I have reviewed the forums and the “Theme Integration Guide” provided by WooCommerce. still no luck.

I tried the woocommerce_content() function process, and it does return product and category pages, but the alignment is way off, it places the category page below all my other content.

my page.php calls the sidebars first, then the content area.. I put the woocommerce_content() function call in place of my content section that contains the_loop .
```
<?php get_sidebar(); ?>
 <div id="contentbox">
    <?php if (have_posts()) : ?>
...
    <?php EndIf; ?>
```
replaced by
```
<?php get_sidebar(); ?>
  <div id="contentbox">
  <?php woocommerce_content(); ?>
```
no love on category, although product pages seem to be in the middle where i want them, albeit very messy formatting, which I think I can fix once I have the basic pages showing up in the right places.

next I tried using the hooks as indicated:
I get returns, with proper css format, but now ABOVE all my other content and not in the <div id="contentbox"> which is the div id I called in the hooks.
```
function my_theme_wrapper_start() {
  echo '<div id="contentbox">';
}

function my_theme_wrapper_end() {
  echo '</div>';
```
any ideas on how to get the content BETWEEN my sidebars rather than above/below them?

here is a look:
http://my.72hourplan.com/product-category/communication/

http://ww.wp.xz.cn/plugins/woocommerce/

Viewing 9 replies - 1 through 9 (of 9 total)

Thread Starter 72hourplan
(@72hourplan)

12 years, 10 months ago

update: still not working, but I found this in the static code and perhaps someone can help me find it in the files:

<div class="term-description">...</div>

which is returning tons of blank space, thus moving my category results to the bottom of the page.. I’ll keep looking, and maybe someone here can help too.

Roy Ho
(@splashingpixelscom)

12 years, 10 months ago

Your issue isn’t with WC plugin but with basic CSS knowledge.

You have your left and right sidebar one is floated to the left and the other to the right respectively. Then you have the content area which is encased with the container “div#contentbox”. But that container has no float property and it comes after the sidebars in the DOM tree, therefore it is below the sidebars.

So one way you can resolve this is to put a float left on that container.
Thread Starter 72hourplan
(@72hourplan)

12 years, 10 months ago
Thank you for the suggestion, here is my CSS: and it still does not render the category or product page in the center. (i added the float left to the #contentbox as you suggested)
```
div#contentbox {
  margin-top: 10px;
  margin-left: 210px;
  margin-right: 210px;
  line-height: 1.3em;
  float:left;
}
div#sidebar-left { float: left; }
div#sidebar-right { float: right; }
```
I removed the float:left; from my content box, now my pages and products are rendering in between my sidebars, but my category archive is still below everything. I will keep working on this, and hope to post a fix for benefit of others.
Roy Ho
(@splashingpixelscom)

12 years, 10 months ago

What do you mean it doesn’t work… I just look at your site, now your content is between the sidebars…

Roy Ho
(@splashingpixelscom)

12 years, 10 months ago

And you have way too much margin on the contentbox…

Change them to 20px each.

Thread Starter 72hourplan
(@72hourplan)

12 years, 10 months ago

browser? I have looked with IE9 and Chrome, neither one renders the category archive page correctly.

I agree – the product page is now rendering correct.

if you want to chat – 72hourplan(at)gmail DOT com works for me.

Roy Ho
(@splashingpixelscom)

12 years, 10 months ago

Trust me it works. Just put this.

float:left,
margin-left:20px; // instead of your 210
margin-right:20px; // instead of your 210

This will put your content box inbetween.

The reason why it didn’t work for you is you had 210 and your screen resolution is small…

Roy Ho
(@splashingpixelscom)

12 years, 10 months ago

Your 20px isn’t working because else where on your site has 210 set that is more specific than your 20.. meaning it comes after your 20px thus overriding your settings.

So you can put margin-left: 20px !important; margin-right:20px !important; to override that..

But this is a workaround. You should really look into what is setting that 210px…

Thread Starter 72hourplan
(@72hourplan)

12 years, 10 months ago

Okay, I found the problem.
the WordPress “Settings” area has a “Sharing” section.

Inside the sharing section at the bottom is asks which area to show sharing buttons on.

this sharing button function calls a large amount of empty space, not sure why and i haven’t located where yet, but the current work around is easy enough… uncheck the first box named “Front Page, Archive Pages, and Search Results” b/c WC returns the categories pages as “archives” so it then adds the share buttons and all that extra blank space to the $description string in the woocommerce-template.php file ->
woocommerce_taxonomy_archive_description() function call.

unchecked the box, now there is no excessive empty space on the category archive page.

Once i figure out why that empty space is rendering in the first place, then I will update this post.

BTW – I appreciate the CSS suggestions, but I found my site renders better leaving it the way I had it.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Theme alignment with sidebars’ is closed to new replies.

Tags