mChat Templates - Style Dependent

[robinbillings]

I found the problem; of course, I had inadvertently created it. At one point, under the AutoMod tab, under the details link, I attempted to apply the changes made to the Subsilver2 style to the Rainbow Pearl style. Comparing all the template files for both styles, it became clear that the mchat_body.html file had been altered in a weird way under the Rainbow Pearl style. Copying the mchat_body.html file to the template folder for Rainbow Pearl completely solved the problem. Thank you for making me look more closely.

Robin

[Scanialady]

I will also setup templates for that mobile style by Arty...
Along with that wonderful, spectacular looking phpBBmobile style.

Hi Sniper_E,
and is there a template for mobile style now? That would be nice

[Sniper_E]

I think that statemen t was reffering to templates for mchat... for fhe mobile ztyles.
But stoker posted mobile templates for mchat after that was said.
They are in one of these posts.

[SysOp]

That scroll bar shouldn't be there.
Are you using the mchat.css in the download on the first post?

It looks like it didn't like the .navbar class. Try these templates.

Attachments

mchat_deathwing.zip
(4.57 KiB) Downloaded 2 times

Hello, I'm using proDVGFX with mchat and have no scroll bars at all, so text just floods down the page. Would this d/l file fix that?
Thanks

[Sniper_E]

No it wouldn't fix that. Text flowing down the page usually means the mchat.css file is not loading. Check your stylesheet.css in your proDVGFX's theme/ directory and make sure it's loading the mchat.css file. Make sure the mchat.css file is in that directory also. Refresh your theme in the ACP and then refresh your browser in your style, index page to see the changes.

[SysOp]

Thanks Sniper! I was missing the mchat.css file in the prodvgfx style...i copied one over from prosilver. And its working now, but it's displayed in prosilver colors. How can I get it to the prodvgfx colors (dark)

[Sniper_E]

The modified templates and mchat.css in the download on the first page of this topic use the custom colors of. your custom style. Those are the files you need to use if you are seting up the style dependent mchat layout. I wod have to look at your prodvgfx style to see if it needs any custom codes.

This topic is only for the style dependent layout. I have a feeling you are posting your questions in the wrong topic.

[SysOp]

This topic is only for the style dependent layout. I have a feeling you are posting your questions in the wrong topic.

What topic should i be posting in then? It's working great now, just displays in prosilver style instead of prodvgfx.

[SysOp]

i now have it 99% fixed, i played around with the backround colors in mchat.css Still stuck on hover over color to match the board. but i'm happy with it

[Sniper_E]

This style dependent mChat install has been updated to mChat 1.3.7

Check the first post for updates.

[Sniper_E]

Playing with these templates...

[dmzx]

Playing with these templates...

nice left / right and looks good. :up: :up:

code??

[steve]

You know i was the 1st person in phpbb to do left and right profile's ?? Sniper has just stole my code © :/

[Sniper_E]

Actually I got the idea from the iPhone messaging look. This was my first draft...

Screenshot_2014-01-25-19-39-37.png

That's kind of closer to the iPhone look.

Soooooo... I stole from you and you stole from iPhone. for my friend.

code??

You have to have the edits done in the beginning of this topic first.
The mchat posts have to be in a seperate block.

I have set this up in the prosilver_se style in this example but you can adjust the colors for any style. Replace these files below for this layout.
[img]http://rmcgirr83.org/download/file.php?id=1882&mode=view[/img]

prosilver/template/mchat_avatars.html

Code: Select all

               <!-- BEGIN mchatrow -->
               <div id="mess{mchatrow.MCHAT_MESSAGE_ID}" class="mChatRow{mchatrow.MCHAT_CLASS}">
                  <div class="mChatTime">{mchatrow.MCHAT_TIME}</div>
                  <div class="mChatAvatars"><!-- IF mchatrow.U_VIEWPROFILE --><a href="{mchatrow.U_VIEWPROFILE}" title="{L_READ_PROFILE}"><!-- ENDIF --><!-- IF mchatrow.MCHAT_USER_AVATAR -->{mchatrow.MCHAT_USER_AVATAR}<!-- ELSE --><img src="{T_THEME_PATH}/images/no_avatar.gif" width="40px;" height="40px;" alt="" /><!-- ENDIF --><!-- IF mchatrow.U_VIEWPROFILE --></a><!-- ENDIF --></div>
                  <div class="mChatUsername"><!-- IF not MCHAT_ARCHIVE_MODE and MCHAT_ADD_MESSAGE --><!-- IF MCHAT_ALLOW_BBCODES --><!-- IF mchatrow.MCHAT_USERNAME_COLOR --><a class="mChatScriptLink" href="#" onclick="insert_text('&#64;&nbsp;[b][color={mchatrow.MCHAT_USERNAME_COLOR}]{mchatrow.MCHAT_USERNAME}[/color][/b], ', false);return false;" title="{L_MCHAT_RESPOND}"><span style="color: {mchatrow.MCHAT_USERNAME_COLOR}"><strong>&#64;</strong></span></a><!-- ELSE --> <a href="#" class="mChatScriptLink" onclick="insert_text('&#64;&nbsp;[b]{mchatrow.MCHAT_USERNAME}[/b], ', false);return false;" title="{L_MCHAT_RESPOND}"><strong>&#64;</strong></a><!-- ENDIF --><!-- ELSE --> <a href="#" class="mChatScriptLink" onclick="insert_text('&#64;&nbsp;{mchatrow.MCHAT_USERNAME}, ', false);return false;" title="{L_MCHAT_RESPOND}">&#64;</a><!-- ENDIF -->&nbsp;<!-- ENDIF -->{mchatrow.MCHAT_USERNAME_FULL}</div>
                  <div class="mChatPointer"></div>
                  <div class="post mChatBG{mchatrow.MCHAT_CLASS}">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <span class="mChatButtons"><!-- IF MCHAT_ALLOW_IP --><a href="{mchatrow.MCHAT_U_WHOIS}" onclick="popup(this.href, 750, 500); return false;"><img src="{ROOT_PATH}mchat/ip.gif" alt="{L_MCHAT_IP} {mchatrow.MCHAT_USER_IP}" title="{L_MCHAT_IP} {mchatrow.MCHAT_USER_IP}" class="mChatImage" /></a><!-- ENDIF --><!-- IF mchatrow.MCHAT_ALLOW_BAN --> <a href="{mchatrow.MCHAT_U_BAN}"><img src="{ROOT_PATH}mchat/ban.gif" alt="{L_MCHAT_PERMISSIONS}" title="{L_MCHAT_PERMISSIONS}" class="mChatImage" /></a><!-- ENDIF --><!-- IF mchatrow.MCHAT_ALLOW_EDIT --> <a href="#" onclick="mChat.edit('{mchatrow.MCHAT_MESSAGE_ID}');return false;"><img src="{ROOT_PATH}mchat/edit.gif" alt="{L_MCHAT_EDIT}" title="{L_MCHAT_EDIT}" class="mChatImage" /></a><!-- ENDIF --><input type="hidden" id="edit{mchatrow.MCHAT_MESSAGE_ID}" value="{mchatrow.MCHAT_MESSAGE_EDIT}" /><!-- IF mchatrow.MCHAT_ALLOW_DEL --> <a href="#" onclick="mChat.del('{mchatrow.MCHAT_MESSAGE_ID}');return false;"><img src="{ROOT_PATH}mchat/del.gif" alt="{L_MCHAT_DELITE}" title="{L_MCHAT_DELITE}" class="mChatImage" /></a><!-- ENDIF --></span>
                        <span class="mChatMessage">{mchatrow.MCHAT_MESSAGE}</span>
                     <span class="corners-bottom"><span></span></span></div>
                  </div>
               </div>
               <!-- END mchatrow -->

prosilver/template/mchat_no_avatars.html

Code: Select all

               <!-- BEGIN mchatrow -->
               <div id="mess{mchatrow.MCHAT_MESSAGE_ID}" class="mChatRow{mchatrow.MCHAT_CLASS}">
                  <div class="mChatTime">{mchatrow.MCHAT_TIME}</div>
                  <div class="mChatUsername"><!-- IF not MCHAT_ARCHIVE_MODE and MCHAT_ADD_MESSAGE --><!-- IF MCHAT_ALLOW_BBCODES --><!-- IF mchatrow.MCHAT_USERNAME_COLOR --><a class="mChatScriptLink" href="#" onclick="insert_text('&#64;&nbsp;[b][color={mchatrow.MCHAT_USERNAME_COLOR}]{mchatrow.MCHAT_USERNAME}[/color][/b], ', false);return false;" title="{L_MCHAT_RESPOND}"><span style="color: {mchatrow.MCHAT_USERNAME_COLOR}"><strong>&#64;</strong></span></a><!-- ELSE --> <a href="#" class="mChatScriptLink" onclick="insert_text('&#64;&nbsp;[b]{mchatrow.MCHAT_USERNAME}[/b], ', false);return false;" title="{L_MCHAT_RESPOND}"><strong>&#64;</strong></a><!-- ENDIF --><!-- ELSE --> <a href="#" class="mChatScriptLink" onclick="insert_text('&#64;&nbsp;{mchatrow.MCHAT_USERNAME}, ', false);return false;" title="{L_MCHAT_RESPOND}">&#64;</a><!-- ENDIF -->&nbsp;<!-- ENDIF -->{mchatrow.MCHAT_USERNAME_FULL}</div>
                  <div class="mChatPointer"></div>
                  <div class="post mChatBG{mchatrow.MCHAT_CLASS}">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <span class="mChatButtons"><!-- IF MCHAT_ALLOW_IP --><a href="{mchatrow.MCHAT_U_WHOIS}" onclick="popup(this.href, 750, 500); return false;"><img src="{ROOT_PATH}mchat/ip.gif" alt="{L_MCHAT_IP} {mchatrow.MCHAT_USER_IP}" title="{L_MCHAT_IP} {mchatrow.MCHAT_USER_IP}" class="mChatImage" /></a><!-- ENDIF --><!-- IF mchatrow.MCHAT_ALLOW_BAN --> <a href="{mchatrow.MCHAT_U_BAN}"><img src="{ROOT_PATH}mchat/ban.gif" alt="{L_MCHAT_PERMISSIONS}" title="{L_MCHAT_PERMISSIONS}" class="mChatImage" /></a><!-- ENDIF --><!-- IF mchatrow.MCHAT_ALLOW_EDIT --> <a href="#" onclick="mChat.edit('{mchatrow.MCHAT_MESSAGE_ID}');return false;"><img src="{ROOT_PATH}mchat/edit.gif" alt="{L_MCHAT_EDIT}" title="{L_MCHAT_EDIT}" class="mChatImage" /></a><!-- ENDIF --><input type="hidden" id="edit{mchatrow.MCHAT_MESSAGE_ID}" value="{mchatrow.MCHAT_MESSAGE_EDIT}" /><!-- IF mchatrow.MCHAT_ALLOW_DEL --> <a href="#" onclick="mChat.del('{mchatrow.MCHAT_MESSAGE_ID}');return false;"><img src="{ROOT_PATH}mchat/del.gif" alt="{L_MCHAT_DELITE}" title="{L_MCHAT_DELITE}" class="mChatImage" /></a><!-- ENDIF --></span>
                        <span class="mChatMessage">{mchatrow.MCHAT_MESSAGE}</span>
                     <span class="corners-bottom"><span></span></span></div>
                  </div>
               </div>
               <!-- END mchatrow -->

prosilver_se/theme/mchat.css

Code: Select all

/**
*
* @package mChat ProSilver Style
* @version 1.3.5 2010-12-02
* @copyright (c) RMcGirr83 ( http://www.rmcgirr83.org/ )
* @copyright (c) By Shapoval Andrey Vladimirovich (AllCity) ~ http://allcity.net.ru/
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
**/

/* mChat
------------ */
div.mChatBG1 {
   background: -webkit-linear-gradient(top, #CBD1D5 0%,#FFFFFF 100%);
   background: -o-linear-gradient(top, #CBD1D5 0%,#FFFFFF 100%);
   background: -moz-linear-gradient(top, #CBD1D5 0%,#FFFFFF 100%);
   background: linear-gradient(top, #CBD1D5 0%,#FFFFFF 100%);
   border: 1px solid #999999;
   -webkit-border-radius: 6px;
   -o-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   padding: 5px;
   color: #333333;
   margin-right: 5px;
   overflow: hidden;
}

div.mChatBG2 {
   background: -webkit-linear-gradient(#B6BFC4, #FFFFFF, #FFFFFF, #B6BFC4);
   background: -o-linear-gradient(#B6BFC4, #FFFFFF, #FFFFFF, #B6BFC4);
   background: -moz-linear-gradient(#B6BFC4, #FFFFFF, #FFFFFF, #B6BFC4);
   background: linear-gradient(#B6BFC4, #FFFFFF, #FFFFFF, #B6BFC4);
   border: 1px solid #999999;
   -webkit-border-radius: 6px;
   -o-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   padding: 5px;
   color: #444444;
   text-align: right;
   overflow: hidden;
}

div.mChatRowLimit {
   overflow: auto;
   width: 100%;
}

div.mChatRowLimitCustom {
   overflow: auto;
   width: 100%;
}

div.mChatPanel {
   text-align: center;
   padding: 3px;
   clear: both;
}

div.mChatTime {
   text-align: right;
   margin: 0 12px;
}

div.mChatRow2 div.mChatTime {
   text-align: left;
   margin: 0 5px;
}

input.mChatText {
   cursor: text;
   width: 50%;
   background-color: #FFFFFF;
   border: 1px solid #B4BAC0;
   color: #333333;
   padding: 5px 5px 3px 5px;
   margin: 3px 0px 3px 5px;
}

input.mChatText:hover {
   border-color: #11A3EA;
}

div.mChatHover:hover {
   background-color: #F6F4D0;
}

div.mChatBodyFix {
   width: 100% !important;
}

div.mChatStatic {
   padding-left: 5px;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   text-align: left;
   font-size: 1.1em;
}

div.mChatStats {
   padding-left: 5px;
   margin-top: 2px;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   text-align: left;
   min-height: 1.3em;
   font-size: 1.1em;
   height: auto !important;
}

div.mChatRefresh {
   padding-left: 5px;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   text-align: left;
   font-size: 1.1em;
   margin-top: 1.5em;
   clear: both;
}

input.mChatColor {
   width: 100%;
   text-align: center;
   background-color: #DEE3E7;
   border-style: none;   
}

span.mChatButtons {
   float: right;
}

div.mChatRow2 span.mChatButtons {
   float: left;
}

span.mChatMessage {
   padding: 3px;
   font-size: 1.1em;
   width: 98%;
}

a.mChatScriptLink {
   text-decoration:none;
}

img.mChatImage{
   vertical-align: middle;
}

img.mChatImageLoad {
   vertical-align: middle;
   cursor: wait;
   display: none;
}

img.mChatImageOk {
   vertical-align: middle;
   cursor: help;
}

img.mChatImageHideImg {
   vertical-align: middle;
   cursor: help;
   display: none;
}

div.mChatSound {
   position: absolute;
   left: -1000px;
   top: -1000px;
}

.mchat_alert {
   color: #7E2217;
   padding: 10px;
}

#mChatUserList {
   display: none;
}

div.mChatUsername {
   float: left;
}

div.mChatRow2 div.mChatUsername {
   float: right;
   margin-right: 5px;
}

.mChatAvatars {
   float: left;
   margin: 0 5px 0 0;
}

div.mChatRow2 div.mChatAvatars {
   float: right;
}

.mChatPointer {
   float: left;
   background-image: url("{T_THEME_PATH}/images/mchatbg2_pointer.png");
   margin-right: -1px;
   margin-left: 5px;
   width: 10px;
   height: 20px;
}

div.mChatRow2 div.mChatPointer {
   float: right;
   background-image: url("{T_THEME_PATH}/images/mchatbg1_pointer.png");
   margin-left: -1px;
   margin-right: 5px;
   width: 10px;
   height: 20px;
}

div.avatarMessage {
   width: 90%;
   margin-right: 5px;
}

.icon-mchat {
   background-image: url("{T_THEME_PATH}/images/icon_mchat.gif");
   background-repeat: no-repeat;
   background-position: 0 5px;
   padding-left: 21px;
}

mchatbg2_pointer.zip

mChat Pointer image.psd and images used in the prosilver_se/theme/images/ directory.

[dmzx]

Thanks for this!!!