Personalizar menu de interaçao

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Personalizar menu de interaçao

Mensagem por PauloVinicios1755 02.01.25 21:15

Detalhes da questão


Endereço do fórum: https://redehopex.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá gostaria de saber como posso está deixando meu forum com esse menu
Personalizar menu de interaçao Kdkwdk10
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 04.01.25 16:28

Up48hrs
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 06.01.25 3:53

Up48hrs
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 08.01.25 10:37

Up 48Hrs, Achei esse tópico "Questão Resolvida" que é igual ao resultado que preciso porem executei todos os passos mas n obtive sucesso. adiantando vou deixar o código css que  usei nesse tópico e o overall header:

overall header:
Código:
        <!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>
          <!-- BEGIN switch_recent_jquery -->
          <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
          <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
          <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
          <!-- END switch_recent_jquery -->
        <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
          {RICH_SNIPPET_GOOGLE}
     
        <!-- BEGIN switch_fb_login -->
        <script src="https://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="{JQUERY_DIR}ticker/ticker.css" />
        <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
        <!-- END switch_ticker -->
     
        <!-- BEGIN switch_ticker_new -->
        <script src="{JQUERY_DIR}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() {
     
        $('#fa_ticker_content').css('display','block');
     
        var width_max = $('ul#fa_ticker_content').width();
        var width_item = Math.floor(width_max / {switch_ticker.SIZE});
     
        if (width_max > 0)
        {
        $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).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);
        }
        });
     
        if (slid_vert)
        {
        var height_max = h_perso;
     
        $('ul#fa_ticker_content li').each( function () {
        if ($(this).height() > height_max)
        {
        height_max = $(this).height();
        }
        } );
     
        $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
        $('ul#fa_ticker_content li').height(height_max);
        }
     
     
        $('#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;
     
                    $(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}
     
        <style type="text/css">
        #page-footer, div.navbar, div.navbar ul.linklist {
        display: block !important;
        }
     
        ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
        display: inline !important;
        }
     
        <!-- BEGIN switch_ticker_new -->
        .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;
        }
        <!-- END switch_ticker_new -->
        </style>
     
        {HOSTING_JS}
     
        <!-- BEGIN google_analytics_code -->
        <script type="text/javascript">
        //<![CDATA[
                      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
     
                      ga('create', '{G_ANALYTICS_ID}', 'auto');
                      <!-- BEGIN google_analytics_code_bis -->
                      ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
                      <!-- END google_analytics_code_bis -->
                      ga('send', 'pageview');
                      <!-- BEGIN google_analytics_code_bis -->
                      ga('bis.send', 'pageview');
                      <!-- END google_analytics_code_bis -->
                  ga('set', 'anonymizeIp', true);
        <!-- BEGIN google_analytics_code_bis -->
        ga('bis.set', 'anonymizeIp', true);
        <!-- END google_analytics_code_bis -->
                  //]]>
        </script>
        <!-- END google_analytics_code -->
     
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
        <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
        <style>
        #page-header .menu {
            background-color: #333333d6;
            border-radius: 5px 5px 0 0;
            box-shadow: 0 1px 5px rgba(0,0,0,0.3);
            height: 60px;
            line-height: 38px;
            z-index: 999;
            margin: 0 auto;
            max-width: 1400px;
            padding: 24px 36px;
            width: 98%;
            text-align:center;
        }
        ul.menu li a {
            color: white;
            font-size: 12px;
            padding: 6px;
        }
     
        ul.menu li {
            display: inline-block;
            text-align: center;
        }
  ul.menu img {
            height: 19px !important;
        }
        </style>
        </head>
     
        <body id="modernbb">
        <!-- BEGIN hitskin_preview -->
        <div id="hitskin_preview" style="display: block;">
        <h1><img src="{hitskin_preview.PATH_IMG_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="https://{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" style="z-index: 10000 !important;">
        <div class="h3">{SITENAME}</div>
                  <div id="login_popup_message">
                      {LOGIN_POPUP_MSG}
                  </div>
        <div id="login_popup_buttons">
        <form action="{S_LOGIN_ACTION}" method="get">
        <input type="submit" class="button1" value="{L_LOGIN}" />
        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
        <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
        </form>
        </div>
        </div>
        <!-- END switch_login_popup -->
     
        <a id="top" name="top" accesskey="t"></a>
        {JAVASCRIPT}
     
        <div id="page-header">
        <div class="headerbar">
        <div id="headerbar-top">
        <div class="wrap">
        <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
     
        <ul style="display:none" class="navbar navlinks{NAVBAR_BORDERLESS}">
        <li></li>
        </ul>
        </div>
        </div>
     
        <div class="wrap">
        <div id="site-desc">
        <!-- BEGIN switch_h1 -->
        <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
        <!-- END switch_h1 -->
        <!-- BEGIN switch_desc -->
        <p>{switch_desc.SITE_DESCRIPTION}</p>
        <!-- END switch_desc -->
        </div>
        </div>
        </div>
     
        <!-- BEGIN switch_ticker_new -->
        <div id="fa_ticker_blockD" style="margin-top:4px;">
        <div class="module">
        <div class="inner">
        <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>
        </div>
        </div>
        </div>
        <!-- END switch_ticker_new -->
        <ul class="menu"><li>{GENERATED_NAV_BAR}</li></ul>
        </div>
     
        <div class="conteneur_minwidth_IE">
        <div class="conteneur_layout_IE">
        <div class="conteneur_container_IE">
        <div id="wrap">
        <div id="page-body">
     
        <!-- BEGIN switch_ticker -->
        <div id="fa_ticker_block" style="margin-top:4px;">
        <div class="module">
        <div class="inner">
        <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>
        </div>
        </div>
        </div>
        <!-- END switch_ticker -->
     
        <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
        <div id="outer-wrapper">
        <div id="wrapper">
        <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>
     
        <div id="container">
        <div id="content-main">
        <div id="main">
        <div id="main-content">

Codigo css:
Código:
/* MENU PERSO */
#headerbar-top a.mainmenu:before {
    font-family: FontAwesome;
    display: inline !important;
    padding: 4px !important;
    margin-right: -20px !important;
    border-radius: 10px !important;
    -webkit-box-shadow: inset 2px 2px 13px 4px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: inset 2px 2px 13px 4px rgba(0, 0, 0, 0.43);
    box-shadow: inset 2px 2px 13px 4px rgba(0, 0, 0, 0.43);
}
 
a.mainmenu[href="/forum"]:before {
    content: '\f015';
}
 
a.mainmenu[href="/portal"]:before {
    content: '\f1ea';
}
 
a.mainmenu[href="/memberlist"]:before {
    content: '\f1ea';
}
 
a.mainmenu[href="/memberlist"]:before {
    content: '\f0c0';
}
 
a.mainmenu[href*="/profile?mode"]:before {
    content: '\f007';
}
 
a.mainmenu[href*="/privmsg"]:before {
    content: '\f003';
}
 
a.mainmenu[href*="/login?logout"]:before {
    content: '\f08b';
}
 
.navbar li img {
    opacity: 0;
}
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 12.01.25 15:54

up 48 hrs para ajudar a facilitar achei o mesmo menu nesse fórum link
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por Harleen 13.01.25 0:42

Os ítens e cores do menu são os mesmo do print?

Por Exemplo:
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1786
Pontos : 2385

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 13.01.25 1:59

creio que não, se for que seja na cor laranja um pouco escuro  @Harleen


Última edição por PauloVinicios1755 em 13.01.25 2:00, editado 1 vez(es) (Motivo da edição : menção)
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por Harleen 13.01.25 2:48

Troque os códigos por esses

Overall_header
Código:
<!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 name="viewport" content="width=device-width, initial-scale=1">
   <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="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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>
   <!-- BEGIN switch_recent_jquery -->
   <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
   <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
   <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
   <!-- END switch_recent_jquery -->
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
   {RICH_SNIPPET_GOOGLE}

   <!-- BEGIN switch_fb_login -->
   <script src="https://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="{JQUERY_DIR}ticker/ticker.css"/>
   <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JQUERY_DIR}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 () {

         $('#fa_ticker_content').css('display', 'block');

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0) {
            $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).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);
               }
            });

            if (slid_vert) {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each(function () {
                  if ($(this).height() > height_max) {
                     height_max = $(this).height();
                  }
               });

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
               $('ul#fa_ticker_content li').height(height_max);
            }


            $('#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 -->
         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 -->

         document.onclick = function(e){
            if (!e.target.classList.contains('navicon')) {
               if ($(e.target).parents('.responsive-headerbar').length == 0 && e.target.id != "menu-btn") {
                  document.getElementById('menu-btn').checked = false;
               }
            }
         };
      });

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

      $(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}

   <style type="text/css">
      #page-footer, div.navbar, div.navbar ul.linklist {
         display: block !important;
      }

      ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
         display: inline !important;
      }

      <!-- BEGIN switch_ticker_new -->
      .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;
      }

      <!-- END switch_ticker_new -->
   </style>

   {HOSTING_JS}

   <!-- BEGIN google_analytics_code -->
   <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
   <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
      <!-- BEGIN google_analytics_code_bis -->
      gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
      <!-- END google_analytics_code_bis -->
   </script>
   <!-- END google_analytics_code -->

   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
        rel="stylesheet"/>
   <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>

<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
   <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" loading="lazy" /> <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="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
      </p>

   </div>
</div>
<!-- END hitskin_preview -->

<!-- BEGIN inactive_users_modal -->
<div id="inactive_popup" style="z-index: 10000 !important;">
   <div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div>
   <div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div>
   <div id="inactive_popup_buttons">
      <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button>
      <button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button>
   </div>
</div>
<script type="text/javascript">
   $('#inactive_popup #inactive_popup_close').on('mouseup', function () {
      document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
      $('#inactive_popup').hide(50);
   });
   $('#inactive_popup #inactive_popup_url').on('mouseup', function () {
      document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
      location.href = '{inactive_users_modal.U_MODAL}'
   })
</script>
<!-- END inactive_users_modal -->

<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
   <div class="h3">{SITENAME}</div>
   <div id="login_popup_message">
      {LOGIN_POPUP_MSG}
   </div>
   <!-- BEGIN switch_quick_login -->
   <br/>
   <div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div>
   <div>
      <div class="mt10">
         <div class="social_btn">
            <!-- BEGIN fb_quick_connect -->
            <div class="fb-login-button"></div>
            <!-- END fb_quick_connect -->
            &nbsp;
            <!-- BEGIN topicit_quick_connect -->
            <div class="ti-connect"></div>
            <!-- END topicit_quick_connect -->
         </div>
      </div>
   </div>
   <br/>
   <!-- END switch_quick_login -->
   <div id="login_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
         <input type="submit" class="button1" value="{L_LOGIN}"/>
         <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
         <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
      </form>
   </div>
</div>
<!-- END switch_login_popup -->

<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
   <div class="h3">{SITENAME}</div>
   <div id="like_popup_message">
        {LIKE_POPUP_MSG}
   </div>
   <div id="like_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
         <input type="submit" class="button1" value="{L_LOGIN}"/>
         <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
         <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
      </form>
   </div>
</div>
<!-- END switch_like_popup -->

<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}

<div id="page-header">
   <div class="headerbar">
      <div id="headerbar-top" class="responsive-headerbar">
         <div class="wrap">
            <a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
            <input class="menu-btn" type="checkbox" id="menu-btn" />
            <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
            <ul id="modernbb-nav-menu" class="navbar navlinks{NAVBAR_BORDERLESS}">
               <li>{GENERATED_NAV_BAR}</li>
            </ul>
         </div>
      </div>

      <div class="wrap">
         <div id="site-desc">
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
         </div>
      </div>
   </div>
 
          <!-- BEGIN switch_user_logged_out -->
<div class="topBar">
<div id="user_navigation" class="logged_in"><ul class="ipsList_inline right"><div class="register"><li><a href="/register"><i class="fa fa-plus-square" style="margin-right: 5px;" aria-hidden="true"></i> CRIAR CONTA</a></li></div>
<div class="login"> <li><a href="/login"><i class="fa fa-user-circle" style="margin-right: 5px;" aria-hidden="true"></i> ENTRAR</a></li></div></ul></div>
</div>
 
<ul class="navbar navlinks">
<a href="/forum"><i class="fa fa-home" style="background: rgba(255,255,255,0.1) ;border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 10px 5px !important; text-align: center;transition: all .2s; width: 30px;"></i></a>
<a href="/portal"><i class="fa fa-book" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  PORTAL</a>
<a href="/memberlist"><i class="fa fa-users" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  MEMBROS</a>
</ul>
  <!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
  <div class="topBar">
    <div class="perfil">
      <div class="dropdown">
        <a href="#">               
<script>
  document.write(_userdata.avatar);document.write(_userdata.username);
  $(function() {var avataruser = _userdata.avatar;var username = _userdata.username;var userId  = _userdata.user_id;$('#user_id_menu').attr('href', '/u' + userId);$('#posts_id_menu').attr('href', '/spa/' + username);$('#topicos_id_menu').attr('href', '/search?search_topics=' + username);$('#user_id_footer').attr('href', '/u' + userId);});</script>{USERNAME}<style>.perfil img {border-radius: 60px;height: 25px;margin: -2px 10px 0 0;object-fit: cover;vertical-align: middle;width: 25px;}</style>
</a>
      <div class="dropdown-content">
        <a id="user_id_menu" href="/u"><i class="fa fa-user-circle" style="margin: 2px 5px auto;"></i> VER PERFIL</a><a href="/profile?mode=editprofile"><i class="fa fa-user" style="margin: 2px 5px auto;"></i> EDITAR PERFIL</a><a href="/profile?mode=editprofile&amp;page_profil=avatars"><i class="fa fa-picture-o" style="margin: 2px 5px auto;"></i> EDITAR AVATAR</a><a id="posts_id_menu" href="/spa/coldTeus"><i class="ion-android-chat" style="margin: 2px 5px auto;"></i> MEUS POSTS</a><a id="topicos_id_menu" href="/search?search_topics=coldTeus"><i class="ion-android-list" style="margin: 2px 5px auto;"></i> MEUS TÓPICOS</a></div>
    </div>
  </div>
  <div class="mensp"><li><a href="/privmsg?folder=inbox" title="Mensagens Privadas"><i class="fa fa-envelope-o" style="padding: 18px 0;"></i></a></li></div>
  <div class="sair"><li><a href="/login?logout=1" title="Deslogar do fórum"><i class="fa fa-sign-out" style="padding: 18px 0;"></i></a></li></div> 
  </div>
  <ul class="navbar navlinks">
    <a href="/forum"><i class="fa fa-home" style="rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 10px 5px !important; text-align: center;transition: all .2s; width: 30px;"></i></a>
    <a href="/portal"><i class="fa fa-book" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  PORTAL</a>
    <a href="/memberlist"><i class="fa fa-users" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  MEMBROS</a>
  </ul>
 <!-- END switch_user_logged_in -->

   <!-- BEGIN switch_ticker_new -->
   <div id="fa_ticker_blockD" style="margin-top:4px;">
      <div class="module">
         <div class="inner">
            <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>
         </div>
      </div>
   </div>
   <!-- END switch_ticker_new -->
</div>

<div class="conteneur_minwidth_IE modern-resp">
   <div class="conteneur_layout_IE">
      <div class="conteneur_container_IE">
         <div id="wrap">
            <div id="page-body">

               <!-- BEGIN switch_ticker -->
               <div id="fa_ticker_block" style="margin-top:4px;">
                  <div class="module">
                     <div class="inner">
                        <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>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker -->

               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <div id="outer-wrapper">
                     <div id="wrapper">
                        <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>

                        <div id="container">
                           <div id="content-main">
                              <div id="main">
                                 <div id="main-content">

E CSS
Código:
/*************** Menu  ************************/
.topBar {
    float: right;
    height: 50px;
    margin-right: 40px;
    max-width: 1400px;
    width: 25%;
}
.register {
    background: rgba(0,0,0,0.2);
    float: right;
    font-size: 14px;
    font-weight: 300;
}
.topBar li {
    margin: 0!important;
}
.topBar a {
    color: #FFFFFF !important; /** cor do texto **/
    display: inline-block!important;
    font-family: 'Fira Sans Condensed', sans-serif, "Trebuchet MS", Sans-serif, Arial, Helvetica, Verdana!important;
    font-size: 13px!important;
    font-weight: 700!important;
    height: 50px!important;
    line-height: 50px!important;
    padding: 0 12px!important;
    text-shadow: none!important;
    transition-duration: 300ms!important;
    width: 100%;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-plus-square:before {
    content: "\f0fe";
}
.login {
    background: rgba(0,0,0,0.2);
    float: right;
    font-size: 14px;
    font-weight: 300;
    margin-right: 5px;
}
.fa-user-circle:before {
    content: "\f2bd";
}
.topBar a:hover {
    background-color: #rgba(0,0,0,0.2)!important; /** cor do mouse **/
    border-radius: 0;
}
.dropdown {
  float: left!important;
  display: inline-block;
  position: relative;
}
.navbar {
    background: #df9101 !important; /** cor da barra de navegação **/
    background-position: center center;
    height: 50px;
    line-height: 38px;
    margin: 0 auto;
    width: 100%;
    z-index: 999;
}
.navbar a {
    color: #fcfeff !important; /** cor do link **/
    display: inline-block!important;
    height: 50px!important;
    line-height: 53px!important;
    padding: 0 12px!important;
    text-shadow: none!important;
    transition-duration: 300ms!important;
  border-radius: 3px;
    font-size: 1.3rem;
}

.navbar a:hover {
    background-color: rgba(0,0,0,0.2) !important; /** cor do link quando passa o mouse **/
  border-radius: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "\f0c9";
}
.navbar li {
  margin: 0!important;
  display: inline-block;
}
.fa-newspaper-o:before {
    content: "\f1ea";
}
.fa-info-circle:before {
    content: "\f05a";
}
.fa-shopping-cart:before {
    content: "\f07a";
}
#tabs:after, .navbar:after, dl.polls:after, fieldset dl:after, ul.linklist:after, ul.topiclist dl:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.dropdown-content {
    background-color: #df9101; /** cor dos submenus **/
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    min-width: 160px;
    position: absolute;
    z-index: 10;
      display: none;
}
.fa-list:before {
    content: "\f03a";
}
.fa-book:before {
    content: "\f02d";
}
.fa-group:before, .fa-users:before {
    content: "\f0c0";
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content a:hover {
    background-color: rgba(0,0,0,0.2) !important;
}
.fa-user:before {
    content: "\f007";
}
.fa-envelope-o:before {
    content: "\f003";
}
.mensp {
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: block;
    float: left;
    font-weight: 400;
    list-style: none;
    margin-right: 5px;
    transition: .05s all;
}
.sair {
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: block;
    float: left;
    font-weight: 400;
    list-style: none;
    margin-right: 5px;
    transition: .05s all;
}
.fa-sign-out:before {
    content: "\f08b";
}
.perfil {
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: block;
    float: left;
    font-weight: 400;
    list-style: none;
    margin-right: 5px;
    transition: .05s all;
}
#headerbar-top {
    display: none;
}


Última edição por Harleen em 13.01.25 18:18, editado 1 vez(es)
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1786
Pontos : 2385

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 13.01.25 3:26

Salve  @Harleen o código funfou porem ficou bugado o icon de  logar, e também queria por todos os item do mesmo site citado a cima menos o portal e diminuir a opacidade da barra. e se poder complementar queria deixar ele fixo quando o scroll do mouse desse para baixo conseguiria?
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 15.01.25 4:18

48 hrs
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por Harleen 16.01.25 3:38

Altere o template por esse

Código:
<!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 name="viewport" content="width=device-width, initial-scale=1">
  <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="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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>
  <!-- BEGIN switch_recent_jquery -->
  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
  <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
  <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
  <!-- END switch_recent_jquery -->
  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
  {RICH_SNIPPET_GOOGLE}
 
  <!-- BEGIN switch_fb_login -->
  <script src="https://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="{JQUERY_DIR}ticker/ticker.css"/>
  <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
  <!-- END switch_ticker -->
 
  <!-- BEGIN switch_ticker_new -->
  <script src="{JQUERY_DIR}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 () {
 
        $('#fa_ticker_content').css('display', 'block');
 
        var width_max = $('ul#fa_ticker_content').width();
        var width_item = Math.floor(width_max / {switch_ticker.SIZE});
 
        if (width_max > 0) {
            $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).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);
              }
            });
 
            if (slid_vert) {
              var height_max = h_perso;
 
              $('ul#fa_ticker_content li').each(function () {
                  if ($(this).height() > height_max) {
                    height_max = $(this).height();
                  }
              });
 
              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
              $('ul#fa_ticker_content li').height(height_max);
            }
 
 
            $('#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 -->
        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 -->
 
        document.onclick = function(e){
            if (!e.target.classList.contains('navicon')) {
              if ($(e.target).parents('.responsive-headerbar').length == 0 && e.target.id != "menu-btn") {
                  document.getElementById('menu-btn').checked = false;
              }
            }
        };
      });
 
      <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
        logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
 
      $(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}
 
  <style type="text/css">
      #page-footer, div.navbar, div.navbar ul.linklist {
        display: block !important;
      }
 
      ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
        display: inline !important;
      }
 
      <!-- BEGIN switch_ticker_new -->
      .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;
      }
 
      <!-- END switch_ticker_new -->
  </style>
 
  {HOSTING_JS}
 
  <!-- BEGIN google_analytics_code -->
  <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
  <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
      <!-- BEGIN google_analytics_code_bis -->
      gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
      <!-- END google_analytics_code_bis -->
  </script>
  <!-- END google_analytics_code -->
 
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
        rel="stylesheet"/>
  <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
 
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
  <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" loading="lazy" /> <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="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
      </p>
 
  </div>
</div>
<!-- END hitskin_preview -->
 
<!-- BEGIN inactive_users_modal -->
<div id="inactive_popup" style="z-index: 10000 !important;">
  <div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div>
  <div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div>
  <div id="inactive_popup_buttons">
      <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button>
      <button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button>
  </div>
</div>
<script type="text/javascript">
  $('#inactive_popup #inactive_popup_close').on('mouseup', function () {
      document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
      $('#inactive_popup').hide(50);
  });
  $('#inactive_popup #inactive_popup_url').on('mouseup', function () {
      document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
      location.href = '{inactive_users_modal.U_MODAL}'
  })
</script>
<!-- END inactive_users_modal -->
 
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
  <div class="h3">{SITENAME}</div>
  <div id="login_popup_message">
      {LOGIN_POPUP_MSG}
  </div>
  <!-- BEGIN switch_quick_login -->
  <br/>
  <div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div>
  <div>
      <div class="mt10">
        <div class="social_btn">
            <!-- BEGIN fb_quick_connect -->
            <div class="fb-login-button"></div>
            <!-- END fb_quick_connect -->
            &nbsp;
            <!-- BEGIN topicit_quick_connect -->
            <div class="ti-connect"></div>
            <!-- END topicit_quick_connect -->
        </div>
      </div>
  </div>
  <br/>
  <!-- END switch_quick_login -->
  <div id="login_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
        <input type="submit" class="button1" value="{L_LOGIN}"/>
        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
        <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
      </form>
  </div>
</div>
<!-- END switch_login_popup -->
 
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
  <div class="h3">{SITENAME}</div>
  <div id="like_popup_message">
        {LIKE_POPUP_MSG}
  </div>
  <div id="like_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
        <input type="submit" class="button1" value="{L_LOGIN}"/>
        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
        <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
      </form>
  </div>
</div>
<!-- END switch_like_popup -->
 
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
 
<div id="page-header">
  <div class="headerbar">
      <div id="headerbar-top" class="responsive-headerbar">
        <div class="wrap">
            <a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
            <input class="menu-btn" type="checkbox" id="menu-btn" />
            <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
            <ul id="modernbb-nav-menu" class="navbar navlinks{NAVBAR_BORDERLESS}">
              <li>{GENERATED_NAV_BAR}</li>
            </ul>
        </div>
      </div>
 
      <div class="wrap">
        <div id="site-desc">
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
        </div>
      </div>
  </div>
 
<!-- BEGIN switch_user_logged_out -->
  <div class="topBar">
    <div id="user_navigation" class="logged_in">
      <ul class="ipsList_inline right">
        <div class="register">
          <li><a href="/register"><i class="fa fa-plus-square" style="margin-right: 5px;" aria-hidden="true"></i> CRIAR CONTA</a></li>
        </div>
        <div class="login">
          <li><a href="/login"><i class="fa fa-user-circle" style="margin-right: 5px;" aria-hidden="true"></i> ENTRAR</a></li>
        </div>
      </ul>
    </div>
  </div>
  <ul class="navbar navlinks">
    <a href="/forum"><i class="fa fa-home" style="rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 10px 5px !important; text-align: center;transition: all .2s; width: 30px;"></i></a>
    <a href="/memberlist"><i class="fa fa-users" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  MEMBROS</a>
    <a href="#"><i class="fa fa-sitemap" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  Site</a>
    <div class='dropdown2'>
      <a href="#"><i class="fa fa-list" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Teste</a>
      <div class="dropdown-content2">
        <a href="#"><i class="fa fa-gavel" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> teste 1</a>
        <a href="#"><i class="fa fa-comments" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Teste 2</a>
      </div>
    </div>
  </ul>
  <!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
  <div class="topBar">
    <div class="perfil">
      <div class="dropdown">
        <a href="#">
          <script>
  document.write(_userdata.avatar);document.write(_userdata.username);
  $(function() {var avataruser = _userdata.avatar;var username = _userdata.username;var userId  = _userdata.user_id;$('#user_id_menu').attr('href', '/u' + userId);$('#posts_id_menu').attr('href', '/spa/' + username);$('#topicos_id_menu').attr('href', '/search?search_topics=' + username);$('#user_id_footer').attr('href', '/u' + userId);});</script>
          {USERNAME}
        <style>
        .perfil img {
        border-radius: 60px;
        height: 25px;margin: -2px 10px 0 0;
        object-fit: cover;
        vertical-align: middle;
        width: 25px;
        }
        </style>
</a>
        <div class="dropdown-content">
          <a id="user_id_menu" href="/u"><i class="fa fa-user-circle" style="margin: 2px 5px auto;"></i> VER PERFIL</a>
          <a href="/profile?mode=editprofile"><i class="fa fa-user" style="margin: 2px 5px auto;"></i> EDITAR PERFIL</a>
          <a href="/profile?mode=editprofile&amp;page_profil=avatars"><i class="fa fa-picture-o" style="margin: 2px 5px auto;"></i> EDITAR AVATAR</a>
          <a id="posts_id_menu" href="/spa/coldTeus"><i class="ion-android-chat" style="margin: 2px 5px auto;"></i> MEUS POSTS</a>
          <a id="topicos_id_menu" href="/search?search_topics=coldTeus"><i class="ion-android-list" style="margin: 2px 5px auto;"></i> MEUS TÓPICOS</a>
        </div>
      </div>
    </div>
    <div class="mensp"><li><a href="/privmsg?folder=inbox" title="Mensagens Privadas"><i class="fa fa-envelope-o" style="padding: 18px 0;"></i></a></li></div>
    <div class="sair"><li><a href="/login?logout=1" title="Deslogar do fórum"><i class="fa fa-sign-out" style="padding: 18px 0;"></i></a></li></div>
  </div>
    <ul class="navbar navlinks">
    <a href="/forum"><i class="fa fa-home" style="background: rgba(255,255,255,0.1) ;border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 10px 5px !important; text-align: center;transition: all .2s; width: 30px;"></i></a>
    <a href="/memberlist"><i class="fa fa-users" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  MEMBROS</a>
    <a href="/register"><i class="fa fa-user-plus" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Cadastrar</a>
    <a href="#"><i class="fa fa-sitemap" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  Site</a>
    <div class='dropdown2'>
      <a href="#"><i class="fa fa-list" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Teste</a>
      <div class="dropdown-content2">
        <a href="#"><i class="fa fa-gavel" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> teste 1</a>
        <a href="#"><i class="fa fa-comments" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Teste 2</a>
      </div>
      </div>
  </ul>
<!-- END switch_user_logged_in -->
 
  <!-- BEGIN switch_ticker_new -->
  <div id="fa_ticker_blockD" style="margin-top:4px;">
      <div class="module">
        <div class="inner">
            <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>
        </div>
      </div>
  </div>
  <!-- END switch_ticker_new -->
</div>
 
<div class="conteneur_minwidth_IE modern-resp">
  <div class="conteneur_layout_IE">
      <div class="conteneur_container_IE">
        <div id="wrap">
            <div id="page-body">
 
              <!-- BEGIN switch_ticker -->
              <div id="fa_ticker_block" style="margin-top:4px;">
                  <div class="module">
                    <div class="inner">
                        <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>
                    </div>
                  </div>
              </div>
              <!-- END switch_ticker -->
 
              <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <div id="outer-wrapper">
                    <div id="wrapper">
                        <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>
 
                        <div id="container">
                          <div id="content-main">
                              <div id="main">
                                <div id="main-content">

E também o CSS
Código:
/*************** Menu  ************************/
.topBar {
    float: right;
    height: 50px;
    margin-right: 40px;
    max-width: 1400px;
    width: 25%;
}
.register {
    background: rgba(0,0,0,0.2);
    float: right;
    font-size: 14px;
    font-weight: 300;
}
.topBar li {
    margin: 0!important;
}
.topBar a {
    color: #FFFFFF !important; /** cor do texto **/
    display: inline-block!important;
    font-family: 'Fira Sans Condensed', sans-serif, "Trebuchet MS", Sans-serif, Arial, Helvetica, Verdana!important;
    font-size: 13px!important;
    font-weight: 700!important;
    height: 50px!important;
    line-height: 50px!important;
    padding: 0 12px!important;
    text-shadow: none!important;
    transition-duration: 300ms!important;
    width: 100%;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-plus-square:before {
    content: "\f0fe";
}
.login {
    background: rgba(0,0,0,0.2);
    float: right;
    font-size: 14px;
    font-weight: 300;
    margin-right: 5px;
}
.fa-user-circle:before {
    content: "\f2bd";
}
.topBar a:hover {
    background-color: #rgba(0,0,0,0.2)!important; /** cor do mouse **/
    border-radius: 0;
}
.dropdown {
  float: left!important;
  display: inline-block;
  position: relative;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content a:hover {
    background-color: rgba(0,0,0,0.2) !important;
}
.dropdown2:hover .dropdown-content2 {
    display: block;
}
.dropdown-content2 a:hover {
    background-color: rgba(0,0,0,0.2) !important;
}
.dropdown2 {
  display: inline-block;
  position: relative;
}
.dropdown-content {
  background-color: #df9101; /** cor dos submenus **/
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  min-width: 160px;
  position: absolute;
  z-index: 10;
  display: none;
}
.dropdown-content2 {
  background-color: #df9101; /** cor dos submenus **/
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  min-width: auto;
  position: absolute;
  z-index: 10;
  display: none;
}
.navbar {
    background: #df9101 !important; /** cor da barra de navegação **/
    background-position: center center;
    height: 50px;
    line-height: 38px;
    margin: 0 auto;
    width: 100%;
    z-index: 999;
}
.navbar a {
    color: #fcfeff !important; /** cor do link **/
    display: inline-block!important;
    height: 50px!important;
    line-height: 53px!important;
    padding: 0 12px!important;
    text-shadow: none!important;
    transition-duration: 300ms!important;
  border-radius: 3px;
    font-size: 1.3rem;
}
.navbar a:hover {
  background-color: rgba(0,0,0,0.2) !important; /** cor do link quando passa o mouse **/
  border-radius: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "\f0c9";
}
.navbar li {
  margin: 0!important;
  display: inline-block;
}
.fa-newspaper-o:before {
    content: "\f1ea";
}
.fa-info-circle:before {
    content: "\f05a";
}
.fa-shopping-cart:before {
    content: "\f07a";
}
#tabs:after, .navbar:after, dl.polls:after, fieldset dl:after, ul.linklist:after, ul.topiclist dl:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.fa-list:before {
    content: "\f03a";
}
.fa-book:before {
    content: "\f02d";
}
.fa-group:before, .fa-users:before {
    content: "\f0c0";
}
.fa-user:before {
    content: "\f007";
}
.fa-envelope-o:before {
    content: "\f003";
}
.mensp {
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: block;
    float: left;
    font-weight: 400;
    list-style: none;
    margin-right: 5px;
    transition: .05s all;
}
.sair {
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: block;
    float: left;
    font-weight: 400;
    list-style: none;
    margin-right: 5px;
    transition: .05s all;
}
.fa-sign-out:before {
    content: "\f08b";
}
.perfil {
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: block;
    float: left;
    font-weight: 400;
    list-style: none;
    margin-right: 5px;
    transition: .05s all;
}
#headerbar-top {
    display: none;
}


Última edição por Harleen em 17.01.25 15:01, editado 1 vez(es) (Motivo da edição : Adicionar itens)
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1786
Pontos : 2385

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 16.01.25 14:25

Salve  @Harleen Funfou já agradeço desde já, agora queria perguntar se é possível as mesma abas do menu onde o player n ta logando esteja quando o player está logado.

IMG : IMG

Essa aba teste, como posso ta fazendo alterando? adicionando link ? ou adiciona outra aba pode me tirar essas dúvidas?

Outra dúvida como posso fazer a alteração da cor do menu caso queira trocar?
É Possível diminuir a opacidade da cor?
Queria saber se é possível amentar o tamanho do menu pouca coisa teria como tambem?
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por Harleen 16.01.25 19:01

Para realizar as alterações no código
Código:
.navbar {
    background: #df9101 !important;
    background-position: center center;
    height: 50px;
    line-height: 38px;
    margin: 0 auto;
    width: 100%;
    z-index: 999;
}


Seta cor da barra background:#df9101 !important;
Seta tamanho do menu height: 50px;

Com isso, talvez será necessário alterar os ícones e textos:
Código:
.navbar a {
    color: #fcfeff !important; /** cor do link **/
    display: inline-block!important;
    height: 50px!important;
    line-height: 53px!important;
    padding: 0 12px!important;
    text-shadow: none!important;
    transition-duration: 300ms!important;
  border-radius: 3px;
    font-size: 1.3rem;
}

Seta Tamanho da fontefont-size: 1.3rem;
Seta Altura da fonte height: 50px;

Quanto aos links.
Código:
<a href="#"><i class="fa fa-gavel" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> teste 1</a>
        <a href="#"><i class="fa fa-comments" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Teste 2</a>

Edite o link aqui <a href="#">
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1786
Pontos : 2385

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 17.01.25 14:12

Certo  @Harleen Agradeço pela ajuda e paciência só faltou agora as abas que tão quando o player não está logado na parte que o player ta logado acho que o senhor esqueceu Triste
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por Harleen 17.01.25 15:03

PauloVinicios1755 escreveu:Certo  @Harleen Agradeço pela ajuda e paciência só faltou agora as abas que tão quando o player não está logado na parte que o player ta logado acho que o senhor esqueceu Triste

Eu editei o código dessa mensagem.
Veja se era isso
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1786
Pontos : 2385

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 17.01.25 20:53

Funfou perfeitamente, só uma dúvida mesmo logado ainda era pra parecer "CADASTRAR "? é possivel eu alterar manualmente e colocar outro link outra coisa tem como diminuir a opacidade do menu?

Outra dúvida é possivel deixar centralizado todas as items?


Última edição por PauloVinicios1755 em 17.01.25 20:55, editado 1 vez(es) (Motivo da edição : correção)
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por Harleen 19.01.25 2:33

PauloVinicios1755 escreveu:Funfou perfeitamente, só uma dúvida mesmo logado ainda era pra parecer "CADASTRAR "? é possivel eu alterar manualmente e colocar outro link outra coisa tem como diminuir a opacidade do menu?

Outra dúvida é possivel deixar centralizado todas as items?

Troque o template por esse
Código:
<!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 name="viewport" content="width=device-width, initial-scale=1">
  <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="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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>
  <!-- BEGIN switch_recent_jquery -->
  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
  <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
  <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
  <!-- END switch_recent_jquery -->
  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
  {RICH_SNIPPET_GOOGLE}
 
  <!-- BEGIN switch_fb_login -->
  <script src="https://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="{JQUERY_DIR}ticker/ticker.css"/>
  <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
  <!-- END switch_ticker -->
 
  <!-- BEGIN switch_ticker_new -->
  <script src="{JQUERY_DIR}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 () {
 
        $('#fa_ticker_content').css('display', 'block');
 
        var width_max = $('ul#fa_ticker_content').width();
        var width_item = Math.floor(width_max / {switch_ticker.SIZE});
 
        if (width_max > 0) {
            $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).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);
              }
            });
 
            if (slid_vert) {
              var height_max = h_perso;
 
              $('ul#fa_ticker_content li').each(function () {
                  if ($(this).height() > height_max) {
                    height_max = $(this).height();
                  }
              });
 
              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
              $('ul#fa_ticker_content li').height(height_max);
            }
 
 
            $('#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 -->
        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 -->
 
        document.onclick = function(e){
            if (!e.target.classList.contains('navicon')) {
              if ($(e.target).parents('.responsive-headerbar').length == 0 && e.target.id != "menu-btn") {
                  document.getElementById('menu-btn').checked = false;
              }
            }
        };
      });
 
      <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
        logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
 
      $(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}
 
  <style type="text/css">
      #page-footer, div.navbar, div.navbar ul.linklist {
        display: block !important;
      }
 
      ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
        display: inline !important;
      }
 
      <!-- BEGIN switch_ticker_new -->
      .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;
      }
 
      <!-- END switch_ticker_new -->
  </style>
 
  {HOSTING_JS}
 
  <!-- BEGIN google_analytics_code -->
  <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
  <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
      <!-- BEGIN google_analytics_code_bis -->
      gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
      <!-- END google_analytics_code_bis -->
  </script>
  <!-- END google_analytics_code -->
 
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
        rel="stylesheet"/>
  <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
 
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
  <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" loading="lazy" /> <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="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
      </p>
 
  </div>
</div>
<!-- END hitskin_preview -->
 
<!-- BEGIN inactive_users_modal -->
<div id="inactive_popup" style="z-index: 10000 !important;">
  <div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div>
  <div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div>
  <div id="inactive_popup_buttons">
      <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button>
      <button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button>
  </div>
</div>
<script type="text/javascript">
  $('#inactive_popup #inactive_popup_close').on('mouseup', function () {
      document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
      $('#inactive_popup').hide(50);
  });
  $('#inactive_popup #inactive_popup_url').on('mouseup', function () {
      document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
      location.href = '{inactive_users_modal.U_MODAL}'
  })
</script>
<!-- END inactive_users_modal -->
 
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
  <div class="h3">{SITENAME}</div>
  <div id="login_popup_message">
      {LOGIN_POPUP_MSG}
  </div>
  <!-- BEGIN switch_quick_login -->
  <br/>
  <div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div>
  <div>
      <div class="mt10">
        <div class="social_btn">
            <!-- BEGIN fb_quick_connect -->
            <div class="fb-login-button"></div>
            <!-- END fb_quick_connect -->
            &nbsp;
            <!-- BEGIN topicit_quick_connect -->
            <div class="ti-connect"></div>
            <!-- END topicit_quick_connect -->
        </div>
      </div>
  </div>
  <br/>
  <!-- END switch_quick_login -->
  <div id="login_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
        <input type="submit" class="button1" value="{L_LOGIN}"/>
        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
        <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
      </form>
  </div>
</div>
<!-- END switch_login_popup -->
 
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
  <div class="h3">{SITENAME}</div>
  <div id="like_popup_message">
        {LIKE_POPUP_MSG}
  </div>
  <div id="like_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
        <input type="submit" class="button1" value="{L_LOGIN}"/>
        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
        <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
      </form>
  </div>
</div>
<!-- END switch_like_popup -->
 
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
 
<div id="page-header">
  <div class="headerbar">
      <div id="headerbar-top" class="responsive-headerbar">
        <div class="wrap">
            <a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
            <input class="menu-btn" type="checkbox" id="menu-btn" />
            <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
            <ul id="modernbb-nav-menu" class="navbar navlinks{NAVBAR_BORDERLESS}">
              <li>{GENERATED_NAV_BAR}</li>
            </ul>
        </div>
      </div>
 
      <div class="wrap">
        <div id="site-desc">
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
        </div>
      </div>
  </div>
 
<!-- BEGIN switch_user_logged_out -->
  <div class="topBar">
    <div id="user_navigation" class="logged_in">
      <ul class="ipsList_inline right">
        <div class="register">
          <li><a href="/register"><i class="fa fa-plus-square" style="margin-right: 5px;" aria-hidden="true"></i> CRIAR CONTA</a></li>
        </div>
        <div class="login">
          <li><a href="/login"><i class="fa fa-user-circle" style="margin-right: 5px;" aria-hidden="true"></i> ENTRAR</a></li>
        </div>
      </ul>
    </div>
  </div>
  <ul class="navbar navlinks">
    <a href="/forum"><i class="fa fa-home" style="rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 10px 5px !important; text-align: center;transition: all .2s; width: 30px;"></i></a>
    <a href="/memberlist"><i class="fa fa-users" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  MEMBROS</a>
    <a href="#"><i class="fa fa-sitemap" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  Site</a>
    <div class='dropdown2'>
      <a href="#"><i class="fa fa-list" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Teste</a>
      <div class="dropdown-content2">
        <a href="#"><i class="fa fa-gavel" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> teste 1</a>
        <a href="#"><i class="fa fa-comments" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Teste 2</a>
      </div>
    </div>
  </ul>
  <!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
  <div class="topBar">
    <div class="perfil">
      <div class="dropdown">
        <a href="#">
          <script>
  document.write(_userdata.avatar);document.write(_userdata.username);
  $(function() {var avataruser = _userdata.avatar;var username = _userdata.username;var userId  = _userdata.user_id;$('#user_id_menu').attr('href', '/u' + userId);$('#posts_id_menu').attr('href', '/spa/' + username);$('#topicos_id_menu').attr('href', '/search?search_topics=' + username);$('#user_id_footer').attr('href', '/u' + userId);});</script>
          {USERNAME}
        <style>
        .perfil img {
        border-radius: 60px;
        height: 25px;margin: -2px 10px 0 0;
        object-fit: cover;
        vertical-align: middle;
        width: 25px;
        }
        </style>
</a>
        <div class="dropdown-content">
          <a id="user_id_menu" href="/u"><i class="fa fa-user-circle" style="margin: 2px 5px auto;"></i> VER PERFIL</a>
          <a href="/profile?mode=editprofile"><i class="fa fa-user" style="margin: 2px 5px auto;"></i> EDITAR PERFIL</a>
          <a href="/profile?mode=editprofile&amp;page_profil=avatars"><i class="fa fa-picture-o" style="margin: 2px 5px auto;"></i> EDITAR AVATAR</a>
          <a id="posts_id_menu" href="/spa/coldTeus"><i class="ion-android-chat" style="margin: 2px 5px auto;"></i> MEUS POSTS</a>
          <a id="topicos_id_menu" href="/search?search_topics=coldTeus"><i class="ion-android-list" style="margin: 2px 5px auto;"></i> MEUS TÓPICOS</a>
        </div>
      </div>
    </div>
    <div class="mensp"><li><a href="/privmsg?folder=inbox" title="Mensagens Privadas"><i class="fa fa-envelope-o" style="padding: 18px 0;"></i></a></li></div>
    <div class="sair"><li><a href="/login?logout=1" title="Deslogar do fórum"><i class="fa fa-sign-out" style="padding: 18px 0;"></i></a></li></div>
  </div>
    <ul class="navbar navlinks">
    <a href="/forum"><i class="fa fa-home" style="background: rgba(255,255,255,0.1) ;border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 10px 5px !important; text-align: center;transition: all .2s; width: 30px;"></i></a>
    <a href="/memberlist"><i class="fa fa-users" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  MEMBROS</a>
    <a href="/register"><i class="fa fa-user-plus" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Cadastrar</a>
    <a href="#"><i class="fa fa-sitemap" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i>  Site</a>
    <div class='dropdown2'>
      <a href="#"><i class="fa fa-list" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Teste</a>
      <div class="dropdown-content2">
        <a href="#"><i class="fa fa-gavel" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> teste 1</a>
        <a href="#"><i class="fa fa-comments" style="background: rgba(255,255,255,0.1);border-radius: 100%;box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.44);color: #fff;font-size: 16px!important; height: 30px; line-height: 30px!important; margin: 2px 5px auto; text-align: center;transition: all .2s; width: 30px;"></i> Teste 2</a>
      </div>
      </div>
  </ul>
<!-- END switch_user_logged_in -->
 
  <!-- BEGIN switch_ticker_new -->
  <div id="fa_ticker_blockD" style="margin-top:4px;">
      <div class="module">
        <div class="inner">
            <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>
        </div>
      </div>
  </div>
  <!-- END switch_ticker_new -->
</div>
 
<div class="conteneur_minwidth_IE modern-resp">
  <div class="conteneur_layout_IE">
      <div class="conteneur_container_IE">
        <div id="wrap">
            <div id="page-body">
 
              <!-- BEGIN switch_ticker -->
              <div id="fa_ticker_block" style="margin-top:4px;">
                  <div class="module">
                    <div class="inner">
                        <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>
                    </div>
                  </div>
              </div>
              <!-- END switch_ticker -->
 
              <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <div id="outer-wrapper">
                    <div id="wrapper">
                        <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>
 
                        <div id="container">
                          <div id="content-main">
                              <div id="main">
                                <div id="main-content">

Para centralizar os itens e diminuir a opacidade, procure na Folha CSS por .navbar e adicione
Seta centralizar text-align: center;
Seta opacidade rgba(231 135 16 / 77%) !important

Troque o CSS
Código:
/*************** Menu  ************************/
.topBar {
    float: right;
    height: 50px;
    margin-right: 40px;
    max-width: 1400px;
    width: 25%;
}
.register {
    background: rgba(0,0,0,0.2);
    float: right;
    font-size: 14px;
    font-weight: 300;
}
.topBar li {
    margin: 0!important;
}
.topBar a {
    color: #FFFFFF !important; /** cor do texto **/
    display: inline-block!important;
    font-family: 'Fira Sans Condensed', sans-serif, "Trebuchet MS", Sans-serif, Arial, Helvetica, Verdana!important;
    font-size: 13px!important;
    font-weight: 700!important;
    height: 50px!important;
    line-height: 50px!important;
    padding: 0 12px!important;
    text-shadow: none!important;
    transition-duration: 300ms!important;
    width: 100%;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-plus-square:before {
    content: "\f0fe";
}
.login {
    background: rgba(0,0,0,0.2);
    float: right;
    font-size: 14px;
    font-weight: 300;
    margin-right: 5px;
}
.fa-user-circle:before {
    content: "\f2bd";
}
.topBar a:hover {
    background-color: #rgba(0,0,0,0.2)!important; /** cor do mouse **/
    border-radius: 0;
}
.dropdown {
  float: left!important;
  display: inline-block;
  position: relative;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content a:hover {
    background-color: rgba(0,0,0,0.2) !important;
}
.dropdown2:hover .dropdown-content2 {
    display: block;
}
.dropdown-content2 a:hover {
    background-color: rgba(0,0,0,0.2) !important;
}
.dropdown2 {
  display: inline-block;
  position: relative;
}
.dropdown-content {
  background-color: #df9101; /** cor dos submenus **/
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  min-width: 160px;
  position: absolute;
  z-index: 10;
  display: none;
}
.dropdown-content2 {
  background-color: #df9101; /** cor dos submenus **/
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  min-width: auto;
  position: absolute;
  z-index: 10;
  display: none;
}
.navbar {
  background: rgba(231 135 16 / 77%) !important; /** cor da barra de navegação **/
  background-position: center center;
  text-align: center;
  height: 50px;
  line-height: 38px;
  margin: 0 auto;
  width: 100%;
  z-index: 999;
}
.navbar a {
    color: #fcfeff !important; /** cor do link **/
    display: inline-block!important;
    height: 50px!important;
    line-height: 53px!important;
    padding: 0 12px!important;
    text-shadow: none!important;
    transition-duration: 300ms!important;
  border-radius: 3px;
    font-size: 1.3rem;
}
.navbar a:hover {
  background-color: rgba(0,0,0,0.2) !important; /** cor do link quando passa o mouse **/
  border-radius: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "\f0c9";
}
.navbar li {
  margin: 0!important;
  display: inline-block;
}
.fa-newspaper-o:before {
    content: "\f1ea";
}
.fa-info-circle:before {
    content: "\f05a";
}
.fa-shopping-cart:before {
    content: "\f07a";
}
#tabs:after, .navbar:after, dl.polls:after, fieldset dl:after, ul.linklist:after, ul.topiclist dl:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.fa-list:before {
    content: "\f03a";
}
.fa-book:before {
    content: "\f02d";
}
.fa-group:before, .fa-users:before {
    content: "\f0c0";
}
.fa-user:before {
    content: "\f007";
}
.fa-envelope-o:before {
    content: "\f003";
}
.mensp {
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: block;
    float: left;
    font-weight: 400;
    list-style: none;
    margin-right: 5px;
    transition: .05s all;
}
.sair {
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: block;
    float: left;
    font-weight: 400;
    list-style: none;
    margin-right: 5px;
    transition: .05s all;
}
.fa-sign-out:before {
    content: "\f08b";
}
.perfil {
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: block;
    float: left;
    font-weight: 400;
    list-style: none;
    margin-right: 5px;
    transition: .05s all;
}
#headerbar-top {
    display: none;
}


A edição do link é a mesma que expliquei na mensagem anterior.
Seta aqui
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1786
Pontos : 2385

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por PauloVinicios1755 19.01.25 3:06

@Harleen Salve muito obrigado pela ajuda de vdd <3
PauloVinicios1755

PauloVinicios1755
****

Membro desde : 04/04/2021
Mensagens : 326
Pontos : 475

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Moderadeira

Tópico resolvido Re: Personalizar menu de interaçao

Mensagem por Skouliki 19.01.25 9:57

Tópico resolvido


Movido para "Questões resolvidas".
Skouliki

Skouliki
Moderadeira
Moderadeira

Membro desde : 12/10/2018
Mensagens : 1290
Pontos : 1534

http://iconskouliki.forumgreek.com https://www.facebook.com/Iconskouliki https://twitter.com/Iconskouliki

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos