Logo Hover, template request. [rd]

[Welshling]

Please refer to this topic support.proboards.com/thread/468828/welcome-table-hover to see my request in full.

And a brief summary here is that I am looking for a hover code for the welcome table, so when the forum banner is hovered over it will show the table under or within it. With whatever information I add into that table part. >.< Hopefully that made sense.

And yes its a v5 forum. delusional.freeforums.net
Thanks to whomever looks into this.

I am looking for perhaps a three column table, where i put my updates and any bullitins etc; when hovered over the forum banner this table would be viewable and when the mouse is moved away from the banner, the banner moves back into place.

Or i have seen a banner somewhere, with a scroll on click property. You click on the far right of the banner, then the info plus a banner shows up and keep clicking with however many tables or columns you put in. Would this be easier?

[Welshling]

Anyone please?

[Welshling]

i've added detail to the request in the first post, if someone could whip me up this piece of coding please?

[♡ Kat Meows ♡]

I second this.

[Welshling]

Anyone want to put this together, please?

[Tumbleweed]

Welshling, 
Which way do you want it? Under the banner or over the banner? If below, do you want it to overlay your forum or actually move the forum down to show the table? (By over, I mean it will fade in to cover your banner or as you said, within the banner.) 
 

[Welshling]

Tumbleweed The first thing a guest or member would see, would be the banner. So Under please. I think answered your question right >.< but what you said about it fading into cover the banner sounds about right as well, so I am unsure. now.

[Tumbleweed]

Welshling,

How does this look?
(excuse the makeshift banner)

putteraround10.freeforums.net/forum

[Welshling]

Prefect, Tumbleweed to add a three column table into that should be ok right? If you are busy, i'm sure i could figure this part out myself and such and thanks for doing this too

[Tumbleweed]

Edit:  For anyone else trying this, please read the whole thread, particularly page 2, as I made changes that you may want to implement.


I added a 3 column div's.

How I have it set up:
1. Banner graphic put in here: Admin > Themes > Advanced Styles & CSS > Visual Editor tab> Header(Top) > Banner
2. You need a link to the jquery library so if you don't already have this, add it to the top of your global header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

Edit: Scratch #2. Don't need it as Proboards has it built in.

3. Add this css to the bottom of your style sheet. Admin > Themes > Advanced Styles & CSS > Style Sheet tab


/*Banner fade this just sets things up for positioning */
.entry1{
position:relative;
top:0px;
left:0px;
width: 645px;
height: 332px;
}
/* this is the background behind the fade description. Height width should be same as entry above */
.image1{
position: absolute;
top:0px;
left:0px;
opacity:4;
width:645px;
height:332px;
z-index:100;
}
.fade_content{
position: relative;
top: 8px;
background-color: white;
border: 1px solid black;
color: black;
font-size: 1em;
padding: 18px;
width:600px;
height:280px;
text-align:left;                      
}
.columns{
width: 33%;
float: left;
}
4. Now go to: Admin > Themes > Layout Templates and Forum Wrapper

Find this part in blue (toward the toppish) and add the red:

<div id="wrapper">
<header>
<center>
<div class="entry1">
<div class="image1">

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

<!--jquery automatically inserts the div content here-->
</div>
</div>
</center>
<br /> <br />


Now still in the same layout got to the very bottom and add this: (This is where you'll add your content.)


<!--This is your fade content keep it at the bottom-->
<div class="fade_content" style="display:none;">
            <center> <h4> Testing this</h4></center>
            <br />
<div class="columns">Content for left side</div>
<div class="columns">Content for middle</div>
<div class="columns">content for right side</div>
   
   
           
</div>
   <script type="text/javascript">
$(document).ready(function(){
$('.fade_content').insertAfter($('.image1'));
});
</script>


Edit: Forgot the most important part. the jquery that fade it. You can put this in your global header:



<script type="text/javascript">    
$(function() {
   $('.entry1').hover(function() {
       $('.image1',this).stop().fadeTo('slow', 0.4)
           .siblings().stop().fadeTo('slow', 1);
   }, function() {
       $('.image1',this).stop().fadeTo('slow', 1)
           .siblings().stop().fadeTo('slow', 0);
   });
});

</script>




Editing the css: You can put that css in the layout template directly above your content stuff while you edit it, if you want. (Might be easier but you need to add style tags to it. ) Once you get it edited you can move it to the style sheet just to keep things tidy. Both the classes in the css .entry1 and .image1 need to be have the width and height of your banner. You can style things as you please. The .fade_content class width and height needs to be smaller than your banner width/height. You'll probably have to fiddle with that to get it right.

That's it. If you have any issues, post back.

[Welshling]

Tumbleweed thanks again for doing this and for walking me through the process, i've already come up with an issue with this added css.

In my css on the theme (rainbow) i had added some styles to change the peekaboo right side settings, but now the peekaboo isn't showing at all on the theme.
Secondly i have edited the .entry1 and .image1 to match the banner width 800 x 400 and the .fade_content is at 600 x300 and its not fading.

I have a test admin account, "dummy" is the username and i will send you the password if you would like to see the coding?

[Tumbleweed]

Is this on a different site other than the one in your first post? Or is the theme not default you are trying this on? I prefer not to go on anyones site with powers like that. Is it possible you could either temporarily set that theme for guests or transfer that theme to a test site? (Probably the best idea is to have a test site.)

[Welshling]

the default theme is captain jack, the them i have added this piece of css too is on another theme. Rainbow. I did state this above and sent you the login information so you can see everything. But yes i will temporarily put the theme up as the default theme. until we can resolve this.

[Welshling]

Ok just an update the theme where this code is added Tumbleweed is on view now for guests too. At the moment I don't see a hover or transition working at all when i hover over the image. Perhaps the styles need tweaking? I just don't know which parts of the css to play with lol

[Tumbleweed]

Sorry for the delay. I must of been scatter-brained when I posted that.  I didn't give you the most important part. The jquery that does the fade. You can put his in your global headers if you want.


<script type="text/javascript">    
$(function() {
   $('.entry1').hover(function() {
       $('.image1',this).stop().fadeTo('slow', 0.4)
           .siblings().stop().fadeTo('slow', 1);
   }, function() {
       $('.image1',this).stop().fadeTo('slow', 1)
           .siblings().stop().fadeTo('slow', 0);
   });
});

</script>
I'll edit my above post in case someone else tries this.