How do i do chat/affiliate like this?

[zeckes]

I was wondering how I could make something similar to the following picture, I would want it bellow "Forum Information & Statistics". I suppose it would go into the "Main Footer", I tested to put up a chat there with success though I don't know how to align left it (not entirely left since I just want it to be aligned with Forum Information & Statistics). The width of the image is perhaps not 100% accurate though I would want it to be same width as the Forum Information & Statistics.

Is this even doable?

[David Clark]

Hey there zeckes,

Seems doable, but it'll require some modification of your layout templates. I've moved this to the templates board for more in-depth help

You may want to provide your forum URL so people can see where you're at with this.

[zeckes]

trade-harbour.boards.net/

[Tumbleweed]

Does this look o.k.?

Test site: abetteramerica.freeforums.net/

Once I give you the code, you should be able to put this right at the bottom of your home template to just have it show on the main page below the forum stats.

Not sure if you are using the shout box that comes with Proboards or a third party chat box or not so let me know on that. On my test site, I didn't add a chat box, as you can see.

Actually, duh, you have the chat box right on your site. You should be able to add the code right where I said. I'll go ahead and give you the code now and if you want changes then we can work that out.


Removed code


And this is the css: (You can put this above the div/table I a gave you above in case you want to adjust things and once you have it like you want it, move it to the bottom of your style sheet with the style tags removed of course.)


Removed code



[zeckes]

Oh, that looks great.

What size should the c-box be? I have to change that manually. Fixed - trial and error FTW

Is there a way to change color scheme or is it based on forum color scheme? Fixed, it was the latter which is just awesome.

I found a little icon in the upper left corner, what is that for? can i change it to text like "C-box & Affiliates"?

Is this my code/affiliate?

    <tr>
        <td id="right_affi">
<img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0">
        <textarea>
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>    
            </textarea>
        </td>
    </tr>
    <tr>[/font]
   


And is this the affiliates?


<!--if some images are not showing increase the p tag width percentage-->
<div style="border:1px solid black;width:400px;height:64px;overflow-y:hidden;overflow-x:scroll;"><p style="width:150%;">            
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>    
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>    
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>    
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>    
</p></div>            
        </td>
    </tr>
</table>  
</div>
</div> [/font]
<div style="clear:both;"></div>

Would it be possible to add avatar, login info and pm/messages? I made a quick image utilizing the leftover space to show you exactly what i mean

i.imgur.com/N2GkYhW.png

I just want to be clear, while I understand where to put links and images, it is always better to be safe then sorry. So, sorry if I am bothersome.

[Tumbleweed]

Aug 8, 2015 2:45:07 GMT -8 zeckes said:

Oh, that looks great.

What size should the c-box be? I have to change that manually. Fixed - trial and error FTW

Is there a way to change color scheme or is it based on forum color scheme? Fixed, it was the latter which is just awesome.

I found a little icon in the upper left corner, what is that for? can i change it to text like "C-box & Affiliates"?

Oh, I was in too much of a hurry. My fault. You can remove the blue part and put text there:

<div class="title-bar bbcode"><h2><div class="title_wrapper"><img src="http://link.png"></div></h2></div>

Is this my code/affiliate?

    <tr>
        <td id="right_affi">
<img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0">
        <textarea>
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>    
            </textarea>
        </td>
    </tr>
    <tr>[/font]
   


Yes, just replace with your image and your link.

And is this the affiliates?


<!--if some images are not showing increase the p tag width percentage-->
<div style="border:1px solid black;width:400px;height:64px;overflow-y:hidden;overflow-x:scroll;"><p style="width:150%;">            
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>    
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>    
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>    
<a href="http://linktoyoursite.com"><img alt="Photobucket" src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" border="0"></a>    
</p></div>            
        </td>
    </tr>
</table>  
</div>
</div> [/font]
<div style="clear:both;"></div>

Yep. I just gave you some filler affies so you could see how it looked.

Would it be possible to add avatar, login info and pm/messages? I made a quick image utilizing the leftover space to show you exactly what i mean

i.imgur.com/N2GkYhW.png

I just want to be clear, while I understand where to put links and images, it is always better to be safe then sorry. So, sorry if I am bothersome.

Let me get on your last request about the login and avatar. I need to get off the computer for a bit but not for long and should have this for you within a hour or so.

Edit: I didn't get to this until just now and am having difficulties aligning things, hence the red border so I can see where things are better and now I have to go offline again but will get at it asap. I did resize things a bit to more suit your forum as I noticed your chat box has tons of space around it. I need more room for the other side.

abetteramerica.freeforums.net/

[zeckes]

Just, came back, I got a thing half the day, every day.

Mind If I keep the filler affiliates for awhile? I will change them, I just have other things prioritized first, though if you aren't ok with it I can make placeholders.

I have no problem resizing the chat box, in fact ill do so now. Took me a few seconds but I now got this:
i.imgur.com/wBYziFZ.png

It should give room for the avatar and text for login/logout/register and messages, if I can left align it.

[Tumbleweed]

I think I have it about as good as I can get it and you can put on the final pretty touches.

Where you have your chat rules now, delete that and put this table in it's place. (It has the chat rules, the avatar and welcome & pm stuff in it.)



Removed code --see page two for the final code

I also had to add some more css and I did tweak what I gave you so if you want to replace all the css you can or just add the new part and see how you like it. The new css is in blue:


Removed css:

Also thanks to Wormo for his code to fetch the avatar and pm part, you will need to put this in your wrapper template right below the <body> tag. (Around line 8)

<div id="keepsakes" style="display:none"><div id="avatarsave">$[current_user.avatar]</div><div id="pmsave">$[current_user.messages]</div></div>


And on my site, you could almost have another row of affilates or something else below the chat rules, avatar, welcome/pm. If you do want to add something to that empty space I put this....    <!--You could add something else here-->    ...at the end of the little table so you know where to add something else.

[zeckes]

I must have put the innertable into the template wrong trade-harbour.boards.net/

and I cannot add the css because there is a syntax error

Oh, and good morning

[Tumbleweed]

Aug 8, 2015 22:37:09 GMT -8 zeckes said:

I must have put the innertable into the template wrong trade-harbour.boards.net/

and I cannot add the css because there is a syntax error

Oh, and good morning

Recopy both the Home Template and css again in this post

Here's the whole home template: 

Removed code--see page 2 for the final version

Removed css


[zeckes]

Yes I did, tried again just now with same problem

Syntax Error on line 1616

That is this line

#right_affi table {position: relative; top:-20px;margin:0px;:top;width:100%;

}

[Tumbleweed]

Aug 9, 2015 5:15:15 GMT -8 zeckes said:

Yes I did, tried again just now with same problem

Syntax Error on line 1616

That is this line

#right_affi table {position: relative; top:-20px;margin:0px;:top;width:100%;

}

I'm sorry, there was an error in there. I had it in my template so it didn't warn me I goofed.

Will you try to copy both the home template and css one more time in this post (my previous post): (I made small changes in the home template so you need to recopy again, sorry)

support.proboards.com/post/6414664/thread

[zeckes]

Ah, it worked 

Though I can't seem to find where to press anywhere to see my messages (besides in the navigation bar) and I do not see the "Grab my affiliate" bit.. Not complaining, you have been wonderful thus far but just saying.

Would it be possible to add the profile button and admin button as well? If necessary I can live without an admin button because "/admin".

Edit: I think I did a bad.. I got a copy of the categories and forum information & statistics but I have only one copy in  admin>structure>category & board 

[Tumbleweed]

Aug 9, 2015 15:03:15 GMT -8 zeckes said:

Ah, it worked 

Though I can't seem to find where to press anywhere to see my messages (besides in the navigation bar) and I do not see the "Grab my affiliate" bit.. Not complaining, you have been wonderful thus far but just saying.

Would it be possible to add the profile button and admin button as well? If necessary I can live without an admin button because "/admin".

Edit: I think I did a bad.. I got a copy of the categories and forum information & statistics but I have only one copy in  admin>structure>category & board 

Before I address those other things, we need to work out why you have duplicate info centers. Probably why you are missing the "grab my affi" bit.

Can you elaborate on this: "Edit: I think I did a bad.. I got a copy of the categories and forum information & statistics but I have only one copy in admin>structure>category & board"

I'm not understanding what you mean. 

[zeckes]

I thought I did explain it, anyway visual aid is better, the forum isn't on maintenance so it would be quicker to just link it. You can click the categories and even the forum information & statistics to make it smaller, less scrolling involved then trade-harbour.boards.net/