Re: [Add-on] AJAX Chat 2.0.0 Beta Styles

[Sniper_E]

This is the chat template and the chat.css file that I use: viewtopic.php?p=129987#p129987
It's a little more compact than the one in the download.

The scrolling part of the chat height is controlled by the class:

Code: Select all

.shouts {
   width: 82%;
   height: 200px;
   overflow: auto;
   float: left;
}

The overflow: auto; is what is suppose to keep the chat at 200px height. You can adjust that height.

Make sure when you put the chat.css file in your theme/ directory, you add it to your stylesheet.css
Open theme/stylesheet.css
Find

Code: Select all

@import url("colours.css");

After Add

Code: Select all

@import url("chat.css");

Refresh your templates and theme in the ACP after you are done.

To put the chat in your index page you do this:
Open template/index_body.html
Find

Code: Select all

<!-- IF S_DISPLAY_ONLINE_LIST -->

Before Add

Code: Select all

<!-- INCLUDE chat_body.html -->

If you want the chat in the top of the index page, remove the line <!-- INCLUDE chat_body.html -->
and add it higher in your template...
Add Before

Code: Select all

<!-- INCLUDE forumlist_body.html -->

You can even add it in higher than that...
Add After

Code: Select all

<!-- INCLUDE overall_header.html -->

[PapillonKisses]

Thanks!

I feel stupid now. I had the Chat.css file in the wrong location. Moved it to the right spot & I'm getting somewhere now!

So I tried changing the height. It worked in that it changed the height of the scroll bar but then the bottom copyright bar didn't move. So I ended up with a small chat area then a big white space and then the little copyright bar down at the bottom. Is there anyway I can move that bar up so it's right underneath the chat area?

I took some screen shots in case I'm not explaining things well.

Here's my site set at the 200px height...



And here's what it looks like when I tried to re-size it down to 100px ...



Sorry...it's probably a simple fix but I'm not great at this stuff. This is the first mod I've ever installed on my board.

Thanks sooo much for the help!!!

[clowcaca Clowen]

@ clowcaca, we can not see your chat as a guest. I didn't see the chat on your site at all.
You have to use that template I gave you in the template/ directory
and you have to use that chat.css file with it in the theme/ directory
and you have to go to ACP / Styles / Refresh Templates and Theme in your style.

@ Limbless, put that back the way you had it when it was working for you.
If it messes up on you then undo what you did.
If you want the chat in all of your pages you have to do another edit. Not sure what it is.
I know you add include($phpbb_root_path . 'shout.' . $phpEx); in the index.php
Maybe you have to add that in the viewforum.php for it to show in the forums.
Maybe you have to add that in the viewtopic.php for it to show in the topic pages.
Handyman has shown how to do that but I forget what is was. I use it in the index page only.

Sorry, I moved to another domain. Please try this www.antrollio.com

I tried editying the chat.css but I does not work. It is still too long.

Thank you for your help dude.

[Sniper_E]

I looked at your source code...

Code: Select all

   <div align="left">
      <div class="inner"><span class="corners-top"><span></span></span>
         <div class="shouts">
            <div id="chat">

Your class="shouts" is in your chat template.

** I looked at your css also and I did not see the chat.css loaded in there. **

Make sure you put the chat.css file in your theme/ directory and add it to your stylesheet.css
Open theme/stylesheet.css
Find

Code: Select all

@import url("colours.css");

After Add

Code: Select all

@import url("chat.css");

Refresh your theme in the ACP after you are done.

Do these steps:

1. Use this chat.css file: viewtopic.php?p=129987#p129987
2. Copy the chat.css to that style's theme/ directory.
3. Add the chat.css to the bottom of your stylesheet.css file.
4. Refresh your Theme for that style.

[clowcaca Clowen]

Thanks so much dude! Now it works. I just thought that because the style inherits files from prosilver I needed to upload the chat files into the folders of prosilver. My bad! Anyway, thanks!

[PapillonKisses]

Sniper_E ...

Using that code you gave me before, could you tell me how I would change a few things?

The date and time of each post is displayed above the username which makes each text box a bit bigger. How would I display it before the username instead of where it is now?

Is there anyway I can put a little box/frame around the whole chat? Basically so it looks more similar to how the rest of the forum is displayed.

I think that's it for now except I haven't figured out what I posted about yesterday, I want to resize the shoutbox area maybe to around 150px but whenever I resize it down from 200px it puts an empty white space between the end of the chat area and the copyright bar.

Thanks in advance for any help

[Sniper_E]

I would have to write the style with the wrapper again to give you that.
I have that posted in one of these pages...

But in the height, there are two classes to change.

Code: Select all

.shouts {
   width: 82%;
   height: 200px;
   overflow: auto;
   float: left;
}
and the
.onlinelist {
   width: 18%;
   height: 200px;
   overflow: auto;
}

See how they both have height: 200px; <- If you change one, change the other the same.
And you see how one has width: 82%; and the other width: 18%; <- They equal width: 100%; together.
If you change the width of one, change the other one also for the two to equal 100%

This is the class for the height when you are in the main chat page:

Code: Select all

.main {
   height: 400px;
}

I'll get back to you on that wrapper around the chat.
Handyman had it that way when he first came out with this MOD.

[PapillonKisses]

Awesome, thanks so much!

I'll try to look up the wrapper code too. I did try to search for it before asking but I'll try again using different keywords to see if I can find it.

So I'm sorry to be posting so much but I have yet another problem.

My forum has a side bar that loads with the overall footer. I'd like, if it's possible, for the side bar to also show up on the chat page (You know when you click the chat link up on the top of the page).

You can see here that when the chat loads it actually seems to leave a space where the side bar should go, but doesn't load the side bar. That white space on the left hand side is where my side bar should be.



I've tried adding <!-- INCLUDE overall_footer.html --> as well as <!-- INCLUDE sidebar.html --> to a bunch of different spots in the chat_body code. I can get the side bar to show up, but it never lines up properly with the chat box. Instead of going into the right spot, it shows up either directly above or below the chat.

Not sure if this is something I can fix in the chat code or if it's something I need to fix in my other files, so sorry if it doesn't really belong here. But if you have any idea how I'd fix it I'd really appreciate the help.

Thanks!

[Sniper_E]

You load your sidebar menu in your overall footer? I load mine in my overall header.
But either way, the chat_body.html template already has both the...
<!-- INCLUDE overall_header.html --> and the <!-- INCLUDE overall_footer.html --> in it.
It should load your sidebar menu just like your index page does.

Show me the code from the template where you load the sidebar menu. (overall_footer.html) ???
Do you have any IF statements around that section that want allow it to load in the chat?

[PapillonKisses]

Yeah I load it in the footer. I followed a tutorial I found online back when I made the sidebar and it said to put it in the footer. I actually since have tried moving it to the header instead but I couldn't get it to work - instead of loading in the the right spot it put it up where my sites logo is.

Here's my overall_footer.html...

Spoiler:

<div class="page-sidebar">
<!-- INCLUDE sidebar.html -->
</div>

<div id="page-footer">
<!--
We request you retain the full copyright notice below including the link to http://www.phpbb.com.
This not only gives respect to the large amount of time given freely by the developers
but also helps build interest, traffic and use of phpBB3. If you (honestly) cannot retain
the full copyright we ask you at least leave in place the "Powered by phpBB" line, with
"phpBB" linked to http://www.phpbb.com. If you refuse to include even this then support on our
forums may be affected.

The phpBB Group : 2006//-->

<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group.
<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
</div>
</div>

</div>

<div>
<a id="bottom" name="bottom" accesskey="z"></a>
<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

</body>
</html>

It's weird because the chat page does leave the spot for the side bar on the left side, but it doesn't load the side bar at all.