The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Hover logo

View previous topic View next topic Go down

Solved Hover logo

Post by Hafny on June 16th 2014, 11:59 pm

Hello!
I've got a question.
I want a container or something similar appear when I hover on forum's main logo, like here http://graphicia.b1.jcink.com/ . Is it possible?
Forum version: Phbb2.


Last edited by Hafny on June 21st 2014, 10:21 pm; edited 1 time in total

Hafny
New Member

Posts : 12
Reputation : 1
Language : LT

http://divergents.forumlt.com/

Back to top Go down

Solved Re: Hover logo

Post by Hafny on June 21st 2014, 6:35 pm

Bump.

Hafny
New Member

Posts : 12
Reputation : 1
Language : LT

http://divergents.forumlt.com/

Back to top Go down

Solved Re: Hover logo

Post by Ange Tuteur on June 21st 2014, 9:56 pm

Hello Hafny,

You could do something like this :
Display > Templates > General > overall_header

Find :
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
 <!-- BEGIN switch_logo_left -->
 <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
 <!-- END switch_logo_left -->
 <td align="center" width="100%" valign="middle">
 <!-- BEGIN switch_logo_center -->
 <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
 <br />
 <!-- END switch_logo_center -->
 <div class="maintitle">{MAIN_SITENAME}</div>
 <br />
 <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
 </td>
 <!-- BEGIN switch_logo_right -->
 <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
 <!-- END switch_logo_right -->
 </tr>
 </table>

Replace by :
Code:
<table id="navigations" width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
  <td id="hiddenContents">
  My messages
  </td>
 <!-- BEGIN switch_logo_left -->
 <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
 <!-- END switch_logo_left -->
 <td align="center" width="100%" valign="middle">
 <!-- BEGIN switch_logo_center -->
 <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
 <br />
 <!-- END switch_logo_center -->
 <div class="maintitle">{MAIN_SITENAME}</div>
 <br />
 <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
 </td>
 <!-- BEGIN switch_logo_right -->
 <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
 <!-- END switch_logo_right -->
 </tr>
 </table>

In the replacement you'll find :
Code:
<td id="hiddenContents">
  My messages
  </td>

That is where you'll place your contents. When finished save and publish the template.

Then add the following to your stylesheet

Display > Colors > CSS stylesheet
Code:
#navigations { position:relative; }

#hiddenContents {
 filter:alpha(opacity=0);
 opacity:0;
 visibility:hidden;
 position:absolute;
 top:5px;
 left:5px;
 transition:300ms;
}

#navigations:hover #hiddenContents {
 filter:alpha(opacity=100);
 opacity:1;
 visibility:visible;
}

You may need to make adjustments to the CSS for the position.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover logo

Post by Hafny on June 21st 2014, 10:19 pm

It worked! :wouhou: Thank you very much!! :rose:
Solved.

Hafny
New Member

Posts : 12
Reputation : 1
Language : LT

http://divergents.forumlt.com/

Back to top Go down

Solved Re: Hover logo

Post by SLGray on June 21st 2014, 10:21 pm

Topic Solved & Archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum