• OzzModz is no longer taking registrations. All registrations are being redirected to Snog's Site
    All addons and support is available there now.

Limit Quote Length In Posts

Ozzy47

Administrator
As some of you know, when someone quotes a post, sometimes they are long posts. This can make the post hard to read, and IMO, not look as good as it can.

Sure you could limit the characters of the quote one way or another, but this is not the best approach. Someone may actually want to see all the quoted text in the post.

So I have come up with the solution, of adding a scroll bar in the quote bubble. This way you can keep the post looking neat, with out loosing functionality. So here we go wit the tutorial.

Take for example this post, [OzzModz] Classifieds

Now if someone were to quote that, and reply something like, " Thanks for sharing Ozzy. " the post would look bad, because the amount of info in the quote would overwhelm the reply. So here is the fixes.

vB 3.x series

Go to your ACP --> Styles & Templates --> Style Manager, then choose Edit Templates for your style.

Now in the scroll box find, BB Code Layout Templates, then double click on that, then find bbcode_quote and double click on that.

Once inside that template, find this bit of code:
HTML:
<div style="font-style:italic">$message</div>

And change it to this:
HTML:
<div style="font-style:italic; max-height:300px; width:auto; overflow:auto;">$message</div>

Then click on the Save button. This will have to be done for each of your styles.

vB 4.x series

Go to your ACP --> Styles & Templates --> Style Manager, then choose Edit Templates for your style.

Now in the scroll box find, CSS Templates, then double click on that, then find additional.css and double click on that.

Once inside that template, paste the following code at the very end of the template, below everything else:
HTML:
/* Start scroll bar in quotes */
.bbcode_container div.bbcode_quote div.message {
    max-height:300px;
    width:auto;
    overflow:auto;
}
/* End scroll bar in quotes */

Then click on the Save button. This will have to be done for each of your styles.

vB 5.x series

Go to your ACP --> Styles & Templates --> Style Manager, then choose Edit Templates for your style.

Now in the scroll box find, CSS Templates, then double click on that, then find css_additional.css and double click on that.

Once inside that template, paste the following code at the very end of the template, below everything else:
HTML:
/* Start scroll bar in quotes */
.bbcode_container .bbcode_quote .message {
    max-height:300px;
    width:auto;
    overflow:auto;  
}
/* End scroll bar in quotes */

Then click on the Save button. This will have to be done for each of your styles.

Now when someone quotes a post that is longer that 300px high, it will add a scroll bar inside the quote bubble. This allows anyone viewing the post, to be able to still see all the original quoted text, but without making the post longer than it needs to be. In the attached image, is this post quoted, [OzzModz] Classifieds but as you can see, it is much shorter.
 
As some of you know, when someone quotes a post, sometimes they are long posts. This can make the post hard to read, and IMO, not look as good as it can.

Sure you could limit the characters of the quote one way or another, but this is not the best approach. Someone may actually want to see all the quoted text in the post.

So I have come up with the solution, of adding a scroll bar in the quote bubble. This way you can keep the post looking neat, with out loosing functionality. So here we go wit the tutorial.

Take for example this post, [OzzModz] Classifieds

Now if someone were to quote that, and reply something like, " Thanks for sharing Ozzy. " the post would look bad, because the amount of info in the quote would overwhelm the reply. So here is the fixes.

vB 3.x series

Go to your ACP --> Styles & Templates --> Style Manager, then choose Edit Templates for your style.

Now in the scroll box find, BB Code Layout Templates, then double click on that, then find bbcode_quote and double click on that.

Once inside that template, find this bit of code:
HTML:
<div style="font-style:italic">$message</div>

And change it to this:
HTML:
<div style="font-style:italic; max-height:300px; width:auto; overflow:auto;">$message</div>

Then click on the Save button. This will have to be done for each of your styles.

vB 4.x series

Go to your ACP --> Styles & Templates --> Style Manager, then choose Edit Templates for your style.

Now in the scroll box find, CSS Templates, then double click on that, then find additional.css and double click on that.

Once inside that template, paste the following code at the very end of the template, below everything else:
HTML:
/* Start scroll bar in quotes */
.bbcode_container div.bbcode_quote div.message {
    max-height:300px;
    width:auto;
    overflow:auto;
}
/* End scroll bar in quotes */

Then click on the Save button. This will have to be done for each of your styles.

vB 5.x series

Go to your ACP --> Styles & Templates --> Style Manager, then choose Edit Templates for your style.

Now in the scroll box find, CSS Templates, then double click on that, then find css_additional.css and double click on that.

Once inside that template, paste the following code at the very end of the template, below everything else:
HTML:
/* Start scroll bar in quotes */
.bbcode_container .bbcode_quote .message {
    max-height:300px;
    width:auto;
    overflow:auto;  
}
/* End scroll bar in quotes */

Then click on the Save button. This will have to be done for each of your styles.

Now when someone quotes a post that is longer that 300px high, it will add a scroll bar inside the quote bubble. This allows anyone viewing the post, to be able to still see all the original quoted text, but without making the post longer than it needs to be. In the attached image, is this post quoted, [OzzModz] Classifieds but as you can see, it is much shorter.

Here is the above post quoted, so you can see it in action.
 
Or you could just add this into your additional css template

.quote_container {
max-height: 300px;
overflow: auto;
margin-right: 4px;
}
 
Back
Top