D7/UC3/PixtureReloaded: Themed product page, CSS assistance please!

Posted by jon_w on January 3, 2013 at 11:24pm

Hello folks,

I'd appreciate some assistance with (what I think is) a CSS problem.

I have a D7/UC3 site using the Pixture Reloaded theme. I'm trying to theme my product page to look something like this tutorial. Note that this tutorial is for D6/UC2 with a Zen subtheme. I have created a node--product.tpl.php template which is working OK, but I'm stuck on the following:-

1) The product page layout (https://www.popanddot.com.au/content/example-product) renders the views slideshow block above the product description. I'd like it to look more like the tutorial with the description to the right of the images. I have added the CSS file form the tutorial to the theme here, and the rendered HTML shows the DIV tags being used for "product left" and product right", but something's amiss.

2) The left sidebar should show a login form, and the HTML for the form is rendered, but the form isn't displayed. I assume this is related to the CSS I've added, as the form does show up on non-product pages, e.g. the "About Us" page.

I'd appreciate any pointers as to how to solve this.

Cheers,

Jon

Comments

.product_right

Posted by bitradiator on January 4, 2013 at 2:20am

Float .product_right to the right instead of left and limit it's width to no more than 390px.

Set your .region-sidebar-first margin-left property to 0 or a positive value.

If you're not using Firebug you should be. ;) The latest Firefox releases have a similar function built in. Right-click and select "Inspect Element".

Have fun...

--BitRadiator

Thanks for the pointers.

Posted by jon_w on January 8, 2013 at 11:21am

Thanks for the pointers. Unfortunately I've been tied up in something else and unable to focus on this for the last few days.

I've changed the .product_right to float right, and that seems to have done the job.

Changing the .region-sidebar-first margin-left property to 0 makes the log in box appear, but it's still in the footer. I've tried commenting out the clear:left property form the break line like so:-

.product-break-line {
    border-bottom: 1px dotted #CCCCCC;
/*    clear: left;*/
    height: 1px;
    margin: 10px 0;
    width: 100%;

but that doesn't do any good.

Any ideas how I can get the log in box to move back up to the top of the sidebar?

Cheers,

Jon