Limit width of quote box container if quoted text isn't wide as page
Mod Version: 1.0.3, by Alan_SP
| vB Version: 4.x.x | Rating:  (0 vote - 0 average) |
Installs: 7 |
| Released: 26 Jan 2015 | Last Update: Never | Downloads: 0 |
 Not Supported
 Template Edits
Re-usable Code
|
||
Well, first of all, I saw this on XDA forums. http://forum.xda-developers.com/showpost.php?p=58418340&postcount=9622 to one example on their site, to get idea how it looks like. I also attached image, so you can look here how it looks like. Of course, actual look depends on width of quoted text. If text is really wide, you wouldn't notice any difference.
Quote box is normally wide as screen (i.e. it depends on your postbit type, either new or legacy), not as quoted text. And if quoted text is relatively short, to some it might look unaesthetic.
Anyway, if you'd like to limit quote box to width of quoted message, add this to additional.css:
This would produce funny effect, your text would appear on the right of quoted block if there's space. To avoid it if you don't like it (probably you wouldn't) edit template bbcode_quote and add at the very beginning this:
Also, you need to add at the very end of the same template (bbcode_quote) this:
In case your forum is RTL (arabic etc), you need to change float: left; into float: right; and in template you need to clear:right.
v1.0 - Initial version
v1.0.1 - solved problem with multiple (3 or more) nested quotations
v1.0.2 - solved problem with very short text and quote in the same line
v1.0.3 - solved problem with PHP and HTML BBcode
You can see attached image how it looks.
Quote box is normally wide as screen (i.e. it depends on your postbit type, either new or legacy), not as quoted text. And if quoted text is relatively short, to some it might look unaesthetic.
Anyway, if you'd like to limit quote box to width of quoted message, add this to additional.css:
HTML Code:
.bbcode_container .bbcode_quote {
flex: 0 1 auto;
flex-basis: auto;
flex-direction: row;
flex-flow: row;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: nowrap;
justify-content: flex-start;
float: left;
}
HTML Code:
<div></div>
HTML Code:
<div style="clear:left"></div>
v1.0 - Initial version
v1.0.1 - solved problem with multiple (3 or more) nested quotations
v1.0.2 - solved problem with very short text and quote in the same line
v1.0.3 - solved problem with PHP and HTML BBcode
You can see attached image how it looks.
Download
No files for download.
Screenshots
