Hello David,
I would like to add tabbed content to the products page, and I found in foundations' documentation a way to do this (http://foundation.zurb.com/docs/v/3.2.5/tabs.php). I managed to take the css for the tabs from the latest foundation release, but when you click on the tabs, they don't switch. I assume it has something to do with the javascript, but I'm not sure how to implement it.
Also, I'd like to create a border around the product image on the products page, and be able to assign a colour to it; although there isn't an option to do this in the css file.
Thanks,
Islam
Hello David,
Yes, that worked, but I was using the contained tabs; the tabs now switch, but the content has lost its border. Do you know why this is?
Thanks again for the help!
Islam
Hi,
If you have added a style for your content container in html/default.css you may need to use the !important flag to override the default Foundation style, for example if you have the class tabcontent have a go with:
.tabcontent {
border: 1px solid blue !important;
}Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Hello David,
Thanks for the help. Sadly this doesn't work. I think it has something to do with the fact that the updated code is no longer using "lists" for the content. I'm using the following classes for the active and non-active tab containers:
<div class="content contained active" id="panel1">
<div class="content contained" id="panel2">The class must be "content contained" to appear correctly. Remove the content part, and the contents of all the tabs appear on top of each other; and remove the contained part, and it removes the padding within the content section. The section in the foundation css file where it's taking the code from does have the correct variables (.content.contained>li{ border: solid 0 #e6e6e6; border-width: 0 1px 1px 1px; padding: 20px; }), but there seems to be a conflict somewhere. I removed the code from the default css just to double check, but this doesn't seem to be affecting it. It really has me stumped!
Thanks again!
Islam
Hi,
The CSS looks like it would only apply if using <li>, perhaps try adding the same but without the li selector to your own CSS (which is loaded after Foundation's)
.content .contained> { border: solid 0 #e6e6e6; border-width: 0 1px 1px 1px; padding: 20px; }As always when editing CSS, don't forget to do a hard refresh (normally CTRL+F5) to ensure that it is reloaded by the browser...
Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Hello David,
Thank you, that worked! I swapped out the following in the foundation css file (I left the <li> section as above):
.tabs-content>.content.contained{padding:0.9375rem}with:
.tabs-content>.content.contained{border: solid 0 #e6e6e6; border-width: 0 1px 1px 1px; padding: 20px;}It seems that the content doesn't take its padding from this section at all, but from the earlier content code.
Thanks again!
Islam
Hello Islam,
Make sure you're using Foundation version 5 tabs (docs here) - that should be all it is.
To style the image on the main product page, edit html/default.css and add a ".pt_p img" class as required, for example:
.pt_p img {border: 1px solid blue;
}
Hope this helps!
Cheers,
David.
--
PriceTapestry.com