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.

Animated menu bar

View previous topic View next topic Go down

Solved Animated menu bar

Post by Crywider on August 17th 2014, 10:22 pm

Hello,

I am amateur at coding, so I would be happy if anyone could help me with this. Smile
Let me explain. I have yellow menu bar (PORTAL, FORUM, LOG IN, PROFILE, etc. buttons) but I want to have it darker. But I want to have it animated, I mean...for example, if you move your mouse on FORUM BUTTON, it will *flash* and change colour to ligther yellow Smile

Sorry, I know there must be a lot of dumbs like me, but I did not find anything what helped me...is this possible to do as FREE USER on forumotion?
thx
(my forum: http://aktiv.slovakforum.net/forum )


Last edited by Crywider on August 26th 2014, 8:22 pm; edited 2 times in total (Reason for editing : wrong link)

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 17th 2014, 10:29 pm

Hello Crywider,
At first the link you provided has a parenthesis at the end that takes you to a wrong link. Please change that so people will easily visit your forum.

As for the help you want, you added images to your navbar which is not able to be edited by anyone.
If you could give me some time then i could create them for you but this is not via coding that you can change You must edit the images and make them as wanted.

Please send me the Pm button and the Log Out button to change them too.

Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 17th 2014, 10:36 pm

//edited, sorry I didnt notice, thx Smile

I got both versions of images - light and dark...I just want to change from one to another. And some animation would be fantastic, but not needed.

 to 

for example

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 17th 2014, 10:41 pm

Well i think you don't need the yellow color. Just the ones you have would be great.
Please add the below code to your CSS and check if you like it.
Go to Admin Panel >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet
and add:
Code:
a.mainmenu {
color: #542c0f;
text-decoration: none;
opacity: .6;
}
a.mainmenu:hover {
color: #000;
text-decoration: underline;
opacity: 1;
}
Save it and check it. If you don't like it and you insist on having the specific buttons please tell me.

MrMind






Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 17th 2014, 10:46 pm

Something like this, but I want it darker...this is less opacity and it makes it more transparent, not darker...if you know...but still better than original...you can check it by yourself, it is saved

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 17th 2014, 10:50 pm

Ok to make them darker i need you to post me here the images one by one, darker and lighter and i will make you the code you need to have.






Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 17th 2014, 11:12 pm

Here are they Smile












Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 17th 2014, 11:44 pm

Ok. Had to register to make this owrk. hehe. Lets see. Go to Admin Panel >> Display >> Pictures & Colors >> Colors >> CSS Stylesheet and add the below code in the Stylesheet.
Code:
img#i_icon_mini_index{background:url(http://i39.servimg.com/u/f39/16/33/15/26/forum_11.png) no-repeat !important;}
img#i_icon_mini_index:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/forum10.png) no-repeat !important;}
img#i_icon_mini_portal{background:url(http://i39.servimg.com/u/f39/16/33/15/26/portal10.png) no-repeat !important;}
img#i_icon_mini_portal:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/portal11.png) no-repeat !important;}
img#i_icon_mini_faq{background:url(http://i39.servimg.com/u/f39/16/33/15/26/faq_210.png) no-repeat !important;}
img#i_icon_mini_faq:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/faq10.png) no-repeat !important;}
img#i_icon_mini_search{background:url(http://i39.servimg.com/u/f39/16/33/15/26/search10.png) no-repeat !important;}
img#i_icon_mini_search:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/search10.png) no-repeat !important;}
img#i_icon_mini_members{background:url(http://i39.servimg.com/u/f39/16/33/15/26/member11.png) no-repeat !important;}
img#i_icon_mini_members:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/member10.png) no-repeat !important;}
img#i_icon_mini_register{background:url(http://i39.servimg.com/u/f39/16/33/15/26/regist10.png) no-repeat !important;}
img#i_icon_mini_register:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/regist10.png) no-repeat !important;}
img#i_icon_mini_login{background:url(http://i39.servimg.com/u/f39/16/33/15/26/log_in10.png) no-repeat !important;}
img#i_icon_mini_login:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/log_in10.png) no-repeat !important;}
img#i_icon_mini_profile{background:url(http://i39.servimg.com/u/f39/16/33/15/26/profil10.png) no-repeat !important;}
img#i_icon_mini_profile:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/profil10.png) no-repeat !important;}
img#i_icon_mini_message{background:url(http://i39.servimg.com/u/f39/16/33/15/26/messag10.png) no-repeat !important;}
img#i_icon_mini_message:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/messag12.png) no-repeat !important;}
img#i_icon_mini_new_message{background:url(http://i39.servimg.com/u/f39/16/33/15/26/messag11.png) no-repeat !important;}
img#i_icon_mini_new_message:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/messag11.png) no-repeat !important;}
img#i_icon_mini_logout{background:url(http://i39.servimg.com/u/f39/16/33/15/26/log_ou10.png) no-repeat !important;}
img#i_icon_mini_logout:hover{background:url(http://i39.servimg.com/u/f39/18/00/61/07/log_ou10.png) no-repeat !important;}
Save it and check it out. Lets hope this is it.

MrMind






Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 18th 2014, 7:03 am

hmm does not work, but maybe I did something wrong Very Happy ...I gave you access to admin panel, so you can check it yourself if you would be that good Smile

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 18th 2014, 8:44 am

@Crywider wrote:hmm does not work, but maybe I did something wrong Very Happy ...I gave you access to admin panel, so you can check it yourself if you would be that good Smile

Hello again,
That didn't work because in the templates you still have the default images in.
Please go to: Admin Panel >> Display >> Templates >> General >> overall_header
and search for mainmenu. After you search that you will see
Code:
<a class="mainmenu" href="/forum"><img id="i_icon_mini_index" src="http://i39.servimg.com/u/f39/18/00/61/07/forum10.png" border="0" hspace="0" alt="Domov" title="Domov"></a>
and each button will have one of these codes. You must remove the src="LINK OF IMAGE" from each one of them. After you do that click Save and then publish the template using the green cross  Add  which will be next to it. That should fix it.

MrMind

Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 18th 2014, 10:29 pm

In overall_header I cannot find anything like this...

here is it:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <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>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 19th 2014, 12:45 am

Please place the below code as you template. If you save it and publish it, lets hope it works.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <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>

            <table cellspacing="0" cellpadding="0" border="0" align="center"><tbody><tr><td align="center" nowrap="nowrap"><a class="mainmenu" href="/forum"><img id="i_icon_mini_index" border="0" hspace="0" alt="Domov" title="Domov"></a><a class="mainmenu" href="/"><img id="i_icon_mini_portal" border="0" hspace="0" alt="Portál" title="Portál"></a><a class="mainmenu" href="/calendar"><img id="i_icon_mini_calendar" src="http://illiweb.com/fa/empty.gif" border="0" hspace="0" alt="Calendar" title="Calendar"></a><a class="mainmenu" href="/faq"><img id="i_icon_mini_faq" border="0" hspace="0" alt="FAQ" title="FAQ"></a><a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;"><img id="i_icon_mini_search" border="0" hspace="0" alt="Hľadať" title="Hľadať"></a><script type="text/javascript">//<![CDATA[
var url_search = '/search';
insert_search_menu();//]]>
</script><div id="search_menu" style="display:none;position:absolute;z-index:10000"><form action="/search" method="get"><input type="hidden" name="mode" value="searchbox"><table class="forumline" cellpadding="3" cellspacing="0" border="0"><tbody><tr><th class="thHead">Hľadaný reťazec</th></tr><tr><td class="row2" align="center"><input type="text" class="post" name="search_keywords" size="24" style="height:20px; margin-top:6px; margin-right:3px;"> <input type="submit" class="button" value="Go"></td></tr><tr><td class="row2" align="center" nowrap="nowrap"><span class="genmed">&nbsp;Display results as :&nbsp; <input id="rposts" type="radio" name="show_results" value="posts"><label for="rposts">&nbsp;Príspevky</label> <input id="rtopics" type="radio" name="show_results" value="topics" checked="checked"><label for="rtopics">&nbsp;Témy</label>&nbsp;</span></td></tr><tr><td class="row2" align="center"><span class="genmed"><hr><a href="/search" rel="nofollow" title="Advanced Search"><img src="http://illiweb.com/fa/empty.gif" width="12" height="13" border="0" hspace="3" alt="Advanced Search">&nbsp;Advanced Search</a><span></span></span></td></tr></tbody></table></form></div><a class="mainmenu" href="/memberlist"><img id="i_icon_mini_members" src="http://i39.servimg.com/u/f39/16/33/15/26/member11.png" border="0" hspace="0" alt="Zoznam užívateľov" title="Zoznam užívateľov"></a><a class="mainmenu" href="/groups"><img id="i_icon_mini_groups" src="http://illiweb.com/fa/empty.gif" border="0" hspace="0" alt="Užívateľské skupiny" title="Užívateľské skupiny"></a><a class="mainmenu" href="/profile?mode=editprofile"><img id="i_icon_mini_profile" border="0" hspace="0" alt="Nastavenia" title="Nastavenia"></a><a class="mainmenu" href="/privmsg?folder=inbox" rel="nofollow"><img id="i_icon_mini_new_message" border="0" hspace="0" alt="Súkromné správy (1)" title="Súkromné správy (1)"></a><a class="mainmenu" href="/login?logout=1&amp;tid=d4a1a6007c0149babbef58a2d49edda9&amp;key=71bdb7" rel="nofollow" id="logout"><img id="i_icon_mini_logout" border="0" hspace="0" alt="Odhlásenie [ {USERNAME} ]" title="Odhlásenie [ {USERNAME} ]"></a></td></tr></tbody></table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 19th 2014, 3:22 pm

done, and it looks weird...

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 19th 2014, 9:33 pm

Hello,
Please add the below code as you template save and publish and you are done.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
  <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <meta http-equiv="content-style-type" content="text/css" />
  <!-- BEGIN switch_compat_meta -->
  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
  <!-- END switch_compat_meta -->
  <!-- BEGIN switch_canonical_url -->
  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
  <!-- END switch_canonical_url -->
  {META_FAVICO}
  {META}
  {META_FB_LIKE}
  <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
  {T_HEAD_STYLESHEET}
  {CSS}
  <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
  <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
  <script src="{JQUERY_PATH}" type="text/javascript"></script>
  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

  <!-- BEGIN switch_fb_login -->
  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
  <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
  <!-- END switch_fb_login -->

  <!-- BEGIN switch_ticker -->
  <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
  <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
  <!-- END switch_ticker -->

  <!-- BEGIN switch_ticker_new -->
  <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
  <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
        case 'top' :
            slid_vert = true;
            break;

        case 'left':
            break;

        case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

        case 'right':
            auto_dir = 'prev';
            break;

        default:
            slid_vert = true;
      }

      $(document).ready(function() {
        var w_cont = $('#fa_ticker_container').width();

        if (w_cont > 0)
        {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
              if ($(this).height() > height_max)
              {
                  height_max = $(this).height();
              }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
              if ($(this).width() > width_item)
              {
              var ratio      = $(this).width() / width_item;
              var new_height = Math.round($(this).height() / ratio);
              $(this).height(new_height).width(width_item);
              }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
              wrap: 'circular',
              auto: {switch_ticker.STOP_TIME},
              auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
        }
        else
        {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
        }
      });
  //]]>
  </script>
  <!-- END switch_ticker_new -->

  <script type="text/javascript">//<![CDATA[
  $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
        pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
        if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
        report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
        if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
        $(document).ready(function() {           
            Ticker.start({
              height : {switch_ticker.HEIGHT},
              spacing : {switch_ticker.SPACING},
              speed : {switch_ticker.SPEED},
              direction : '{switch_ticker.DIRECTION}',
              pause : {switch_ticker.STOP_TIME}
            });
        });
      <!-- END switch_ticker -->
  });

  <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
  <!-- END switch_login_popup -->

  <!-- BEGIN switch_login_popup -->
  $(document).ready( function() {
      $(window).resize(function() {
        var windowWidth = document.documentElement.clientWidth;
        var popupWidth = $("#login_popup").width();
        var mypopup = $("#login_popup");

        $("#login_popup").css({
        "left": windowWidth/2 - popupWidth/2
            });
      });
  });
  <!-- END switch_login_popup -->
  //]]>
  </script>
  {GREETING_POPUP}
  <!-- BEGIN switch_ticker_new -->
  <style>
  .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
  }

  .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
  }

  .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
  }
  </style>
  <!-- END switch_ticker_new -->
  {HOSTING_JS}
  <!-- BEGIN google_analytics_code -->
  <script type="text/javascript">
  //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
  _gaq.push(['_trackPageLoadTime']);

  <!-- BEGIN google_analytics_code_bis -->
  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
  _gaq.push(['b._trackPageview']);
  <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  //]]>
  </script>
  <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  <!-- BEGIN hitskin_preview -->
  <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
        <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
        </p>
      </div>
  </div>
  <!-- END hitskin_preview -->

  <!-- BEGIN switch_login_popup -->
  <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
        <tr height="25">
            <td class="catLeft">
              <span class="genmed module-title">{SITENAME}</span>
            </td>
        </tr>
        <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
              <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                    <input type="submit" class="mainoption" value="{L_LOGIN}" />
                    <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                    <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
              </div>
              <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
        </tr>
      </table>
  </div>
  <!-- END switch_login_popup -->

  <a name="top"></a>
  {JAVASCRIPT}

  <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
        <td class="bodyline">
            <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>

            <table cellspacing="0" cellpadding="0" border="0" align="center"><tbody><tr><td align="center" nowrap="nowrap"><a class="mainmenu" href="/forum"><img id="i_icon_mini_index" border="0" hspace="0" title="Domov"></a><a class="mainmenu" href="/"><img id="i_icon_mini_portal" border="0" hspace="0" title="Portál"></a><a class="mainmenu" href="/calendar"><img id="i_icon_mini_calendar" src="http://illiweb.com/fa/empty.gif" border="0" hspace="0" alt="Calendar" title="Calendar"></a><a class="mainmenu" href="/faq"><img id="i_icon_mini_faq" border="0" hspace="0" title="FAQ"></a><a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;"><img id="i_icon_mini_search" border="0" hspace="0" title="Hľadať"></a><script type="text/javascript">//<![CDATA[
var url_search = '/search';
insert_search_menu();//]]>
</script><div id="search_menu" style="display:none;position:absolute;z-index:10000"><form action="/search" method="get"><input type="hidden" name="mode" value="searchbox"><table class="forumline" cellpadding="3" cellspacing="0" border="0"><tbody><tr><th class="thHead">Hľadaný reťazec</th></tr><tr><td class="row2" align="center"><input type="text" class="post" name="search_keywords" size="24" style="height:20px; margin-top:6px; margin-right:3px;"> <input type="submit" class="button" value="Go"></td></tr><tr><td class="row2" align="center" nowrap="nowrap"><span class="genmed">&nbsp;Display results as :&nbsp; <input id="rposts" type="radio" name="show_results" value="posts"><label for="rposts">&nbsp;Príspevky</label> <input id="rtopics" type="radio" name="show_results" value="topics" checked="checked"><label for="rtopics">&nbsp;Témy</label>&nbsp;</span></td></tr><tr><td class="row2" align="center"><span class="genmed"><hr><a href="/search" rel="nofollow" title="Advanced Search"><img src="http://illiweb.com/fa/empty.gif" width="12" height="13" border="0" hspace="3" alt="Advanced Search">&nbsp;Advanced Search</a><span></span></span></td></tr></tbody></table></form></div><a class="mainmenu" href="/memberlist"><img id="i_icon_mini_members" border="0" hspace="0" title="Zoznam užívateľov"></a><a class="mainmenu" href="/groups"><img id="i_icon_mini_groups" src="http://illiweb.com/fa/empty.gif" border="0" hspace="0" alt="Užívateľské skupiny" title="Užívateľské skupiny"></a><a class="mainmenu" href="/profile?mode=editprofile"><img id="i_icon_mini_profile" border="0" hspace="0" title="Nastavenia"></a><a class="mainmenu" href="/privmsg?folder=inbox" rel="nofollow"><img id="i_icon_mini_new_message" border="0" hspace="0" title="Súkromné správy (1)"></a><a class="mainmenu" href="/login?logout=1&amp;tid=d4a1a6007c0149babbef58a2d49edda9&amp;key=71bdb7" rel="nofollow" id="logout"><img id="i_icon_mini_logout" border="0" hspace="0" title="Odhlásenie [ {USERNAME} ]"></a></td></tr></tbody></table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                    <td align="left" class="row1">
                        <div id="fa_ticker_container">
                          <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                          </ul>
                        </div>
                    </td>
                  </tr>
              </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                    <td align="left" class="row1">
                        <div id="fa_ticker_container">
                          <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                <!-- BEGIN ticker_row -->
                                <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                <!-- END ticker_row -->
                              </div>
                          </div>
                        </div>
                    </td>
                  </tr>
              </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
              <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                    <tbody>
                        <tr>
                          <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                <!-- BEGIN giefmod_index1 -->
                                {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                <!-- END giefmod_index1 -->
                              </div>
                          </td>
                          <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                          </td>
                        </tr>
                    </tbody>
                  </table>
              </div>
            </div>
        </td>
      </tr>
  </table>
</body>
</html>
<!-- END html_validation -->

MrMind






Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 19th 2014, 10:39 pm

MEMBERS and LOG IN/LOG OUT are good...others looks like this:
http://clip2net.com/s/iLqDyM

(btw messages should be normal colour, red only if you get new PM)

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 21st 2014, 12:09 pm

Yes i forgot to add the normal button and i only added the new message button. This should do it. About the text that appears i am still working on it because it confuses me. It shouldn;t appear.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
  <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <meta http-equiv="content-style-type" content="text/css" />
  <!-- BEGIN switch_compat_meta -->
  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
  <!-- END switch_compat_meta -->
  <!-- BEGIN switch_canonical_url -->
  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
  <!-- END switch_canonical_url -->
  {META_FAVICO}
  {META}
  {META_FB_LIKE}
  <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
  {T_HEAD_STYLESHEET}
  {CSS}
  <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
  <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
  <script src="{JQUERY_PATH}" type="text/javascript"></script>
  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

  <!-- BEGIN switch_fb_login -->
  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
  <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
  <!-- END switch_fb_login -->

  <!-- BEGIN switch_ticker -->
  <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
  <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
  <!-- END switch_ticker -->

  <!-- BEGIN switch_ticker_new -->
  <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
  <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
        case 'top' :
            slid_vert = true;
            break;

        case 'left':
            break;

        case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

        case 'right':
            auto_dir = 'prev';
            break;

        default:
            slid_vert = true;
      }

      $(document).ready(function() {
        var w_cont = $('#fa_ticker_container').width();

        if (w_cont > 0)
        {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
              if ($(this).height() > height_max)
              {
                  height_max = $(this).height();
              }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
              if ($(this).width() > width_item)
              {
              var ratio      = $(this).width() / width_item;
              var new_height = Math.round($(this).height() / ratio);
              $(this).height(new_height).width(width_item);
              }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
              wrap: 'circular',
              auto: {switch_ticker.STOP_TIME},
              auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
        }
        else
        {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
        }
      });
  //]]>
  </script>
  <!-- END switch_ticker_new -->

  <script type="text/javascript">//<![CDATA[
  $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
        pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
        if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
        report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
        if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
        $(document).ready(function() {           
            Ticker.start({
              height : {switch_ticker.HEIGHT},
              spacing : {switch_ticker.SPACING},
              speed : {switch_ticker.SPEED},
              direction : '{switch_ticker.DIRECTION}',
              pause : {switch_ticker.STOP_TIME}
            });
        });
      <!-- END switch_ticker -->
  });

  <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
  <!-- END switch_login_popup -->

  <!-- BEGIN switch_login_popup -->
  $(document).ready( function() {
      $(window).resize(function() {
        var windowWidth = document.documentElement.clientWidth;
        var popupWidth = $("#login_popup").width();
        var mypopup = $("#login_popup");

        $("#login_popup").css({
        "left": windowWidth/2 - popupWidth/2
            });
      });
  });
  <!-- END switch_login_popup -->
  //]]>
  </script>
  {GREETING_POPUP}
  <!-- BEGIN switch_ticker_new -->
  <style>
  .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
  }

  .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
  }

  .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
  }
  </style>
  <!-- END switch_ticker_new -->
  {HOSTING_JS}
  <!-- BEGIN google_analytics_code -->
  <script type="text/javascript">
  //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
  _gaq.push(['_trackPageLoadTime']);

  <!-- BEGIN google_analytics_code_bis -->
  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
  _gaq.push(['b._trackPageview']);
  <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  //]]>
  </script>
  <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  <!-- BEGIN hitskin_preview -->
  <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
        <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
        </p>
      </div>
  </div>
  <!-- END hitskin_preview -->

  <!-- BEGIN switch_login_popup -->
  <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
        <tr height="25">
            <td class="catLeft">
              <span class="genmed module-title">{SITENAME}</span>
            </td>
        </tr>
        <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
              <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                    <input type="submit" class="mainoption" value="{L_LOGIN}" />
                    <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                    <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
              </div>
              <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
        </tr>
      </table>
  </div>
  <!-- END switch_login_popup -->

  <a name="top"></a>
  {JAVASCRIPT}

  <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
        <td class="bodyline">
            <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>

            <table cellspacing="0" cellpadding="0" border="0" align="center"><tbody><tr><td align="center" nowrap="nowrap"><a class="mainmenu" href="/forum"><img id="i_icon_mini_index" border="0" hspace="0" title="Domov"></a><a class="mainmenu" href="/"><img id="i_icon_mini_portal" border="0" hspace="0" title="Portál"></a><a class="mainmenu" href="/calendar"><img id="i_icon_mini_calendar" src="http://illiweb.com/fa/empty.gif" border="0" hspace="0" alt="Calendar" title="Calendar"></a><a class="mainmenu" href="/faq"><img id="i_icon_mini_faq" border="0" hspace="0" title="FAQ"></a><a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;"><img id="i_icon_mini_search" border="0" hspace="0" title="Hľadať"></a><script type="text/javascript">//<![CDATA[
var url_search = '/search';
insert_search_menu();//]]>
</script><div id="search_menu" style="display:none;position:absolute;z-index:10000"><form action="/search" method="get"><input type="hidden" name="mode" value="searchbox"><table class="forumline" cellpadding="3" cellspacing="0" border="0"><tbody><tr><th class="thHead">Hľadaný reťazec</th></tr><tr><td class="row2" align="center"><input type="text" class="post" name="search_keywords" size="24" style="height:20px; margin-top:6px; margin-right:3px;"> <input type="submit" class="button" value="Go"></td></tr><tr><td class="row2" align="center" nowrap="nowrap"><span class="genmed">&nbsp;Display results as :&nbsp; <input id="rposts" type="radio" name="show_results" value="posts"><label for="rposts">&nbsp;Príspevky</label> <input id="rtopics" type="radio" name="show_results" value="topics" checked="checked"><label for="rtopics">&nbsp;Témy</label>&nbsp;</span></td></tr><tr><td class="row2" align="center"><span class="genmed"><hr><a href="/search" rel="nofollow" title="Advanced Search"><img src="http://illiweb.com/fa/empty.gif" width="12" height="13" border="0" hspace="3" alt="Advanced Search">&nbsp;Advanced Search</a><span></span></span></td></tr></tbody></table></form></div><a class="mainmenu" href="/memberlist"><img id="i_icon_mini_members" border="0" hspace="0" title="Zoznam užívateľov"></a><a class="mainmenu" href="/groups"><img id="i_icon_mini_groups" src="http://illiweb.com/fa/empty.gif" border="0" hspace="0" alt="Užívateľské skupiny" title="Užívateľské skupiny"></a><a class="mainmenu" href="/profile?mode=editprofile"><img id="i_icon_mini_profile" border="0" hspace="0" title="Nastavenia"></a><a class="mainmenu" href="/privmsg?folder=inbox" rel="nofollow"><img id="i_icon_mini_new_message" border="0" hspace="0" title="Súkromné správy (1)"></a><a class="mainmenu" href="/privmsg?folder=inbox" rel="nofollow"><img id="i_icon_mini_message" border="0" hspace="0" title="Súkromné správy (1)"></a><a class="mainmenu" href="/login?logout=1&amp;tid=d4a1a6007c0149babbef58a2d49edda9&amp;key=71bdb7" rel="nofollow" id="logout"><img id="i_icon_mini_logout" border="0" hspace="0" title="Odhlásenie [ {USERNAME} ]"></a></td></tr></tbody></table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                    <td align="left" class="row1">
                        <div id="fa_ticker_container">
                          <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                          </ul>
                        </div>
                    </td>
                  </tr>
              </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                    <td align="left" class="row1">
                        <div id="fa_ticker_container">
                          <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                <!-- BEGIN ticker_row -->
                                <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                <!-- END ticker_row -->
                              </div>
                          </div>
                        </div>
                    </td>
                  </tr>
              </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
              <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                    <tbody>
                        <tr>
                          <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                <!-- BEGIN giefmod_index1 -->
                                {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                <!-- END giefmod_index1 -->
                              </div>
                          </td>
                          <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                          </td>
                        </tr>
                    </tbody>
                  </table>
              </div>
            </div>
        </td>
      </tr>
  </table>
</body>
</html>
<!-- END html_validation -->






Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 21st 2014, 4:35 pm

now there are both, red and brown buttons Smile I can just delete it, but idk where it exactly is =D ...u can see, I have published...

its ok, reply if you are done and I will try it Smile) thank you for your time

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 21st 2014, 7:15 pm

For now please use this code as your template and as soon as i figure out how to show the other button of messages.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
  <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <meta http-equiv="content-style-type" content="text/css" />
  <!-- BEGIN switch_compat_meta -->
  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
  <!-- END switch_compat_meta -->
  <!-- BEGIN switch_canonical_url -->
  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
  <!-- END switch_canonical_url -->
  {META_FAVICO}
  {META}
  {META_FB_LIKE}
  <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
  {T_HEAD_STYLESHEET}
  {CSS}
  <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
  <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
  <script src="{JQUERY_PATH}" type="text/javascript"></script>
  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

  <!-- BEGIN switch_fb_login -->
  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
  <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
  <!-- END switch_fb_login -->

  <!-- BEGIN switch_ticker -->
  <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
  <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
  <!-- END switch_ticker -->

  <!-- BEGIN switch_ticker_new -->
  <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
  <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
        case 'top' :
            slid_vert = true;
            break;

        case 'left':
            break;

        case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

        case 'right':
            auto_dir = 'prev';
            break;

        default:
            slid_vert = true;
      }

      $(document).ready(function() {
        var w_cont = $('#fa_ticker_container').width();

        if (w_cont > 0)
        {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
              if ($(this).height() > height_max)
              {
                  height_max = $(this).height();
              }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
              if ($(this).width() > width_item)
              {
              var ratio      = $(this).width() / width_item;
              var new_height = Math.round($(this).height() / ratio);
              $(this).height(new_height).width(width_item);
              }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
              wrap: 'circular',
              auto: {switch_ticker.STOP_TIME},
              auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
        }
        else
        {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
        }
      });
  //]]>
  </script>
  <!-- END switch_ticker_new -->

  <script type="text/javascript">//<![CDATA[
  $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
        pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
        if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
        report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
        if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
        $(document).ready(function() {           
            Ticker.start({
              height : {switch_ticker.HEIGHT},
              spacing : {switch_ticker.SPACING},
              speed : {switch_ticker.SPEED},
              direction : '{switch_ticker.DIRECTION}',
              pause : {switch_ticker.STOP_TIME}
            });
        });
      <!-- END switch_ticker -->
  });

  <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
  <!-- END switch_login_popup -->

  <!-- BEGIN switch_login_popup -->
  $(document).ready( function() {
      $(window).resize(function() {
        var windowWidth = document.documentElement.clientWidth;
        var popupWidth = $("#login_popup").width();
        var mypopup = $("#login_popup");

        $("#login_popup").css({
        "left": windowWidth/2 - popupWidth/2
            });
      });
  });
  <!-- END switch_login_popup -->
  //]]>
  </script>
  {GREETING_POPUP}
  <!-- BEGIN switch_ticker_new -->
  <style>
  .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
  }

  .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
  }

  .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
  }
  </style>
  <!-- END switch_ticker_new -->
  {HOSTING_JS}
  <!-- BEGIN google_analytics_code -->
  <script type="text/javascript">
  //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
  _gaq.push(['_trackPageLoadTime']);

  <!-- BEGIN google_analytics_code_bis -->
  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
  _gaq.push(['b._trackPageview']);
  <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  //]]>
  </script>
  <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  <!-- BEGIN hitskin_preview -->
  <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
        <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
        </p>
      </div>
  </div>
  <!-- END hitskin_preview -->

  <!-- BEGIN switch_login_popup -->
  <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
        <tr height="25">
            <td class="catLeft">
              <span class="genmed module-title">{SITENAME}</span>
            </td>
        </tr>
        <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
              <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                    <input type="submit" class="mainoption" value="{L_LOGIN}" />
                    <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                    <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
              </div>
              <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
        </tr>
      </table>
  </div>
  <!-- END switch_login_popup -->

  <a name="top"></a>
  {JAVASCRIPT}

  <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
        <td class="bodyline">
            <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>

            <table cellspacing="0" cellpadding="0" border="0" align="center"><tbody><tr><td align="center" nowrap="nowrap"><a class="mainmenu" href="/forum"><img id="i_icon_mini_index" border="0" hspace="0" title="Domov"></a><a class="mainmenu" href="/"><img id="i_icon_mini_portal" border="0" hspace="0" title="Portál"></a><a class="mainmenu" href="/calendar"><img id="i_icon_mini_calendar" src="http://illiweb.com/fa/empty.gif" border="0" hspace="0" alt="Calendar" title="Calendar"></a><a class="mainmenu" href="/faq"><img id="i_icon_mini_faq" border="0" hspace="0" title="FAQ"></a><a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;"><img id="i_icon_mini_search" border="0" hspace="0" title="Hľadať"></a><script type="text/javascript">//<![CDATA[
var url_search = '/search';
insert_search_menu();//]]>
</script><div id="search_menu" style="display:none;position:absolute;z-index:10000"><form action="/search" method="get"><input type="hidden" name="mode" value="searchbox"><table class="forumline" cellpadding="3" cellspacing="0" border="0"><tbody><tr><th class="thHead">Hľadaný reťazec</th></tr><tr><td class="row2" align="center"><input type="text" class="post" name="search_keywords" size="24" style="height:20px; margin-top:6px; margin-right:3px;"> <input type="submit" class="button" value="Go"></td></tr><tr><td class="row2" align="center" nowrap="nowrap"><span class="genmed">&nbsp;Display results as :&nbsp; <input id="rposts" type="radio" name="show_results" value="posts"><label for="rposts">&nbsp;Príspevky</label> <input id="rtopics" type="radio" name="show_results" value="topics" checked="checked"><label for="rtopics">&nbsp;Témy</label>&nbsp;</span></td></tr><tr><td class="row2" align="center"><span class="genmed"><hr><a href="/search" rel="nofollow" title="Advanced Search"><img src="http://illiweb.com/fa/empty.gif" width="12" height="13" border="0" hspace="3" alt="Advanced Search">&nbsp;Advanced Search</a><span></span></span></td></tr></tbody></table></form></div><a class="mainmenu" href="/memberlist"><img id="i_icon_mini_members" border="0" hspace="0" title="Zoznam užívateľov"></a><a class="mainmenu" href="/groups"><img id="i_icon_mini_groups" src="http://illiweb.com/fa/empty.gif" border="0" hspace="0" alt="Užívateľské skupiny" title="Užívateľské skupiny"></a><a class="mainmenu" href="/profile?mode=efitprofile"><img id="i_icon_mini_profile" border="0" hspace="0" title="Nastavenia"></a><a class="mainmenu" href="/privmsg?folder=inbox" rel="nofollow"><img id="i_icon_mini_new_message" border="0" hspace="0" title="Súkromné správy (1)"></a><a class="mainmenu" href="/login?logout=1&amp;tid=d4a1a6007c0149babbef58a2d49edda9&amp;key=71bdb7" rel="nofollow" id="logout"><img id="i_icon_mini_logout" border="0" hspace="0" title="Odhlásenie [ {USERNAME} ]"></a></td></tr></tbody></table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                    <td align="left" class="row1">
                        <div id="fa_ticker_container">
                          <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                          </ul>
                        </div>
                    </td>
                  </tr>
              </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                    <td align="left" class="row1">
                        <div id="fa_ticker_container">
                          <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                <!-- BEGIN ticker_row -->
                                <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                <!-- END ticker_row -->
                              </div>
                          </div>
                        </div>
                    </td>
                  </tr>
              </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
              <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                    <tbody>
                        <tr>
                          <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                <!-- BEGIN giefmod_index1 -->
                                {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                <!-- END giefmod_index1 -->
                              </div>
                          </td>
                          <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                          </td>
                        </tr>
                    </tbody>
                  </table>
              </div>
            </div>
        </td>
      </tr>
  </table>
</body>
</html>
<!-- END html_validation -->






Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 21st 2014, 9:09 pm

done, thanks Smile good luck to figure it out

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 23rd 2014, 11:31 pm

This is very difficult. I have been searching for days now and i cannot find why the text is appearing over the button.. Sorry for keeping you wait!

If anyone else who is reading this knows why is there the text over the buttons please helps us..


Edit: Please add this as your template because i forgot to close some codes!  Very Happy 
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
  <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <meta http-equiv="content-style-type" content="text/css" />
  <!-- BEGIN switch_compat_meta -->
  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
  <!-- END switch_compat_meta -->
  <!-- BEGIN switch_canonical_url -->
  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
  <!-- END switch_canonical_url -->
  {META_FAVICO}
  {META}
  {META_FB_LIKE}
  <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
  {T_HEAD_STYLESHEET}
  {CSS}
  <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
  <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
  <script src="{JQUERY_PATH}" type="text/javascript"></script>
  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

  <!-- BEGIN switch_fb_login -->
  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
  <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
  <!-- END switch_fb_login -->

  <!-- BEGIN switch_ticker -->
  <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
  <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
  <!-- END switch_ticker -->

  <!-- BEGIN switch_ticker_new -->
  <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
  <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
        case 'top' :
            slid_vert = true;
            break;

        case 'left':
            break;

        case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

        case 'right':
            auto_dir = 'prev';
            break;

        default:
            slid_vert = true;
      }

      $(document).ready(function() {
        var w_cont = $('#fa_ticker_container').width();

        if (w_cont > 0)
        {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
              if ($(this).height() > height_max)
              {
                  height_max = $(this).height();
              }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
              if ($(this).width() > width_item)
              {
              var ratio      = $(this).width() / width_item;
              var new_height = Math.round($(this).height() / ratio);
              $(this).height(new_height).width(width_item);
              }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
              wrap: 'circular',
              auto: {switch_ticker.STOP_TIME},
              auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
        }
        else
        {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
        }
      });
  //]]>
  </script>
  <!-- END switch_ticker_new -->

  <script type="text/javascript">//<![CDATA[
  $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
        pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
        if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
        report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
        if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
        $(document).ready(function() {            
            Ticker.start({
              height : {switch_ticker.HEIGHT},
              spacing : {switch_ticker.SPACING},
              speed : {switch_ticker.SPEED},
              direction : '{switch_ticker.DIRECTION}',
              pause : {switch_ticker.STOP_TIME}
            });
        });
      <!-- END switch_ticker -->
  });

  <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
  <!-- END switch_login_popup -->

  <!-- BEGIN switch_login_popup -->
  $(document).ready( function() {
      $(window).resize(function() {
        var windowWidth = document.documentElement.clientWidth;
        var popupWidth = $("#login_popup").width();
        var mypopup = $("#login_popup");

        $("#login_popup").css({
        "left": windowWidth/2 - popupWidth/2
            });
      });
  });
  <!-- END switch_login_popup -->
  //]]>
  </script>
  {GREETING_POPUP}
  <!-- BEGIN switch_ticker_new -->
  <style>
  .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
  }

  .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
  }

  .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
  }
  </style>
  <!-- END switch_ticker_new -->
  {HOSTING_JS}
  <!-- BEGIN google_analytics_code -->
  <script type="text/javascript">
  //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
  _gaq.push(['_trackPageLoadTime']);

  <!-- BEGIN google_analytics_code_bis -->
  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
  _gaq.push(['b._trackPageview']);
  <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  //]]>
  </script>
  <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  <!-- BEGIN hitskin_preview -->
  <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
        <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
        </p>
      </div>
  </div>
  <!-- END hitskin_preview -->

  <!-- BEGIN switch_login_popup -->
  <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
        <tr height="25">
            <td class="catLeft">
              <span class="genmed module-title">{SITENAME}</span>
            </td>
        </tr>
        <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
              <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                    <input type="submit" class="mainoption" value="{L_LOGIN}" />
                    <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                    <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
              </div>
              <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
        </tr>
      </table>
  </div>
  <!-- END switch_login_popup -->

  <a name="top"></a>
  {JAVASCRIPT}

  <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
        <td class="bodyline">
            <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>

            <table cellspacing="0" cellpadding="0" border="0" align="center">
              <tbody>
                <tr>
                  <td align="center" nowrap="nowrap">
                    <a class="mainmenu" href="/forum">
                      <img id="i_icon_mini_index" border="0" hspace="0" title="Domov" />
                    </a>
                    <a class="mainmenu" href="/">
                      <img id="i_icon_mini_portal" border="0" hspace="0" title="Portál" />
                    </a>
                    <a class="mainmenu" href="/calendar">
                      <img id="i_icon_mini_calendar" src="http://illiweb.com/fa/empty.gif" border="0" hspace="0" alt="Calendar" title="Calendar" />
                    </a>
                    <a class="mainmenu" href="/faq">
                      <img id="i_icon_mini_faq" border="0" hspace="0" title="FAQ" />
                    </a>
                    <a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">
                      <img id="i_icon_mini_search" border="0" hspace="0" title="Hľadať" />
                    </a>
                    <script type="text/javascript">//<![CDATA[
var url_search = '/search';
insert_search_menu();//]]>
</script>
                  <div id="search_menu" style="display:none;position:absolute;z-index:10000">
                    <form action="/search" method="get">
                      <input type="hidden" name="mode" value="searchbox" />
                        <table class="forumline" cellpadding="3" cellspacing="0" border="0">
                          <tbody>
                            <tr>
                              <th class="thHead">Hľadaný reťazec</th>
                            </tr>
                            <tr>
                              <td class="row2" align="center">
                                <input type="text" class="post" name="search_keywords" size="24" style="height:20px; margin-top:6px; margin-right:3px;" />
                                <input type="submit" class="button" value="Go" />
                                </td>
                              </tr>
                              <tr>
                                <td class="row2" align="center" nowrap="nowrap">
                                  <span class="genmed">&nbsp;Display results as :&nbsp;
                                    <input id="rposts" type="radio" name="show_results" value="posts" />
                                    <label for="rposts">&nbsp;Príspevky</label>
                                    <input id="rtopics" type="radio" name="show_results" value="topics" checked="checked" />
                                    <label for="rtopics">&nbsp;Témy</label>&nbsp;
                                  </span>
                                </td>
                            </tr>
                            <tr>
                              <td class="row2" align="center">
                                <span class="genmed">
                                  <hr />
                                    <a href="/search" rel="nofollow" title="Advanced Search">
                                      <img src="http://illiweb.com/fa/empty.gif" width="12" height="13" border="0" hspace="3" alt="Advanced Search" />&nbsp;Advanced Search
                                    </a>
                                 </span>
                                  </td>
                            </tr>
                                 </tbody>
                      </table>
                    </form>
                  </div>
                  <a class="mainmenu" href="/memberlist">
                    <img id="i_icon_mini_members" border="0" hspace="0" title="Zoznam užívateľov" />
                  </a>
                  <a class="mainmenu" href="/groups">
                    <img id="i_icon_mini_groups" src="http://illiweb.com/fa/empty.gif" border="0" hspace="0" alt="Užívateľské skupiny" title="Užívateľské skupiny" />
                  </a>
                  <a class="mainmenu" href="/profile?mode=efitprofile">
                    <img id="i_icon_mini_profile" border="0" hspace="0" title="Nastavenia" />
                  </a>
                  <a class="mainmenu" href="/privmsg?folder=inbox" rel="nofollow">
                    <img id="i_icon_mini_new_message" border="0" hspace="0" title="Súkromné správy (1)" />
                  </a>
                  <a class="mainmenu" href="/login?logout=1&amp;tid=d4a1a6007c0149babbef58a2d49edda9&amp;key=71bdb7" rel="nofollow" id="logout">
                    <img id="i_icon_mini_logout" border="0" hspace="0" title="Odhlásenie [ {USERNAME} ]" />
                  </a>
                  </td>
                </tr>
              </tbody>
          </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                    <td align="left" class="row1">
                        <div id="fa_ticker_container">
                          <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                          </ul>
                        </div>
                    </td>
                  </tr>
              </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                    <td align="left" class="row1">
                        <div id="fa_ticker_container">
                          <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                <!-- BEGIN ticker_row -->
                                <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                <!-- END ticker_row -->
                              </div>
                          </div>
                        </div>
                    </td>
                  </tr>
              </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
              <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                    <tbody>
                        <tr>
                          <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                <!-- BEGIN giefmod_index1 -->
                                {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                <!-- END giefmod_index1 -->
                              </div>
                          </td>
                          <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                          </td>
                        </tr>
                    </tbody>
                  </table>
              </div>
            </div>
        </td>
      </tr>
  </table>
</body>
</html>
<!-- END html_validation -->


Edit 2 (00:51:50): Code updated



MrMind

Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 24th 2014, 9:56 am

ok, thank you for your time Smile I would like to see help from someone who knows it, too Smile

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Luffy on August 24th 2014, 11:09 pm

Quick question. Have you updated your template with the latest one i sent?
Note that i have updated the last post i sent!






Luffy
Manager
Manager

Male Posts : 4244
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 24th 2014, 11:31 pm

yeah...I saw it...but to be sure I checked and updated it again about a minute ago. I dont see any changes

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 26th 2014, 7:06 pm

Nobody? Sad
(bump)

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by DustyBones on August 26th 2014, 7:22 pm

This code works, I used it on my forum..
Just paste this code into your CSS. Put your image url's in the space where it calls for the image between the parentheses (leave the parentheses).
Make sure all navbar images are removed from Administration Panel/Display/Pictures & Colors/Pics management/Advanced Mode/General Explore (just delete icon url address's on right) and be sure to click Save.

Code:
   #i_icon_mini_index{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_index:hover{background:url(HOVER IMAGE URL HERE) no-repeat 0 0;}

    #i_icon_mini_faq{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_faq:hover{background:url(HOVER IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_search{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_search:hover{background:url(HOVER IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_members{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_members:hover{background:url(HOVER IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_groups{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_groups:hover{background:url(HOVER IMAGE URL HERE) no-repeat  0 0px;}

    #i_icon_mini_profile{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_profile:hover{background:url(HOVER IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_message{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_message:hover{background:url(HOVER IMAGE URL HERE) no-repeat 0 0;}

    #i_icon_mini_new_message{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_new_message:hover{background:url(HOVER IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_logout{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_logout:hover{background:url(HOVER IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_register{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_register:hover{background:url(HOVER IMAGE URL HERE) no-repeat  0 0;}

    #i_icon_mini_login{width:80px;height:25px;background:url(REGULAR IMAGE URL HERE) no-repeat 0 0;}
    #i_icon_mini_login:hover{background:url(HOVER IMAGE URL HERE) no-repeat  0 0;}


Last edited by DustyBones on August 26th 2014, 7:42 pm; edited 1 time in total

DustyBones
Active Poster

Male Posts : 1227
Reputation : 517
Language : English
Location : Washington, USA

http://raps-graphics.forumotion.com/

Back to top Go down

Solved Re: Animated menu bar

Post by Ange Tuteur on August 26th 2014, 7:42 pm

You beat me to it Dusty Razz

Still, I'll post the CSS I wrote up :
Code:
/* Forum */
#i_icon_mini_index { background:url(http://i39.servimg.com/u/f39/16/33/15/26/forum_11.png) }
#i_icon_mini_index:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/forum10.png) }

/* Portal */
#i_icon_mini_portal { background:url(http://i39.servimg.com/u/f39/16/33/15/26/portal10.png) }
#i_icon_mini_portal:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/portal11.png) }

/* FAQ */
#i_icon_mini_faq { background:url(http://i39.servimg.com/u/f39/16/33/15/26/faq_210.png) }
#i_icon_mini_faq:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/faq10.png) }

/* Search */
#i_icon_mini_search { background:url(http://i39.servimg.com/u/f39/16/33/15/26/search10.png) }
#i_icon_mini_search:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/search10.png) }

/* Memberlist */
#i_icon_mini_members { background:url(http://i39.servimg.com/u/f39/16/33/15/26/member11.png) }
#i_icon_mini_members:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/member10.png) }

/* Profile */
#i_icon_mini_profile { background:url(http://i39.servimg.com/u/f39/16/33/15/26/profil10.png) }
#i_icon_mini_profile:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/profil10.png) }

/* Messages */
#i_icon_mini_message { background:url(http://i39.servimg.com/u/f39/16/33/15/26/messag10.png) }
#i_icon_mini_message:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/messag12.png) }

/* Messages new */
#i_icon_mini_new_message { background:url(http://i39.servimg.com/u/f39/16/33/15/26/messag11.png) }
#i_icon_mini_new_message:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/messag11.png) }

/* Register */
#i_icon_mini_register { background:url(http://i39.servimg.com/u/f39/16/33/15/26/regist10.png) }
#i_icon_mini_register:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/regist10.png) }

/* Login */
#i_icon_mini_login { background:url(http://i39.servimg.com/u/f39/16/33/15/26/log_in10.png) }
#i_icon_mini_login:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/log_in10.png) }

/* Logout */
#i_icon_mini_logout { background:url(http://i39.servimg.com/u/f39/16/33/15/26/log_ou10.png) }
#i_icon_mini_logout:hover { background:url(http://i39.servimg.com/u/f39/18/00/61/07/log_ou10.png) }

#i_icon_mini_index, #i_icon_mini_portal, #i_icon_mini_faq, #i_icon_mini_search, #i_icon_mini_members, #i_icon_mini_profile, #i_icon_mini_message, #i_icon_mini_new_message, #i_icon_mini_register, #i_icon_mini_login, #i_icon_mini_logout {
  margin:0 1px;
  width:80px;
  height:25px;
  background-repeat:no-repeat;
}

Since all his button sizes were equal I placed it into one rule. It can be overridden with the !important keyword though.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Animated menu bar

Post by Crywider on August 26th 2014, 8:20 pm

Very nice! Smile Thanks to all who replied Smile Auge, Dusty and MrMind Smile) works perfect, thanks again

Crywider
Forumember

Male Posts : 34
Reputation : 0
Language : Slovak, English, Czech, Polish
Location : Bardejov - SLOVAKIA

Back to top Go down

Solved Re: Animated menu bar

Post by SLGray on August 26th 2014, 8:26 pm

Topic solved and archived


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


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
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