image background in chat ajax

[wlox wanderlein]

HEllo all

how can I put an image as a background in the chat? I want an image (like a watermarking) but in the whole chat (not in each post box)

Thank you very very much

[Sniper_E]

Create a background watermark.png image like you want it.
Save it as styles/prosilver/theme/images/watermark.png

Then add it to the existing .shouts class in the styles/prosilver/theme/chat.css.

Code: Select all

.shouts {
   width: 85%;
   height:300px;
   overflow:auto;
   float:left;
   background-image: url("{T_THEME_PATH}/images/watermark.png");
   background-repeat: no-repeat;
   background-position:center;
}

Now it will show in the background... but the chats have a solid color using the .bg1 and .bg2 classes.
You will need the background of each chat transparent so you can see the background watermark image.

Create two more images, 20px X 20px with a 90% Opacity, one with color #ECF3F7 and one with color #E1EBF2
Save them as styles/prosilver/theme/images/bg1.png and as styles/prosilver/theme/images/bg2.png

Then in your styles/prosilver/template/chat_body.html template Find:

Code: Select all

         <div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">

Replace with:

Code: Select all

         <div id="p{chatrow.MESSAGE_ID}" class="post <!-- IF chatrow.S_ROW_COUNT is odd -->chat-bg1<!-- ELSE -->chat-bg2<!-- ENDIF -->">

There are 2 places in the template. At the top and again in the middle of the template.

Then add those 2 new classes in the styles/prosilver/theme/chat.css

Code: Select all

.chat-bg1 {
   background-image: url("{T_THEME_PATH}/images/bg1.png");
   background-repeat: repeat;
}

.chat-bg2 {
   background-image: url("{T_THEME_PATH}/images/bg2.png");
   background-repeat: repeat;
}

Refresh templates and theme in the ACP... then refresh your browser in the chat.

Show us a snapshot of what you are doing when you finish. I'd like to see what it looks like.

This is what I came up with...

[wlox wanderlein]

My original line code is

Code: Select all

<!-- BEGIN chatrow -->
         <div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
            <div class="inner"><span class="corners-top"><span></span></span>
               <div class="chat">
                  <b class="time">{chatrow.TIME}</b><br />
                  <!-- IF U_ACP or U_MCP -->
                  <ul class="profile-icons del-icon">
                     <li class="delete-icon">
                        <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span></a>
                     </li>
                  </ul>
                  <!-- ENDIF -->



I changed the line <div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
for the one you suggested but I got a mess in my chat.

I got the error

Parse error: syntax error, unexpected $end in /home/*******/public_html/includes/template.php(668) : eval()'d code on line 275

[Sniper_E]

Read my directions above again and follow the steps. You had to of did something wrong.
Are you using a good editor to make your edits? notepad ++ is a good free editor.
Your editor has to save as Unix, UTF-8 without BOM...

The above edits work fine. See my attached image.

[wlox wanderlein]

It was my bad before, I copied some line wrongly. However, it doesn't work either. The chat itself works perfect but the images are not shown. My original chat looks like this:



Now, it looks like this:



My original chat_body.hmtl is the one that I posted before. Thank you

[Sniper_E]

Yea, I don't see your background image and they need borders like the .bg1 and .bg2 classes have.
If you had transparent images in the new classes, you would be able to see the background image.

Let's see this:

• Show me how you edited your chat_body.html template. (your changed codes)
• Show me how you added those new classes to your chat.css stylesheet.
• What does your background image and those two transparent images look like?

It would be better to see your chat page, see what you did. What style is that?

[wlox wanderlein]

Not sure what I did wrong, but it is working now.

Thank you very much!!!!!!!!!