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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

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.

avatar
SLGray
Administrator
Administrator

Male Posts : 40515
Reputation : 2733
Language : English
Location : United States

https://fmthemes.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