Adding an HTML table into Board Header

[Kata]

Forum: jotw-roleplay.boards.net



Okay. Being an inexperienced, yet determined programmer, I am attempting to complete the following:


Taking the header of one of my boards and adding a table that has a bg image and when your mouse hovers over the table, a description fades over along with a scroll bar.



Is it even possible, for starters?
Second off, is it used with CSS or HTML only?
Do Headers/Footers accept CSS or is it HTML only?


Here is what I have so far:


<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-dxb5{font-size:xx-small;font-family:Verdana, Geneva, sans-serif !important;;text-align:center}
</style>
<table class="tg">
 <tr>
   <th class="tg-dxb5">insert territory description here. (Goal: Make the text fade over the image.) Add an image for BG</th>
 </tr>
</table>1234567891011
</table>

I've seen it before on a website and thought it'd be convenient for the forum. I'd appreciate if you could help. <3

[Tumbleweed]

Yes, it is possible but before anyone does something for you, you may want to check out the one in the Template library.

support.proboards.com/thread/432208/template-index

It's called "Hover over Banner / Tables [CB] Update 1.0 by SARI-SINISTER" . (A table fades in with all kinds of areas to add content)

Edit: I just realized your title says you want to add it to your board header but then you say, "Taking the header of one of my boards" and that totally confused me. Not only that but I'm not sure if you are talking about boards (as in here on Proboards we have the "Help Guide" board and the "Support Board" or by board you mean just your site.

I do get pretty much what you want as far as the fade-in part although I'm not sure what it is fading-in over. I'm thinking now you just want to hover over your boards and some information fades in, different on each board. Can you explain what you want a bit differently so we can really understand what you are wanting. Thanks.

[Kata]

Sorry for confusing you! xD I tend to do that way too often.

Anyway, I meant adding an informational table over each one of the boards as in "Help Guide" or "Support" for example. They will each have different descriptions, I'm just having trouble finding a way to add an image to the bg instead of a basic color and also I am not all that professional when it comes to coding something like a "fade over" so I was like: o3o Now wat?

But I'll check out that template. Thank you!

[Tumbleweed]

Kata,

I think I get what you want. Take a look here on my test site and I have it in a board header: putteraround2.proboards.com/board/13/shoop-de-cha
The code:

<style>
#shadowsrpg_wrap{
margin:auto;
}
.one {
position: relative;
width: 900px;
height: 100px;
margin: 10px;
background-image:url(http://i657./uu300/EliteList/Bkgrns/med/MRbkg1.gif);
background-repeat:repeat;
}
.two {
position: relative;
top:8px;
width:856px;
height:66px;
background: #ff0000;
font-family:Arial, sans-serif;
font-size:14px;
text-align:center;
padding:8px;
margin:10px;
display:none;
}
</style>

<center>

<div id="shadowsrpg_wrap">

<div class="one">

<div class="two">

This is where your content goes<br>

And more content<br>

</div>

</div>

</div>

</center>


<script>
   /* Fade-in text over images */
   $(function() {
       $(".two").hide();
       $(".one").hover(function() {
           $('.two', this).fadeIn(500);
       }, function() {
           $('.two', this).fadeOut(500);
       });
   });
</script>

If you have an image for the background that is one set size (mine is meant to repeat) then you'll have to set the repeat to no repeat:

background-repeat:no-repeat;

...and you'll need to set your box1 width/height to the width/height of your background image.

the css for the box that fades in with the content needs to be quite a bit smaller than the box1 width/height. I have box2's width set at 54 pixels less than box1 and the height about 34 less. You can play with that.

If you have any question I'm going to be gone starting tomorrow for about a week but anyone else is welcome to help. Shouldn't be anything major that most helpers can figure out.