Tabbed Products ''LITE'' version - Delimiter based

Quote:

---

Originally Posted by Alik

Is there a way to change the font color on tabs ?
i need to make the grey font on unfocused tabs diff. color. ?

---

Yes, in the stylesheet_tablitev2.css file there is the class for "unfocused"

Quote:

---

Originally Posted by Woodymon

Very quick and good with your bug fix! All better now. Thanks! I printed the file out and combed thru code with a highlighter ensuring all opening/closing tags for divs, table/tr/td, and nested ifs were properly matched. And all came up fine. I don't think I would have found the logic error. Thanks again.

I need a PHP editor/debugger/developer framework. I understand the Zen Cart devs use Zend Studio. That may be more than I need. But maybe not? What do you recommend?

Woody

---

Good to hear I at least had all the proper tags..especially since I do everything as raw code in UltraEdit.

As far as php editor/debuggers.. I've used the top one.. I liked it.. but it took a bit of work to figure out how to set it all up. But when I finally got it working..it certainly helped.

Nusphere PhpEd - It's a full debugger IDE so you can step through your code and see what it's doing.... They offer a trial period, but the full program is a bit pricey. ($299)

Engine PHP Editor looks nice and has good reviews. It looks to be the same thing.. php debugger IDE. I haven't tried it myself, but they also offer a trial period. It is also far cheaper ($75)


The problem I had with setup was trying to configure my webhost to use the debugger file on their servers. I found just dropping the complete php application into the nusphere project folder and using IIS or apache2triad as your home webserver, it was easiest.

Thanks for info on php dev tools.

I am viewing the CSS information using the Firefox Web Developer extension. But I'm still having a difficult time wrapping my head around the structure of the stylesheet and application of tab class styles.

Are all the classes in the stylesheet_tablitev2.css stylesheet utilized? e.g. wireframe and invisible? It appears if only .ditch-tab-skin-default subclasses are applied in tpl_product_info_display.php?

Also I note two ditchnet-tab-container classes within the stylesheet. Is that correct?

I have a body bg color of light blue and my tab content pane bg color is white. And focused tab is default white and unfocused tab is default grey.

I have updated the tablitev2.css stylesheet as follows:

Quote:

---

.ditch-tab-skin-default .ditch-unfocused {
color:#999;
border-bottom:1px solid silver;
background:transparent url(../images/default_tab_bg_gray_transparent_right.gif) 100% 0 no-repeat;
}

.ditch-tab-skin-default .ditch-focused {
border-bottom:1px solid white;
background:transparent url(../images/default_tab_bg_white_transparent_right.gif) 100% 0 no-repeat;
}

.ditch-tab-skin-default .ditch-unfocused .ditch-tab-bg-left {
background:transparent url(../images/default_tab_bg_gray_transparent_left.gif) 0 0 no-repeat;
}

.ditch-tab-skin-default .ditch-focused .ditch-tab-bg-left {
background:transparent url(../images/default_tab_bg_white_transparent_left.gif) 0 0 no-repeat;
}

---

However both the focused and unfocused tabs still show white in the left corners. But the right corner of both the focused and unfocused tabs indeed correctly appear transparent. Thus is there an issue with the two supplied *transparent_left.gif images?

Or if I'm barking up the wrong tree is there an example of how to apply the transparent tab images?

And how to change tab color without losing rounded corners? Or must we generate our own gifs when wishing to change tab color and maintain rounded corners?

The more I learn what can be done with CSS, the more I learn that I don't know CSS as much as I had assumed ;)

Thanks,
Woody

Hey woody,

A few posts ago I was discussing working on making the images transparent. I seemed to get it to happen, but the problem is actually the way the images overlay. Really its an illusion... the tabs have a "right side" background image that goes all the way across. the "left side" image is then placed on top of the left edge. The problem is that the right image is squared off at the edge. So its like trying to cover a square with a circle.. you see the corners.

I tried making the left edges of the "right side" images transparent, but to no avail. (thought for sure that would work... but it didnt)

The original options I could think ok were:

- Make new images to match the colors better.
- Make designer tabs with flat left sides so you wouldn't even see the corner, as it would be a square covering a square.

But yesterday I actually found an example where they added padding to the right image to prevent this exact problem in css. it was for a different tab set, but I'm looking into how I can add the same padding to this css.

I will keep working on it and let you know what I find out. But it seems that its just a simple padding issue.

Quote:

---

Originally Posted by qhome

The problem is that the right image is squared off at the edge. So its like trying to cover a square with a circle.. you see the corners.

I tried making the left edges of the "right side" images transparent, but to no avail. (thought for sure that would work... but it didnt)

---

Just to know we are looking at this from the same perspecitve ;-) ... It is the right corners which look correct to me and it is the left corners which are not appearing transparent.

Thanks for the explanation in regards to the illusion. I just viewed the gif files and I now understand better.... I think.

Good luck in the CSS padding manipulation research.[/QUOTE]

Heh.. to clarify.

the tabs are made of 2 images. the "left-side" image is very skinny and has a curved left side and a flat right side. The "right-side" image is verrrrrrry long and it actually takes up the whole background image of the tab. The right side of that image is the curved side, and the left side of that image is flat.

The left side image is then placed on top of the right side image to give the look of a curved side... but the left corner cant fully cover up the left side of the "right-side" image because its square.. and it has to be so it can expand and contract as tabs can be named really long or really short.

So there is some way of padding the right image to not go all the way to the left edge of the tab background.. then the "left-side" image will actually be sitting on top of the invisible pad, and you wont see the left edge of that "right-side" image.

Well, I have a strange feeling I may be "barking up the wrong tree" as well, but here goes. I have put the LITE tabbed product into my system. I currently have been playing with two different products. One with tabs, the other without.

My standard product type displays the content correctly in both IE and Firefox. Even when using Firefox with the tabbed product, it displays fine as well.

But as soon as I look at the tabbed product in Internet Explorer, all the content becomes centered and my "additional images" no longer display along side of one another. Instead the images are placed in a vertical order. (Note that this also seems to be the case with the "Home/Main" page and the "New Products" listing.

I noticed that each custom tab had it's own CSS code (id="productDescription1" / id="productDescription2" / etc.) so I put in CSS code as an experiment :

#productDescription1 {
text-align: left;
}

This correctly aligned the content of the first tab from centered to left-aligned. Any clues as to what is going on with this.

You can see the site at: http://www.clf1670.org/cart/index.ph...&products_id=4

Thanks,
Kevin L.

Also, note that the quantity of a product is not displayed. I can look at the source and see the code listed, but it does not show up on the tab in either FF or IE.

I have yet to take a closer look at this particular problem.

Kevin L.

Quote:

---

Originally Posted by qhome

Heh.. to clarify.

---

Q-

You explain things very well. Now I comprehend. Thanks!

woody

Quote:

---

Originally Posted by scubes13

I noticed that each custom tab had it's own CSS code (id="productDescription1" / id="productDescription2" / etc.) so I put in CSS code as an experiment :

#productDescription1, #productDescription2, #productDescription3 {
text-align: left;
}

---

This is actually a bug that I created trying to be "w3c compliant". It gave me errors saying that I couldn't have multiple of the same div ID.. but I didn't think about it being in the CSS like that. Really the class is class="productGeneral biggerText" so I would think that the CSS text-align:left; should fall under that category in the core zen-cart css file.. But Im not a CSS expert. A couple of ways you can fix that:
1. add text-align: left; to the 'productGeneral biggerText' section of the zen-cart css file.
2. In the tabbed tpl file, find all instances of id="productDescription'.$a.'" and change them to id="productDescription". This will throw a minor annoyance in the xhtml validator tho.. but it still shouldn't affect anything
3. Add
#productDescription1, #productDescription2, #productDescription3 {
text-align: left;
}
for all the potential tabs you will need.

I think choice 1 "should" work though.

Quote:

---

Originally Posted by scubes13

Also, note that the quantity of a product is not displayed. I can look at the source and see the code listed, but it does not show up on the tab in either FF or IE.

I have yet to take a closer look at this particular problem.

Kevin L.

---

It looks like you haven't enabled it globally from the admin area. It will only show it if you have that stuff globally enabled from the admin panel first. This is true for all the tabs.

You can enable it in CATALOG->PRODUCT TYPES->Product - General and enable them

As far as the Images lining up weird. This "i dont think" is anything that I'm doing since you are also having that problem on your home page. I have another site that appears fine in IE with regards to Text and additional images. So I'm not sure what the problem is there.

Q -

Well, I had to add the bit of code for "productGeneral biggertext" to my CSS code. That fixed the alignment issue with the text.

#productGeneral .biggerText {
text-align: left;
}

I am still trying to sort out the issue with the alignment of my additional images.

At any rate, in regards to the Product Description information (quantity on hand, etc.) I looked in the Admin area. I did not see anything that would turn that information off. Nor do I really recall ever having made such a change. Anyways, I did a "select all" on my product page after clicking on the "Product Description" tab, and I could see the Quantity information highlighted. So it is actually being output. I am checking further CSS to see if it is being hidden for some reason (although a select all does display it).


Now off to see if I can run down these issues any further.

Thanks,
Kevin L.