Suggestion: Mobile template for mchat.php?

[Neculai Anișor]

Try this.

Find This may be a partial find and not the whole line

Code: Select all

<!-- IF S_MCHAT_ENABLE and (S_MCHAT_ON_INDEX or U_MCHAT) -->
<script type="text/javascript" src="{ROOT_PATH}mchat/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="{ROOT_PATH}mchat/jquery_cookie_mini.js"></script>
<!-- ENDIF -->

Add after Add these lines on a new blank line after the preceding line(s) to find

Code: Select all

<style type="text/css">
<!--
/* mChat
------------ */
div.mChatBG1 {
   background-color: #FBFBFB;
   padding: 5px 5px 5px 5px;
   border-bottom: 1px dotted #DDDDDD;
   overflow: hidden;
}

div.mChatBG2 {
   background-color: #FFFFFF;
   padding: 5px 5px 5px 5px;
   border-bottom: 1px dotted #DDDDDD;
   overflow: hidden;
}

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

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

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

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;
   background-color: #E9F0F5 !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;   
}

div.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;
   float: left;
}

.mChatAvatars {
   float: left;
   padding-right: 5px;
}

div.avatarMessage {
   margin-left: 50px;
   width: 90%;
   margin-right: 5px;
}      
-->
</style>

[RMcGirr83]

Uhmmm, yeah...no need to add css styling into the html file (it isn't on here). Please post a link to the forum with the mod active for guests.

[corleoner]

This provided the Fix. It works perfectly now, but if you are curious and would like to see why my other edits did not fix the issue, my forum is raider-forums.com enabled for guests.

Thank you guys so much for your generous help! This is one of my favorite mods, it's perfect, I much prefer it to the old vbulletin one that I had been used to!

Also, this OT, but is there a link to the add-on to make images appear as thumbnails like I see on your chat?

Try this.

Find This may be a partial find and not the whole line

Code: Select all

<!-- IF S_MCHAT_ENABLE and (S_MCHAT_ON_INDEX or U_MCHAT) -->
<script type="text/javascript" src="{ROOT_PATH}mchat/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="{ROOT_PATH}mchat/jquery_cookie_mini.js"></script>
<!-- ENDIF -->

Add after Add these lines on a new blank line after the preceding line(s) to find

Code: Select all

<style type="text/css">
<!--
/* mChat
------------ */
div.mChatBG1 {
   background-color: #FBFBFB;
   padding: 5px 5px 5px 5px;
   border-bottom: 1px dotted #DDDDDD;
   overflow: hidden;
}

div.mChatBG2 {
   background-color: #FFFFFF;
   padding: 5px 5px 5px 5px;
   border-bottom: 1px dotted #DDDDDD;
   overflow: hidden;
}

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

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

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

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;
   background-color: #E9F0F5 !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;   
}

div.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;
   float: left;
}

.mChatAvatars {
   float: left;
   padding-right: 5px;
}

div.avatarMessage {
   margin-left: 50px;
   width: 90%;
   margin-right: 5px;
}      
-->
</style>

[RMcGirr83]

As I stated, you don't need to add the css to the html files. Place the @include for mchat.css at the top of the style.css file.

[corleoner]

I did Rich. I tried it at the top, tried it at the bottom. The one time it worked, then I disabled it because the functions weren't working and I didn't want to confuse members, so I switched the header and index back.

When I went to put it back on to try the new code that Neculai suggested(which fixed my functions), then it reverted back to the form that I attached in the photo.

Here is my mchat css file, is there an error in it? This was from the zip file that Steve posted.

Code: Select all

/**
*
* @package mChat ProSilver Style
* @version 1.3.7 2014-01-31
* @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-color: #FBFBFB;
   padding: 5px 5px 5px 5px;
   border-bottom: 1px dotted #DDDDDD;
   overflow: hidden;
}

div.mChatBG2 {
   background-color: #FFFFFF;
   padding: 5px 5px 5px 5px;
   border-bottom: 1px dotted #DDDDDD;
   overflow: hidden;
}

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

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

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

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 {
   background-color: #eee !important; /* CHANGE TO STYLE SPECIFIC */
   border: 1px solid #cfcfcf; /* CHANGE TO STYLE SPECIFIC */
    border-radius: 4px;
   margin: 2px 0 0 0;
}

div.mChatStatic {
   padding-left: 5px;
   text-align: left;
   font-size: 1.1em;
}

div.mChatStats {
   padding-left: 5px;
   margin-top: 2px;
   text-align: left;
   min-height: 1.3em;
   font-size: 1.1em;
   height: auto !important;
}

div.mChatRefresh {
   padding-left: 5px;
   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;   
}

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

a.mChatScriptLink {
   text-decoration: none;
}

img.mChatImage{
   vertical-align: middle;
   /* ie */
   border: none;
}

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;
   float: left;
}

.mChatAvatars {
   float: left;
   padding-right: 5px;
}

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

[RMcGirr83]

Anytime you change a css file you have to refresh that styles theme as well as refresh your browsers cache. If you click on the "switch to mobile style" in the footer of any page on here you can see that I have the mchat.css within style.css of the mobile style.

[corleoner]

Anytime you change a css file you have to refresh that styles theme as well as refresh your browsers cache. If you click on the "switch to mobile style" in the footer of any page on here you can see that I have the mchat.css within style.css of the mobile style.

I know exactly what you're saying Rich, I'm not very savvy at this kind of stuff, but the little that I do know includes refreshing the style (we have the mod which refreshes all styles templates and themes at once, and I alway's purge the cache. In addition, I'll alway's open a new window in private browsing which is a clean browser window with no saved cache.

I'm stumped as to why my mchat isn't reading the css file? Could it have something to do with this line?

div.mChatBodyFix {
background-color: #eee !important; /* CHANGE TO STYLE SPECIFIC */
border: 1px solid #cfcfcf; /* CHANGE TO STYLE SPECIFIC */

The css code that I'm using in the header doesn't have that. . .although the strange thing is, when paste css (that I"ve put in my header), into the mchat css, it still shows like the image I included.

I'm leaving it as is with the css in the over_header. . .I take it, that will cause no issues for the function?

[RMcGirr83]

No it will cause no issues.

[corleoner]

Thank you!

[steve]

Joking aren't ya?
nub...
just place the mchat css in the css file for the style

[corleoner]

Joking aren't ya?
nub...
just place the mchat css in the css file for the style

That also worked and I'll leave it like that because it's cleaner in my header html. Thanks Steve.

[Elite]

Can any body help me please

I want to add mChat to Mobile style i'm new to phpbb ( noob )

I've got the mChat in the full style working perfectly i love this mod so much

Please help me


Sorry if this is the wrong section

[steve]

What have you tried so far?do
you have the artodia mobilestyle uploaded to your styles folder and installed?

[Elite]

What have you tried so far?do
you have the artodia mobilestyle uploaded to your styles folder and installed?

Yes i only have done that

Nothing else

Please help

I want The awesome mod

[steve]

you now have to apply the style edits to artodia mobile style..
PS: DO NOT PM FOR SUPPORT!