3-Column template top tab menu issues

[4erika]

I'm using the 3-column template in pink/green. While playing with the demo site, I was able to change the background color of those tabs on the top menu from green to turquoise/aqua to go more with our company colors. I thought I did that by changing the 5th "extra fields colors" on layout settings.

But now I'm working with the full version of the site and doing the same thing does not seem to work. The tabs are still green. Also...the tabs are showing up in the middle of the pink header bar instead of on top of that bar. I have no idea why this would be happening. It does not show that way in the template example nor did it show that way when I was working in the demo site.

Any ideas? I worked with the demo site for a few weeks to work out all the things I wanted to tweak on the design, and now it's just not working in the full site.

[Jim]

Changing the 5th extra color field changes the tab color for me. Did you do a complete store regeneration (Utilities > Publish > Regenerate) after making the change?
If things are out of place you may have some bad html coding in the header or another text field. (bad html could also cause the tab color to not change)
What is a link to a page with the problem?
To many, or to long of text, for the links on the tabs could also cause display issues if it forces the tabs to a second line or the text to have multiple lines on a single tab.

[4erika]

Not sure if this link will work. I'm working on the new site while keeping my old site live.

http://amerikanbodyart.com/cgi-bin/ss/preview.cgi?&ran1=652&ran2=969&page=1

I did the regenerate thing...still no go. I haven't done any html changes...mostly because I don't know how to. And the text on the tabs looks fine. Even when I just had one tab with very little text, it was still in the middle of that pink header bar.

[Jim]

The link won't work because it requires logging in to the backoffice of your store to see it. If you did a regenerate then the page would have been published. Have you tried looking at the actual page that was created? The Preview does not always reflect style changes because it is loading the page from a cgi and not from the html page.

[4erika]

I have the home page hidden from view because it was interfering with my current website, even though I gave it a different name....

http://amerikanbodyart.com/page12.html

Does this one work? I haven't bothered to hide the other pages since the program is automatically giving them page numbers that don't interfere with my current web pages.

Anyways, this page is still showing the problem that I'm having.

[Jim]

If you don't want files from ShopSite to interfere with your other website you need to give the pages a different file name, not a different name. The file name is way down on the Edit Page info screen.

The link to http://amerikanbodyart.com/page12.html shows turquoise tabs in both firefox and google chrome for me. It may be that your browser has cached the page and won't display the changed version. You should be able to force the page to reload by right clicking on the page (where there isn't an image) and choose the Refresh or Reload option. I think in IE there is also a key command Ctrl F5 or F4 that will force a reload.

I sent an email with a screen shot of what the page looks like to me.

[4erika]

Thanks, Jim. I appreciate all the help. Working in Chrome seems to be better. I just need to figure out if there's a way to force the right hand column to adjust its size to the size of the photo I've stuck there.

[Jim]

Here is the css that is setting the width of the td for the left and
right columns.

Code: Select all

td#left, td#right {
    height: 100%;
    max-width: 180px;
    min-width: 180px;
    text-align: left;
    vertical-align: top;
    width: 180px;
}

So the Maximum width of the column should be (and is in Firefox and
Chrome) 180px. Your image is 300 px wide so there is no way that it can
fit in a column that can't be more than 180px wide. You will either
have to modify the style to allow the column to be wider or make your
image smaller so it fits in the 180 px. The file that contains the
style is http://amerikanbodyart.com/publish/3Column-Basics.css . You
would need to make a copy of the ShopSite "Publish" file named
3Column-Basics.css under Merchandising > Custom Templates > Publish and
make the changes to that file. I think if you just remove the line "max-width: 180px;"
it will then allow the column to expand to fit your image. It will probably force the
column to expand outside of the header area since that has a set width.
Once you have made the changes to your copy of the template copy your template
back to one named 3Column-Basics.css and it will be used instead of
the ShopSite template.