Messy Footer! Can someone lend a brain?

[Scorch]

Forum URL: indigent.boards.net

I'm not sure if this is where I'm supposed to post this, but hopefully it is.

At the bottom of my forum I have a png image of what I would like to make for the main footer.
Right at the bottom is my attempt at getting what I want, but as you can see it has a few *cough* issues.

I've sort of reached a dead end where my brain understands what's going on - it's a miracle I got the hover things to work!
If someone could point me in the right direction that would be super helpful.

[Tumbleweed]

Mar 7, 2015 4:44:51 GMT -8 Scorch said:

Forum URL: indigent.boards.net

I'm not sure if this is where I'm supposed to post this, but hopefully it is.

At the bottom of my forum I have a png image of what I would like to make for the main footer.
Right at the bottom is my attempt at getting what I want, but as you can see it has a few *cough* issues.

I've sort of reached a dead end where my brain understands what's going on - it's a miracle I got the hover things to work!
If someone could point me in the right direction that would be super helpful.

I see a bunch of images. Right below the users online you seem to have a neat and tidy area with things where I think you want them to be. Are you trying to replicate sort of the same thing around your shoutbox or are you trying to get them below your shout box. Little confused at what you are attempting to do since you just mentioned "a png image" which I assume means one image that isn't cooperating. Can you clarify? 

[Scorch]

Apologies Tumbleweed!



This is what I'm hoping to achieve as the grand finale.
But I'm trying to replicate that same thing around the shoutbox, yeah. So the shoutbox would be in place of the dark grey box in the image above.

Is that a bit clearer? Sorry it wasn't before!

[Tumbleweed]

I thought that was what you were trying to do. Is there a reason you couldn't have just copied what you have above it and insert the different things? Just curious.

But the basic table you'll need, needs a rowspan for the shout box to span those two rows and then the colspan at the bottom. So your basic table should look like this:

<table>
<tr>
<td>Hover over images</td>
        <td rowspan="2">shoutbox</td>
      <td>update2</td>
</tr> <tr>
    <td>update1</td>
<td>hover over images</td>
  </tr>
<tr>
<td colspan="3">
This is a bunch of stuff here across the bottom. Yep it is.
</td>
</tr>
</table>

I didn't want to mess with your hover code since you have it perfect, otherwise I might have had you do it differently.

[Scorch]

Because Tumbleweed, that would have been an easy thing to do and I thought, no I'm going to make life complicated for myself! haha!
I actually could do that, but I thought that was going to be harder that what I chose to do...but apparently not!

So I gave it a go and it's slightly better than before! But the hovers are all wonky, maybe it would be better to start again from the top? Sorry this is probably super basic stuff for you so thank you for helping out the idiot! haha!

This is what I have in the footer:

<div class="footer">
<table>?<tr>?<td><ul class="img-list">

      <li><img src="http://i1369./ag210/scorchingrp/1_zpshigicyeo.png" width="82" height="82" />
      <span class="text-content"><span>TEAM APOLLO <hr> 000</span></span>
</li>
<li>
      <img src="http://i1369./ag210/scorchingrp/2_zpsorsfm1ik.png" width="82" height="82" />
      <span class="text-content"><span>TEAM ORION <hr> 010</span></span>
</li><br>
  <li>
      <img src="http://i1369./ag210/scorchingrp/3_zpsgzgjy37v.png" width="82" height="82" />
      <span class="text-content"><span>TEAM POINTS</span></span>
</li>
<li>
      <img src="http://i1369./ag210/scorchingrp/4_zpshzit3hh6.png" width="82" height="82" />
      <span class="text-content"><span>TEAM SPUTNIK <hr> 010</span></span>
</li>
</ul>
</td>?<td rowspan="2"><div class="shoutbox"><div id="move-shoutbox"></div></div></td>?<td><div class="updatesheader">EVENTS:</div>
<div class="updates1">BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAH
</div></td>
</td>?</tr>
<tr>?<td><div class="updatesheader">UPDATES:</div>
<div class="updates1">BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAH
</div></td>
</td>?<td><ul class="img-list">

      <li><img src="http://i1369./ag210/scorchingrp/5_zpsdvtoee0u.png" width="82" height="82" />
      <span class="text-content"><span>THREAD OTM <hr> @name</span></span>
</li>
<li>
      <img src="http://i1369./ag210/scorchingrp/6_zpsqrotyffe.png" width="82" height="82" />
      <span class="text-content"><span>MEMBER OTM <hr> @sid</span></span>
</li><br>
  <li>
      <img src="http://i1369./ag210/scorchingrp/7_zps1hc5cuxg.png" width="82" height="82" />
      <span class="text-content"><span>CHARACTER OTM <hr> @name</span></span>
</li>
<li>
      <img src="http://i1369./ag210/scorchingrp/8_zps7logrtuw.png" width="82" height="82" />
      <span class="text-content"><span>COUPLE <hr> @name</span></span>
</li>
</ul>
</td>?</tr>?<tr>?<td colspan="3">?This is a bunch of stuff here across the bottom. Yep it is.?</td>?</tr>?</table>
</div>

and this is the css I've cobbled together for it:

ul.img-list {
 list-style-type: none;
 margin: 0;
 padding: 0;
 text-align: center;
}

ul.img-list li {
 display: inline-block;
 height: 82px;
 margin: 0 1em 1em 0;
 position: relative;
 width: 82px;
}

span.text-content {
 background: rgba(0,0,0,0.5);
 color: white;
 cursor: pointer;
 display: table;
 height: 82px;
 left: 0;
 position: absolute;
 top: 0;
 width: 82px;
 opacity: 0;
 font-family:courier new!important;
 text-transform:uppercase;
 -webkit-transition: opacity 500ms;
 -moz-transition: opacity 500ms;
 -o-transition: opacity 500ms;
 transition: opacity 500ms;
}

ul.img-list li:hover span.text-content {
 opacity: 1;
}

span.text-content span {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
}

.footer {
width:900px;
height: 400px;
overflow: none;
background: #303030;
}

.updates header {
   width: 159px;
   margin-top: -250px;
   font-family:oswald!important;
colour: #b3b3b3;
}
.updates1 {
   position: relative;
   overflow: auto;
   width: 159px;
   height: 159px;
margin-top: -50px;
   font-family:courier new!important;
   background: #b3b3b3;
}

.updates2 {
   position: relative;
   overflow: auto;
   width: 159px;
   height: 159px;
margin-top: -150px;
   font-family:courier new!important;
   background: #b3b3b3;
}

.shoutbox {
width: 454px;
   height: 323px;
margin: 4px auto;
}

[Tumbleweed]

First, before I forget, when you say you have this in your footer, do you literally mean you put in your global footer or in the footer part of your template? Because your hovers are lining up fine on my test site (abetteramerica.freeforums.net/) but I literally am testing it in my global footer.  If you just meant in the footer area of your template, can you tell me exactly where you put it. Just copy the line of code above it and post it here so I can test it out that way.

Looking again at your site. Are you trying to add it to your Forum Information & Statistics because it almost looks like it is attached to that or in it.

Also, I think you accidently copied a couple extra td tags so I removed those and I added some widths in your td tags as that seems to help. (You can remove and/or creates some ids and add to your style sheet, if you prefer.) Another thing. Since "footer" may be used in Proboards default, I changed it to footer1 so you need to change that in your css.

<div class="footer1">
<table>?<tr>?<td style="width:200px;"><ul class="img-list">

     <li><img src="http://i1369./ag210/scorchingrp/1_zpshigicyeo.png" width="82" height="82" />
     <span class="text-content"><span>TEAM APOLLO <hr> 000</span></span>
</li>
<li>
     <img src="http://i1369./ag210/scorchingrp/2_zpsorsfm1ik.png" width="82" height="82" />
     <span class="text-content"><span>TEAM ORION <hr> 010</span></span>
</li><br>
 <li>
     <img src="http://i1369./ag210/scorchingrp/3_zpsgzgjy37v.png" width="82" height="82" />
     <span class="text-content"><span>TEAM POINTS</span></span>
</li>
<li>
     <img src="http://i1369./ag210/scorchingrp/4_zpshzit3hh6.png" width="82" height="82" />
     <span class="text-content"><span>TEAM SPUTNIK <hr> 010</span></span>
</li>
</ul>
</td>?<td rowspan="2" style="width:500px;"><div class="shoutbox"><div id="move-shoutbox"></div></div></td>?<td><div class="updatesheader">EVENTS:</div>
<div class="updates1">BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAH
</div>
</td>?</tr>
<tr>?<td style="width:200px;"><div class="updatesheader">UPDATES:</div>
<div class="updates1">BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAH
</div>
</td>?<td><ul class="img-list">

     <li><img src="http://i1369./ag210/scorchingrp/5_zpsdvtoee0u.png" width="82" height="82" />
     <span class="text-content"><span>THREAD OTM <hr> @name</span></span>
</li>
<li>
     <img src="http://i1369./ag210/scorchingrp/6_zpsqrotyffe.png" width="82" height="82" />
     <span class="text-content"><span>MEMBER OTM <hr> @sid</span></span>
</li><br>
 <li>
     <img src="http://i1369./ag210/scorchingrp/7_zps1hc5cuxg.png" width="82" height="82" />
     <span class="text-content"><span>CHARACTER OTM <hr> @name</span></span>
</li>
<li>
     <img src="http://i1369./ag210/scorchingrp/8_zps7logrtuw.png" width="82" height="82" />
     <span class="text-content"><span>COUPLE <hr> @name</span></span>
</li>
</ul>
</td>?</tr>?<tr>?<td colspan="3">?This is a bunch of stuff here across the bottom. Yep it is.?</td>?</tr>?</table>
</div>

Anyway, let me know where you have it, in the wrapper/home template or the actual global footer.

[Scorch]

That's looking so much better! Just gotta change the shoutbox height, but that's an easy fix!

I have it in my main footer because I only want it to show up on the front page and not on boards/threads etc, is that the right place to put it?

[Tumbleweed]

Mar 9, 2015 10:19:10 GMT -8 Scorch said:

That's looking so much better! Just gotta change the shoutbox height, but that's an easy fix!

I have it in my main footer because I only want it to show up on the front page and not on boards/threads etc, is that the right place to put it?

That's fine if you want it there and since we do have that option, I see no big deal with it. (You can always move it to the "home" template at a future date.)I think people opt to put it in the template part so the colors match different themes.  Do you think you can tweak it from here or do you need further help?

[Scorch]

Would it be better to move it to the home template because the shoutbox is appearing on every page and not just the main page?
Where abouts would it go if I did change it?

Thank you so much for your help Tumbleweed, I think I can just about manage the last bit!

[Tumbleweed]

Mar 10, 2015 9:25:00 GMT -8 Scorch said:

Would it be better to move it to the home template because the shoutbox is appearing on every page and not just the main page?
Where abouts would it go if I did change it?

Thank you so much for your help Tumbleweed, I think I can just about manage the last bit!

You can just paste the html part at the bottom of your home template:

Admin> Themes> Layout Templates>Home

And then your css without the style tags can go at the bottom of your style sheet.
 Admin > Themes> Advanced Styles & CSS> Style Sheet>

It shouldn't show up on anything but the main page then.
 

[Scorch]

Mar 11, 2015 2:29:49 GMT -8 Tumbleweed said:

You can just paste the html part at the bottom of your home template:

Admin> Themes> Layout Templates>Home

And then your css without the style tags can go at the bottom of your style sheet.
 Admin > Themes> Advanced Styles & CSS> Style Sheet>

It shouldn't show up on anything but the main page then.
 

I did that an it looks perfect, except the shoutbox is still on every page?

[Tumbleweed]

Mar 11, 2015 10:36:07 GMT -8 Scorch said:

Mar 11, 2015 2:29:49 GMT -8 Tumbleweed said:

You can just paste the html part at the bottom of your home template:

Admin> Themes> Layout Templates>Home

And then your css without the style tags can go at the bottom of your style sheet.
 Admin > Themes> Advanced Styles & CSS> Style Sheet>

It shouldn't show up on anything but the main page then.
 

I did that an it looks perfect, except the shoutbox is still on every page?

You are right, I was thinking you had the code in there that you need since you had the move code in there. Go to your "Forum wrapper" template and scroll down to about line 72-ish  where you see this: $[shoutbox]

Replace it with this:

{if $[route.name] == "home"}{if $[shoutbox]}$[shoutbox]{/if}{/if} 

Let me know if that does the trick.

[Scorch]

That's perfect!
Thank you so much for all your help Tumbleweed!

[Tumbleweed]

Not a problem, Scorch glad I could help.