Info on Banner?

[Mollie]

Hey there!


I see on other forums that they have made their banner image a kind of info center with the background image faded and usually 3 boxes for info on them and I was wondering if anyone had a code for that?

[Tumbleweed]

Jun 19, 2015 4:27:00 GMT -8 Mollie said:

Hey there!


I see on other forums that they have made their banner image a kind of info center with the background image faded and usually 3 boxes for info on them and I was wondering if anyone had a code for that?

Hi Molly,

I helped another member with that but here are the instructions I gave her: (I just copied and pasted from the other thread.)

I quick set it up on this test site if you want to take a look:   putteraround1.proboards.com/

--------------------

Put your main banner in like normal via Admin>Themes>Advanced Styles & CSS>Visual Editor>

In your wrapper template replace your typical banner stuff which should look like this....

<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>

With this....

<center>
<div id="fade_to_table">
<div class="hover">
<div class="my_trans_cont"></div>
</div>
</div>
</center>
<br />

And for now right above that and below the <header> go ahead and put your css. You can move it to your style sheet after you tweak things to how you want them.

<style>
#fade_to_table{
position:relative;
width:633px;
height: 230px;
background-color: white;
opacity: 1;
background-image:url(http://i657./uu300/EliteList/Banrs/T1/BnarT4.png);
background-repeat:no-repeat;
margin-auto;
}
.hover {
width: 633px;
height: 230px;
opacity: 0;
transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
}
.hover:hover{
opacity: .8;
}
.my_trans_cont{
width:633px;
height:0px;
background-color: transparent;
}
#my_table{
width:633px;
height:230px;
background-color:white;
font-size: 14px;
}
#my_cols{
float:left;
width:192px;
height:210px;
padding:8px;
text-align:left;
border:1px solid #dddddd;
}
</style>

 

And I like to keep my table out of the way so I can add and remove things without fear of messing other things up so down toward the bottom but right above $[footer] add this:

<script type="text/javascript">
$("document").ready(function(){
$("#my_table").insertAfter(".my_trans_cont");

});
</script>


<div id="my_table">
<div id="my_cols">
Hello there
</div>
<div id="my_cols">
 Hello there
</div>
<div id="my_cols">
 Hello there
</div>
</div>

Now to touch on the css. The banner you put in via your preview editor is repeated here in blue: The red widths should all be the same width of your banner and the green heights should be all the same height of your banner except the one I have bolded. I think the rest of it is pretty self explanatory.

<style>
#fade_to_table{
position:relative;
width: 633px;
height: 230px;
background-color: white;
opacity: 1;
background-image:url(http://i657./uu300/EliteList/Banrs/T1/BnarT4.png);
background-repeat:no-repeat;
margin-auto;
}
.hover {
width: 633px;
height: 230px;
opacity: 0;
transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
}
.hover:hover{
opacity: .8;
}
.my_trans_cont{
width: 633px;
height:0px;
background-color: transparent;
}
#my_table{
width: 633px;
height: 230px;
background-color:white;
font-size: 14px;
}
#my_cols{
float:left;
width:192px;
height:210px;
padding:8px;
text-align:left;
border:1px solid #dddddd;
}
</style>

Fingers crossed I explained it well enough and this works for you.

[Mollie]

Thanks, will give it a try in a minute!