Quote Expander / Collapse - By Technidev
Mod Version: 1.00, by Dave
| vB Version: 4.x.x | Rating:  (7 votes - 4.86 average) |
Installs: 35 |
| Released: 09 Feb 2016 | Last Update: Never | Downloads: 0 |
 Supported
Template Edits
Re-usable Code
|
||
Mark as installed = get support.
If you're tired of people quoting long posts and having to scroll past it, then this modification is definitely something you want to use.
This template modification will make it possible to resize quote containers and add an "Expand" button to it which can be clicked to view the whole quote.
This modification should work on pretty much all vBulletin 4 versions.
Installation
How to change the height of when the quote should be resized?
Change the 2 occurences of the number "250" in the showthread template to whatever height you want.
How to change the background color of the expander?
Change all occurences of the color "#C2CAD2" in the additional.css template to the hex code of the color you want.
Screenshots
If you're tired of people quoting long posts and having to scroll past it, then this modification is definitely something you want to use.
This template modification will make it possible to resize quote containers and add an "Expand" button to it which can be clicked to view the whole quote.
This modification should work on pretty much all vBulletin 4 versions.
Installation
- Open the "showthread" template and paste the following above </body>
HTML Code:<script>window.jQuery||document.write(unescape("%3Cscript src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));</script> <script> $(function(){ $(".quote_container").each(function(index){ if($(this).height() > 250){ $(this).css({ 'height': '250px', 'overflow': 'hidden' }); $(this).parent().append('<div class="quote_expander"><a href="">Expand</a></div>'); } }); $(".quote_expander").click(function(){ $(this).parent().find('.quote_container').css({'height': 'initial', 'overflow': 'initial'}); $(this).remove(); return false; }); }); </script>
- Now open the additional.css template under "CSS Templates" and add the following:
HTML Code:.quote_expander{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; font-size: 11px; text-align: center; color: rgb(63, 63, 63); cursor: pointer; padding-top: 65px; background: -webkit-linear-gradient(top, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%); background: -moz-linear-gradient(top, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%); background: -o-linear-gradient(top, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%); background: linear-gradient(to bottom, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%); width: 100%; position: absolute; bottom: 0; } - Done.
How to change the height of when the quote should be resized?
Change the 2 occurences of the number "250" in the showthread template to whatever height you want.
How to change the background color of the expander?
Change all occurences of the color "#C2CAD2" in the additional.css template to the hex code of the color you want.
Screenshots
Download
No files for download.
Addons