Hi Baden, I’ve beavered away on this and made some progress, even though the ‘read more’ prompt is a little too far away from the text. Ideally it should be immediately after the last full stop, not in a new paragraph. http://www.gordonsbay.co.za/gordonsbay/suikerbossie-property-for-sale/architectural-masterpiece/
The second issue is this: look at the text. It’s making a real mess of the text in a random fashion, even though I’ve got { font:14px Georgia, “Times New Roman”, Times, serif;} in the Collapse-O-Matic Style CSS box.
Third question (sorry to ask so many!), is it possible to fade the text prior to the ‘read more’ prompt, like this very professional looking page http://codecanyon.net/item/email-customizer-for-woocommerce/8654473
Many thanks!
Norman
Hi Baden, thought I’d include this from the WordPress Stylesheet CSS:
#wrapper {
}
html, body { margin:0; padding:0; }
body { font:14px Georgia, “Times New Roman”, Times, serif;}
a { text-decoration:none; }
a:hover { text-decoration:none; }
.fix{ clear: both; height:1px; margin:-1px 0 0; overflow: hidden }
.fl{ float: left }
.fr{ float: right }
.ac{ text-align: center }
.ar{ text-align: right }
hr { margin-bottom:30px; margin-top:20px; clear:both; }
.hr2 { margin:0px; padding:0; clear:both; }
h1,h2,h3,h4,h5,h6 { font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
#wrapper h1 { margin:0 0 15px 0; padding:0; font-size:24px; font-weight:bold; }
#wrapper h1.main_title { float:left; width:600px; }
.likethis { overflow:hidden; float:right; width:315px; }
.facebook { padding-top:12px; padding-left:12px; }
.twitter-share-button { float:left; padding-top:12px; }
h2 { font-size:22px; }
h3 { font-size:20px; }
h4 { font-size:18px; }
h5 { font-size:16px; }
h6 { font-size:14px; }
/* WordPress default image css class format ———-*/
.alignleft { float:left; padding:4px; margin:7px 25px 18px 0; text-align:center; }
.alignright { float:right; padding:4px; margin:24px 0 0px 12px; text-align:center; }
.aligncenter { text-align:center; padding:5px; margin:10px 0; background:#fff; border:2px solid #eee; }
.alignleft { border:1px solid #a9a9a9; background:#fff; }
.alignright { border:1px solid #a9a9a9; background:#fff; }
.wp-caption .alignleft { margin:0 15px 10px 15px; padding:0; }
.wp-caption p { margin:0; padding:3px 5px; font:bold 12px Arial, Helvetica, sans-serif; }
.wp-caption .alignright { float:right; margin:0 0 10px 15px; padding:0; }
.wp-caption { width:auto !important; }
Plugin Author
Baden
(@baden03)
the problem is you are working in VISUAL mode and when you pasted in the shortcode, it pasted all the formating along with it:
<span id="monkey1" class="collapseomatic colomat-visited" title="read more"><span style="color: #ff0000;">read more»</span></span>
Please paste an example of the shortcode (with out the content) and just the internal collaspe trigger. Copy these while in TEXT / HTML mode in the WordPress Editor.
Hi Baden, thanks for the response. I’m sorry to sound so dumb, but I can’t get the code above to work.
I have however, got this code to work ok(ish), though the ‘read more’ is in a new para, not at the end of the sentence (where we would like it to be):
<div id=”target-monkey1″ class=”collapseomatic_content”>It also features open plan dining area etc, etc, etc</div>
<span id=”monkey1″ class=”collapseomatic” title=”read more”><span style=”color: #ff0000;”>read more»</span></span>
<span id=”swap-monkey1″ style=”display: none;”><span style=”color: #ff0000;”>read less</span></span>
Plugin Author
Baden
(@baden03)
Can you try that again, this time be sure to select your code and hit the code button? This will display the code with out trying to parse the HTML.
or maybe we are making this more complicated that we need to. Lets try this: we first get the layout working correctly, then work on the formatting of the trigger and swap text.
Try something clean like the following:
<span id="target-monkey1" class="collapseomatic_content_inline colomat-inline span_fix">It also features open plan dining area etc, etc, etc</span> <span id="monkey1" class="collapseomatic" title="read more">read more»</span><span id="swap-monkey1" style="display: none;">read less</span>
Here is a demo of this in action.
Hi Baden,
You’ve gone to too much trouble. Perfect thank you! Here it is
Now then, time to ask for a donkey on the moon. Is this very smart fading text possible? It looks so professional, though strangely only does it on an iPad, not a PC! http://codecanyon.net/item/email-customizer-for-woocommerce/8654473
Plugin Author
Baden
(@baden03)
what exactly am I looking at here? All I see is a Email Customizer for WooCommerce plugin… what part of the page has this ‘smart fading text’ ?
Hi Baden, enough of your time. Brilliant plugin, thank you.
For some reason, the fading text and ‘read more’ is only visible on an iPad (or other mobile devices?), not visible on a a P.C.
It would be nice if we could make it work as it looks so slick, but I guess it has nothing to do with your excellent Collapse-O-Matic plugin.
Thanks again, Norman
Plugin Author
Baden
(@baden03)
Norman,
I just did a quick search for Text Fade CSS and there are a number of resources.
https://css-tricks.com/text-fade-read-more/
http://stackoverflow.com/questions/22808040/fading-out-text-on-overflow-with-css-if-the-text-is-bigger-than-allowed
http://stackoverflow.com/questions/17500407/css3-fading-out-text
So basically you can do this completely with css. All the best in getting this to work.
Issue marked as resolved. If you are happy with the plugin or it’s support, please consider leaving a short review to help others.
Baden, thanks again. Perfect solution. Thanks also for your time and advice.
No hesitation in leaving a review.
Best, Norman
