I created a grid/list toggle and would like to display a portion of the product full description on the list display, instead of the short description (because its content is identical to the product name - duplicate content).
The problem is, I can't seem to get the css(?) right:
This is what I have for the php, and it seems to work fine vis. the live display:
<?php // replaced Product Short Description with full product description when on list-view
if (!empty($product->product_desc)) {
?>
<p class="product-description">
<?php
echo shopFunctionsF::limitStringByWord ($product->product_desc, 500, '...')
?>
</p>
But for the css, where I used to have this callup (.grid-view p.product_s_desc{display:none;}), I can't get this variation to work: .grid-view p.product_desc{display:none;}
Does "product_desc" not exist as a callup? I duplicated it in vm-ltr identical to product_s_desc and it doesn't work:
p.product_s_desc{margin-bottom:6px;padding:0;}
p.product_desc{margin-bottom:6px;padding:0;}
You answer your own question!
<p class="product-description">
Actually I did try that before and it didn't work:
I see that class called up 1 time in vm-ltr.css here: .productdetails-view .product-description,.product-fields{margin:15px 0;}
but when I refer to it like this .grid-view p.product-description{display:none;} it still displays the text...
and if I create a callup, like this: p.product-description{margin:15px 0;}, and refer to it further down with .grid-view (as above) it still displays the text... what am I doing wrong?
I have no idea but your making it so complicated - just learn to use Firebug and it will be like a new day dawning
It looks like the problem is related to the text styling of the description: when I chose to display the full description it's displaying all the style elements (color, font size etc.) created in the editor.
Is there a way to call up the description but as text-only without any accompanying styling that gets displayed on the product details screen?
I'm zeroing in on the problem:
the description tag $product->product_desc was pulling in a lot of styling elements from TinyMCE which my simple css command ( .grid-view p.product-description{display:none;} ) wasn't able to block.
stripping out the styling, what is left is this in the html:
<p class="product-description"></p>
<p>the product description text...</p>
calling up .grid-view p.product-description{display:none;} doesn't block the text from appearing but using .grid-view p {display:none;} does... the problem is, it also blocks everything else that gets called up with <p...>, like the product details button.
Based on the html I have here, is there a more precise way of writing that css display none call-up so I don't block out everything called up with <p ?
I did try p.product-description p {} but that didn't work...
.grid-view p.product-description{display:none !important;}