tsurene
☽ ☁︎ ☾
'Ello! I'm trying to tweak this Mystic Messenger chatroom code for a future chatroom-based group RP. I was able to resize the text bar and remove the "x" on the SEND button. However, I can't get rid of the visible horizontal scroll bar, and I'm not sure if I'm supposed to resize or delete something. Any advice?
UPDATE 1:
I checked how the layout works on mobile, and apparently the horizontal scrolling issue wasn’t there. Because of this, I assume I should edit the format instead or removing any tags. I’ll send an edited version of @Pretzel Heart’s chatroom layout once I’m able to fix this.
Mystic Messenger
Code:
[div="background: url('https://s18.postimg.org/xh3hku0e1/Checker_Test.jpg'); margin: 0 auto; max-width: 390px; max-height: 23px; padding: 5px; color: #cccccc; "][div= margin-left: 3px; margin-top: -20px; ]
[CENTER][FONT=Cousine]Mystic Messenger[/FONT][/CENTER]
[/div][/div][div=overflow: hidden; max-width: 400px; margin: 0 auto; height: 100%; ][bG=#1f1f1f][border=3px Solid #303030][bg=black][div=height: 500px; overflow: hidden; max-width: 360px; ][div="background:url('[B]INSERT BACKGROUND LINK HERE[/B]'); width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-size: 0.9em; color: black; font-align: justify;"]
[div=background: #000000; padding: 5px; max-height: 30px; width: 100%; position: relative; opacity: 0.5; text-align: center; color: #ffffff; ]Unknown has entered the chatroom.[/div][div=padding-left:5px; padding-right:5px; pointer-events: none;]
[ImageFloat=right][IMG]https://s27.postimg.org/5wvxjsctv/image.jpg[/IMG][/ImageFloat]
[RIGHT][FONT=Tahoma]CHERRYxx[/FONT][/RIGHT]
[div=text-align: right; margin-bottom: -20px;][div=background: #ffffed; text-align: left; padding: 10px; margin-right: 1%; border-radius: 8px; max-width: 60%; position: relative; display: inline-block;][div=position: absolute; left: 100%; top: 15%; margin-left: -2px; color: #ffffed;][fa]fa-caret-right fa-2x[/fa][/div][FONT=Book Antiqua]I'm a boy[/FONT][/div][/div]
[ImageFloat=right][IMG]https://s27.postimg.org/wclie6t4j/Cherry.jpg[/IMG][/ImageFloat]
[RIGHT]CHERRYxx[/RIGHT]
[div=text-align: right; margin-bottom: -20px;][div=background: #ffffed; color: black; text-align: left; box-shadow: 0 0 25px #cccc29; padding: 10px; margin-right: 1%; border-radius: 8px; max-width: 60%; display: inline-block;]I'm a boy[/div][/div]
[ImageFloat=left][IMG]https://s27.postimg.org/suip9a703/707.jpg[/IMG][/ImageFloat]x707
[div=background: #fff2f2; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; position: relative; display: inline-block;][div=position: absolute; right: 100%; top: 15%; margin-right: -2px; color: #fff2f2;][fa]fa-caret-left fa-2x[/fa][/div]lolololololololol[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/9gd9vuq5v/707.jpg[/IMG][/ImageFloat]x707
[div=background: #fff2f2; box-shadow: 0 0 25px #ff5ebc; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; display: inline-block;]lolololololololol[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/9gd9vuq5v/707.jpg[/IMG][/ImageFloat]x707
[div=margin-left: 50px;][HeightRestrict=150][IMG]https://media.giphy.com/media/xUNemP6ZACXkHFnOpO/giphy.gif[/IMG][/HeightRestrict][/div][ImageFloat=left][IMG]https://s27.postimg.org/43t0vgrn7/Jumin.jpg[/IMG][/ImageFloat]xJumin Han
[div=background: #f7ffff; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; position: relative; display: inline-block;][div=position: absolute; right: 100%; top: 15%; margin-right: -2px; color: #f7ffff;][fa]fa-caret-left fa-2x[/fa][/div][FONT=Tahoma]Nya nya nya[/FONT][/div]
[ImageFloat=left][IMG]https://s27.postimg.org/m8wsi1cdv/Jumin_Default.jpg[/IMG][/ImageFloat]xJumin Han
[div=background: #f7ffff; box-shadow: 0 0 25px #2b15bd; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; display: inline-block;]Nya nya nya[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/vd4e9ysqb/Jaehee.jpg[/IMG][/ImageFloat]xJaehee Kang
[div=background: #fff6eb; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; position: relative; display: inline-block;][div=position: absolute; right: 100%; top: 15%; margin-right: -2px; color: #fff6eb;][fa]fa-caret-left fa-2x[/fa][/div]Lovely Zen[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/3vw77h1wz/Jaehee_Default.jpg[/IMG][/ImageFloat]xJaehee Kang
[div=background: #fff6eb; box-shadow: 0 0 25px #cf8429; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; display: inline-block;]Lovely Zen[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/t8ffv51pv/Yoosung.jpg[/IMG][/ImageFloat]xYoosung★
[div=background: #ddebe2; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; position: relative; display: inline-block;][div=position: absolute; right: 100%; top: 15%; margin-right: -2px; color: #ddebe2;][fa]fa-caret-left fa-2x[/fa][/div][FONT=Boogaloo]Dead[/FONT][/div]
[ImageFloat=left][IMG]https://s27.postimg.org/t8ffv51pv/Yoosung.jpg[/IMG][/ImageFloat]xYoosung★
[div=background: #ddebe2; box-shadow: 0 0 25px #4cc718; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; display: inline-block;]Dead[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/q2q8r6tpv/V_Default.jpg[/IMG][/ImageFloat]xV
[div=background: #c8fafa; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; position: relative; display: inline-block;][div=position: absolute; right: 100%; top: 15%; margin-right: -2px; color: #c8fafa;][fa]fa-caret-left fa-2x[/fa][/div]Don't talk to me or my sun ever again[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/q2q8r6tpv/V_Default.jpg[/IMG][/ImageFloat]xV
[div=background: #c8fafa; box-shadow: 0 0 25px #1cc7c7; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; display: inline-block;]Don't talk to me or my sun ever again[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/mtbtkq5mb/Vanderwood.jpg[/IMG][/ImageFloat]xVanderwood
[div=background: #eae1c8; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; position: relative; display: inline-block;][div=position: absolute; right: 100%; top: 15%; margin-right: -2px; color: #eae1c8;][fa]fa-caret-left fa-2x[/fa][/div]I'm gonna get you[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/mtbtkq5mb/Vanderwood.jpg[/IMG][/ImageFloat]xVanderwood
[div=background: #eae1c8; box-shadow: 0 0 25px #c0a459; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; display: inline-block;]I'm gonna get you[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/9vt52m1gz/Zen.jpg[/IMG][/ImageFloat]xZEN
[div=background: #e3e3e3; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; position: relative; display: inline-block;][div=position: absolute; right: 100%; top: 15%; margin-right: -2px; color: #e3e3e3;][fa]fa-caret-left fa-2x[/fa][/div][FONT=Indie Flower]I'm sexy and I know it.[/FONT][/div]
[ImageFloat=left][IMG]https://s27.postimg.org/fasoc3e9f/Zen_Default.jpg[/IMG][/ImageFloat]xZEN
[div=background: #e3e3e3; box-shadow: 0 0 25px #ffffff; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; display: inline-block;]I'm sexy and I know it.[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/frdvyj20j/Unknown.jpg[/IMG][/ImageFloat]xUnknown
[div=background: #f5edff; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; position: relative; display: inline-block;][div=position: absolute; right: 100%; top: 15%; margin-right: -2px; color: #f5edff;][fa]fa-caret-left fa-2x[/fa][/div]Btch better have my money[/div]
[ImageFloat=left][IMG]https://s27.postimg.org/frdvyj20j/Unknown.jpg[/IMG][/ImageFloat]xUnknown
[div=background: #f5edff; box-shadow: 0 0 25px #9e54ff; padding: 10px; margin-left: 1%; border-radius: 8px; max-width: 60%; display: inline-block;]Btch better have my money[/div]
[/div]
[div=background: #000000; padding: 5px; max-height: 30px; width: 100%; position: relative; opacity: 0.5; text-align: center; color: #ffffff; ]Unknown has left the chatroom.[/div]
[/div][/div][div=background: #000000; padding: 5px; max-height: 30px; width: 100%; position: relative;][div=position: absolute; margin-top: 1px; color: #bfbfbf; transform: rotate(224deg);][fa]fa-paperclip fa][/fa][/div][div=background: #f0f4f7; max-height: 40px; max-width: 170px; overflow: hidden; white-space: nowrap; text-overflow: none; position: absolute; left: 9%; border-radius: 3px; padding: 4px;]Type a message..................................................................[/div][div=position: absolute; left: 9%; margin-top: 2px; animation: rippleAnimation 0.5s linear infinite, panelMaskIn 0.5s ease-in-out infinite alternate;]|[/div][div=position: absolute; left: 60%; margin-top: 4px;][fa]fa-comment-o[/fa] | [fa]fa-font[/fa] | [fa]fa-smile-o[/fa] [/div][div=position: absolute; left: 83%; border-radius: 3px; border:1px solid #f0f4f7; box-shadow: 0 0 5px; max-height: 26px; color: #bfbfbf; padding-bottom: 3px; margin-top: 2px;]xSENDx[/div][div=clear: both;][/div]..........................................................................................[/div][/bg][/border][/bG][/div]UPDATE 1:
I checked how the layout works on mobile, and apparently the horizontal scrolling issue wasn’t there. Because of this, I assume I should edit the format instead or removing any tags. I’ll send an edited version of @Pretzel Heart’s chatroom layout once I’m able to fix this.
Last edited:
