Breadcrumb Nav 100%

Hi I have googled and searched forum to find out how to make the navbarBreadcrumb fit 100% of the page and sit above the left and right sideboxes.

I did find one mention of customising tpl_main_page.php and have looked at this file but most of it I cant understand.

Site ishttp://www.fusionherbsorganics.com.au/index.php?main_page=index&cPath=1

I am also trying to get the images in the left sidebox to be centred.
I understand that I am meant to target .sideBoxContentItem a img and this class does not exist in stylesheet .. so should I make it up/add it? I use firefox developers toolkit with the outline>current element to find the names of the various elements.

Is this the convention for styling in the stylesheet when the class does not exist? Have I confused myself .. it wouldnt be the first time lol.

Also if I want to move the log in from the top of the page to one of the sideboxes do I install this mod login_box_1.6.

Thanks!

PS have zen cart 1.3.9h and have template override system in place.

You can get CSS to adjust the breadcrumbs. It's an "untidy" way of doing it, but it gets the result you want and is easier than code edits to PHP files.

Put this at the BOTTOM of your stylesheet.css

/* - - - BREADCRUMB POSITION OVERRIDE - - -*/
#navBreadCrumb {margin-left: -150px; margin-right: 5px;}

(or: #navBreadCrumb {margin: 0px 5px 0px -150px;}

Your column pics ARE centered, but as they are quite WIDE, and the column width is 150px, they are nudging up to the RIGHT HAND SIDE of the column. There are also padding and margin settings for the sideboxes in the CSS. These also need to be taken into account.

You need to make size adjustments to your column and your images. These are done in the configuration menu, under LAYOUT SETTINGS and IMAGES.

Play around until you get the size you want.

If you see an ELEMENT ID (such as a css class or id) appearing in the HTML, it means that the software is applying the ID (or CLASS) to an element.

In a lot of cases, elements are not styled individually, because they can just "inherit" a parent style, or a collective" style. So you won't see any declaration for them in the stylesheet.

But you can add these in as and when you need to. Just follow CSS rules and protocols and it will be OK.

Thanks so much. You guys moderating this forum are AWSOME!:clap:

I did have one part of this post that was not answered and that was the bit about moving the log in at the top of the page to one of the sideboxes.

Also is it possible to add products without an image .. so that the no picture available is not there either. I know you are thinking why would you want to but I have client who wants exactly that.

Thanks again

Sorry your css breadcrumb worked for it to go left but I still cant get it to go right across the page. Thx

wotnow:

Sorry your css breadcrumb worked for it to go left but I still cant get it to go right across the page. Thx

Apply the same principles as you have done for the LEFT side, to the RIGHT side.

Nudge the right column down (like yiu did with the left), then give the breadcrumb element an absolute width in the css declaration, where that width stretches it across the content area.

Hi Thanks for your response. I already tried that. If you apply the same css to the right as to the left .. the right content box gets shifted out to the right. I tried adding a right margin to the right content. I can find no float properties for this sidebox.

Hi I am still waiting to find out how to make the breadcrumb fit 100% across the page.

All my attempts have pushed the whole right side bar across. Any suggestions would be much appreciated. Thanks.

There are a couple of factors you need to account for. Change your stylesheet rules like this:```
/* - - - BREADCRUMB POSITION OVERRIDE - - -*/
#navBreadCrumb {
margin: 0px -180px 0px -180px;
background-color:#9a8e7e;}

/* top padding on side boxes */

#navColumnTwo.columnRight {
padding: 3.8em 0 0 0;
margin: 0;
background: none;}

By the way, you have a whole bunch of rules setting the same properties for #navBreadCrumb, which could cause confusion. Best to consolidate all of them into one rule.

Wow thank you so much that has been bugging me for ages. Would you mind explaining to me how I can get my images to display centre.

I have used the find and replace in dreamweaver and from what I can see all img tags are set align-text:center

and I tried

#productMainImage.centredContentback a img {
margin:0auto;
text-align:center;
padding: 1em 0 0 0;}

I cant seem to get the h1 tag and the image centred. Thanks

I can only see the down for maintenance page, so can't diagnose the image styling now.

#productMainImage.centredContentback a img {
margin:0auto;
text-align:center;
padding: 1em 0 0 0;}

If this an exact copy of what you have, there are a couple of errors in it.

#productMainImage.centeredContent**.**back a img { <--you need the exact spelling, and another dot for the .back class.
(Actually, those classes are basically irrelevant to the rule - the id is generally sufficient.)
margin:0 auto;
text-align:center;
padding: 1em 0 0 0;}

Ok sorry have removed down for maintenance. Thanks

The .back class applied to the main image makes it float left. To counter this, change your rule#productMainImage.centredContentback a img { margin:0auto; text-align:center; padding: 1em 0 0 0;}to```
#productMainImage {
float: none;
margin:0 auto;
text-align:center;
padding: 1em 0 0 0;}

wotnow:

Also is it possible to add products without an image .. so that the no picture available is not there either. I know you are thinking why would you want to but I have client who wants exactly that.

Thanks again

Easy -

In your product description add this at the end..

Now this will remove the pic for any individual product page you like. If you want to simply remove all product images, just put the above in your stylesheet.

Obviously with adding these things to your product description you can can turn off anything you like for individual products - such as price - or add to cart button, anything. You can turn a product into an information page within a category.

You might also try setting Configuration > Images > Image Required to false. This will let absent images silently be ignored.
Set Product Image - No Image Status to 0.