Cargando...

Bret

1
Buscar contenido
Enviar mensaje privadoSitio web del usuarioContacto: Skype
Rango
Sexo
Mensajes
Última visita
Miembro desde

Foro Nube » Servicios » Soporte Foroactivo

Foro Cerrado
Este foro se encuentra cerrado de forma indefinida. Puedes utilizarlo para revisar material antiguo que desees recuperar.

[PUNBB] Como colocar esta nueva Navbar en mi foro?

Creado por ,

Mensaje [Página 1 de 1.]

Srz

Publicado Mar 28 Oct - 4:40

#1
Srz
Hola amigos, seria bueno que me ayudaran con la adaptacion de una navar a mi foro, ya lo intente colocandola en el overall_header, pero aun me da horrores jaja Esta es por si acaso para que la vean. 

link:

A 0 usuarios le gusta esto
Bret

Publicado Mar 28 Oct - 14:40

#2
Bret
Administrador
Estaría bien que nos dieses más información sobre el problema. ¿Donde la colocas en la plantilla overall_header? ¿Qué ocurre cuando la colocas? Faltan muchos datos que nos impiden ayudarte.

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)
Ch@lo Valdez

Publicado Mar 28 Oct - 18:15

#3
Ch@lo Valdez
deberías de colocar el code, se puede sacar lo se, pero hay varios elementos en ese demo, cuando lo publicaste en CA eso es lo que hizo que no participara, saludos

A 0 usuarios le gusta esto
Srz

Publicado Miér 29 Oct - 3:50

#4
Srz
Bret escribió:Estaría bien que nos dieses más información sobre el problema. ¿Donde la colocas en la plantilla overall_header? ¿Qué ocurre cuando la colocas? Faltan muchos datos que nos impiden ayudarte.

Bret, si tienes Razon, claro, colocarlo en el overall_header, cuando intente colocarla no supe como hacerlo y descuadre mi foro. Fuera de buena ayuda que me ayudaran a implementarla en mi foro... o a sustituirla por la que ya esta.

http://www.musicinstant.host-es.com

A 0 usuarios le gusta esto
Bret

Publicado Miér 29 Oct - 16:26

#5
Bret
Administrador
Bueno, he hecho unas cuantas modificaciones y he trasteado un poco con el código, pero lo he conseguido. Antes de nada una advertencia:

Dejando de lado el hecho de que esta barra de navegación tiene la desventaja de que no podrás sincronizarla con la barra de navegación propia de tu foro, perderás muchas opciones como el aviso de MPs, el cambio del botón conectar por desconectar, etc. Serán cosa que tendrás que programar tú por tu cuenta, de la misma forma que hicimos en este foro con la barra superior. A lo que iba, esta barra de navegación está muy mal programada/maquetada y no te la recomiendo para nada ponerla en tu foro si es un proyecto serio. Si, por lo contrario, sigues queriendo ponerla te recomiendo que la hagas tú de cero con tu propio código.

Volviendo al tema, te explico lo que tienes que hacer para poder colocar la barra de navegación. Es muy simple, lo que debes de hacer es colocar todas y cada una de las etiquetas propias de la etiqueta head dentro de la misma (link, script, style, etc.) y las etiquetas de body dentro de body (divs, headers, etc.). Esta es la base para que funcione, pero si no te sientes cómodo haciéndolo tú, te he dejado yo una plantilla overall_header limpia con la única modificación de que he agregado la barra de navegación de forma que ya funcione poniendo la plantilla en tu foro.

Esta es la plantilla lista:

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>
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

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

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

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

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

            case 'left':
                break;

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

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

            default:
                slid_vert = true;
        }

        $(document).ready(function() {

            $('#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;
    <!-- END switch_login_popup -->

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

            $("#login_popup").css({
            "left": windowWidth/2 - popupWidth/2
                });
        });
    });
    <!-- END switch_login_popup -->
    //]]>
    </script>
    {GREETING_POPUP}
    <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[
        var _gaq = _gaq || [];
        _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
        _gaq.push(["_trackPageview"]);
        _gaq.push(['_trackPageLoadTime']);

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

        (function() {
            var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
            ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
        })();
    //]]>
    </script>
    <!-- END google_analytics_code -->
   
    <!-- COMIENZO CODIGOS NAVBAR -->
    <link href="https://music-databas.googlecode.com/svn/trunk/css/nav.css" rel="stylesheet" type="text/css"/>
  <link href="http://losacordes.com/css/ie6.css" rel="stylesheet" type="text/css"/>
  <link href="http://losacordes.com/css/ie.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="https://music-databas.googlecode.com/svn/trunk/js/fancy.css" media="screen" />

<style type="text/css">
.vitrine {position: relative;min-height: 600px;} .vitrine_l{width:333px; position: absolute; top: 0px; left: 0px;} .vitrine_r{width:280px; position: absolute; top: 0px; left: 350px;} .highlight ul{list-style:none;margin:0;padding:0}.highlight li{margin:0;padding:0}.highlight {position: relative;    height: 222px;width: 320px; margin-top: 10px;}.mask {position: absolute;bottom: 0px;left: 0px;z-index: 99;}.reflex {z-index: 98;position: absolute;top: 5px;right: 5px;}.high_leg {z-index: 97;height: 52px;width: 280px;position: absolute;bottom: 0px;left: 0px;background:url(images/highlight_legenda.png) bottom no-repeat;border-top: 2px solid #a82927;color: #FFF;padding-left: 20px;padding-right: 20px;padding-top: 20px;font-size: 14px;}
</style>

<script src="https://music-databas.googlecode.com/svn/trunk/js/jquery.js" type="text/javascript"></script>
<script src="https://music-databas.googlecode.com/svn/trunk/js/functions.js"></script>
<script>
var item_highlight;var interval_highlight;
$(document).ready(function(){
$("#slider").wslide({width:320,height:250,horiz:true,autolink:'slider_nav',duration:300});
item_highlight = 1;
playHighlight();
interval_highlight = setInterval ("playHighlight()", 4000);
$("#slider_nav a, #slider").mouseover(function(){clearInterval(interval_highlight)});
$("#slider_nav a, #slider").mouseout(function(){interval_highlight = setInterval ("playHighlight()", 4000);});
$("#tab_contents").wslide({width:340,height:290,autolink:false,fade:true,duration:500});
$("#tabs a").click(function(){
$("#tabs a").removeClass("ativo");
$("#tabs a").removeClass("wactive");
$(this).addClass("ativo");
});
$("#latestnews").wslide({width:640,height:278,horiz:false,autolink:'latest_nav',duration:300});
$('#feedback a').fancybox({'frameWidth':624, 'frameHeight':320, 'padding':5})
});
function playHighlight(){
if (item_highlight=="") item_highlight=1;
var itens = $('#slider_nav').find('a');
$(itens[(item_highlight-1)]).click();
item_highlight++;
if (item_highlight>itens.length) item_highlight=1;}
</script>

<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>

<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/2001079/LosAcordes_Home_160x60_', [160, 600], 'div-gpt-ad-1377700317541-4').addService(googletag.pubads());
googletag.defineSlot('/2001079/LosAcordes_Home_300x250_', [300, 250], 'div-gpt-ad-1377700317541-5').addService(googletag.pubads());
googletag.defineSlot('/2001079/LosAcordes_Home_300x250_2', [300, 250], 'div-gpt-ad-1377872587890-0').addService(googletag.pubads());
googletag.defineSlot('/2001079/LosAcordes_Home_728x90_', [728, 90], 'div-gpt-ad-1377700317541-6').addService(googletag.pubads());
googletag.pubads().enableAsyncRendering();
googletag.enableServices();
});
</script>
 
<style>
@import url(http://fonts.googleapis.com/css?family=Puritan);
.topofixo{ z-index:1000; width:100%; font-family: 'Puritan', sans-serif;opacity:0.95; -moz-opacity: 0.95;filter: alpha(opacity=95); height:120px; display:block;position:fixed;top:0}
/*.topofixo-ativo{position:fixed;top:0}*/
.topofixo .azul{width:100%; height:75px; background:#004A6D;}
.topofixo .azul .center{width:980px; height:75px; margin: auto; }
.topofixo .cinza{width:100%; height:40px; background:#5B5B5B; border-top:1px solid #333333;}
.topofixo .cinza .center{width:980px; height:40px; margin:auto}
.topofixo .cinza .center a.item{width:120px; height:40px; line-height: 40px; display: block; float:left; background: url(http://www.losacordes.com/images/divisor.png) no-repeat top left;}
.topofixo .cinza .center a:hover.item{background:#222222;}
body{margin-top:140px}
.topofixo .cinza .center a.menulink{background: url(http://www.losacordes.com/images/menu-icon.png) no-repeat 10px;padding-left:5px}
.topofixo .cinza .center a.menulink:hover{background:#222 url(http://www.losacordes.com/images/menu-icon.png) no-repeat 10px;}
.topofixo .cinza .center a.item img{float:right; margin-top:12px; margin-right:5px;}
.topofixo .cinza .center .busca{width:250px; height:40px; background:#222222; float: right;}
.topofixo a{ background: url(http://www.losacordes.com/images/sprite-echords.png) no-repeat top left; display:block; font-style: normal; ; color: #FFF; text-align: center; line-height:38px; text-decoration: none}
a.logo-los-acordes{background: url(http://www.losacordes.com/images/logo.png); width: 198px; height: 54px; float:left; margin-top:10px; }
a.sprite-bt-sign-up{ background-position: 0 -336px; width: 80px; height: 34px; float: right; margin-left:5px; margin-top:20px;}
a.sprite-bt-login{ background-position: 0 -168px; width: 80px; height: 34px; float: right;margin-left:5px; margin-top:20px}
a.sprite-bt-premium-content{ background-position: 0 -252px; width: 137px; height: 34px; float: right;margin-left:5px; margin-top:20px}
a.sprite-bt-free-content{ background-position: 0 -84px; width: 114px; height: 34px; float: right;margin-left:5px; margin-top:20px}

a.sprite-bt-edit-profile{background: url(http://www.losacordes.com/images/bt-logado.png); background-position: 0 0; width: 111px; height: 34px;float: right;margin-left:5px; margin-top:20px }
a.sprite-bt-logout{background: url(images/bt-logado.png) no-repeat top left; display:block; background-position: 0 -84px; width: 82px; height: 34px;float: right;margin-left:5px; margin-top:20px }
.topofixo .welcome{width: 200px; height:34px;float:left; margin-top:20px; margin-left:25px; color:#FFFFFF;}
.topofixo .welcome a{display:inline; background:none;color: #33A9E1; line-height:15px; font-size:14px;}
.topofixo .welcome a:hover{color:;}
.topofixo .welcome a.imagem{float: left; border:none; margin-right:5px; color:yellow;}
.topofixo .welcome a.imagem img{float: left; width:34px; height:34px; border:none;}
.topofixo .welcome a.upgradebt{font-weight: bold; font-size:16px; color:#FFA910;}
.busca{width:300px; height: 40px; float:right; background: #740A02;}
.busca input{width:190px; background:#FFFFFF; height:20px; float:left; margin-left:8px; margin-top:7px;}
.busca a.sprite-bt-busca{ background-position: 0 0; width: 33px; height: 34px; float: right;margin-right:5px; margin-top:5px}
.menu-header-box, #cmbInstruments{display:none}
.linkbloco{width:100%; height:100%; background:#dddddd; text-align: center}
.linkbloco h2{width:100%; height:35px; background:green;line-height: 35px;}
.linkbloco li{width:100%;height:20px; line-height:20px; background: #FFFFFF; margin-top:2px;}
.linkbloco li a{color: gray; font-variant: small-caps; font-size:18px; text-decoration: none}
.linkbloco li a:hover{color: orange;}
.menubloco{display:none;width:764px; height:340px;position:relative; border:1px solid #CCCCCC; margin:auto; background: #FFFFFF; z-index:5000; left:-105px; -webkit-box-shadow: 3px 5px 10px 1px rgba(0, 0, 0, 0.3);box-shadow: 3px 5px 10px 1px rgba(0, 0, 0, 0.3)}
.menulado{float:left; width:220px; height:340px; border-right:1px solid #DDD;}
.menubloco h2{height:35px; line-height: 35px; color: #000000; padding-left:10px; margin-top:15px;}
.menubloco h2 img{margin-right:10px;vertical-align:middle}
.menubloco h2.premium{height:35px;;line-height: 35px; color: #ff7219; padding-left:10px;}
.menubloco ul{list-style-type: none;}
.menubloco ul li{height:20px; line-height:20px; background: #FFFFFF; margin-top:2px;  padding-left:10px;}
.menubloco ul li a{color: #666666; font-variant: small-caps; font-size:18px; text-decoration: none;text-align:left }
.menubloco ul li a:hover{color: #ff7219;}
.abc{width:340px;  height: 34px; float: right; margin-left:10px; margin-top:20px;}
.abc a{width:12px;  float:left; padding:0; line-height: 38px; background: none; opacity: 0.5}
.abc a:hover{width:12px;  float:left; padding:0; line-height: 38px; background: none; opacity: 1; color:#FFFFFF;}
</style>
<script>
var fancyLogin = false;
$(document).ready(function(){
    $('a[rel=login-box]').attr('href','site/login1.asp?&iframe');
    $('a[rel=login-box]').fancybox({'frameWidth':625, 'frameHeight':315,'padding':5});
    $('a[rel=menu-header-box-1], a[rel=menu-header-box-2], a[rel=menu-header-box-3]').fancybox({'modal':true,'hideOnContentClick': false, 'onComplete': function(){fancyLogin=true;} });

    $("a.menulink, .menubloco").mouseover(function(){doMenuLink('block');});
    $("a.menulink, .menubloco").mouseout(function(){doMenuLink('none');});
});

function doMenuLink(st){
    var o = $('.menubloco');
    $(o).css('display',st);
}
</script>
    <!-- FIN CODIGOS NAVBAR -->
</head>

<body id="phpbb">

<!-- COMIENZO CODIGOS NAVBAR -->


<header class="topofixo">
    <div class="azul">
        <div class="center">
            <a href="http://www.losacordes.com/" title="Inicio de Los Acordes" class="logo-los-acordes"></a>

            <div class="abc">
                <a href="artistas/a">A</a>
                <a href="artistas/b">B</a>
                <a href="artistas/c">C</a>
                <a href="artistas/d">D</a>
                <a href="artistas/e">E</a>
                <a href="artistas/f">F</a>
                <a href="artistas/g">G</a>
                <a href="artistas/h">H</a>
                <a href="artistas/i">I</a>
                <a href="artistas/j">J</a>
                <a href="artistas/k">K</a>
                <a href="artistas/l">L</a>
                <a href="artistas/m">M</a>
                <a href="artistas/n">N</a>
                <a href="artistas/o">O</a>
                <a href="artistas/p">P</a>
                <a href="artistas/q">Q</a>
                <a href="artistas/r">R</a>
                <a href="artistas/s">S</a>
                <a href="artistas/t">T</a>
                <a href="artistas/u">U</a>
                <a href="artistas/v">V</a>
                <a href="artistas/x">X</a>
                <a href="artistas/y">Y</a>
                <a href="artistas/z">Z</a>
                <a href="artistas/[0-9]" style="width:23px">0-9</a>
            </div>

            <span id="box-members">
                <a href="signup-free.htm" alt="Registrar" title="Sign Up for Free" class="sprite-bt-sign-up">REGISTRAR</a>
                <a href="login.htm" rel="login-box" alt="Entrar" class="sprite-bt-login">ENTRAR</a>
            </span>
        </div>
    </div>

    <div class="cinza">
        <div class="center">
            <a href="javascript:void(0)" class="item menulink">MENU</a>
            <a href="acordes" class="item">TOP ARTISTAS <img src="http://www.losacordes.com/images/st-item.png" /></a>
            <a href="leccionesdevideos.htm" class="item">TOP LESSIONES <img src="http://www.losacordes.com/images/st-item.png" /></a>
            <a href="generos.htm" class="item">ESTILOS <img src="http://www.losacordes.com/images/st-item.png" /></a>
            <a href="acordes" hhref="#cmbInstruments" rrel="menu-header-box-3" class="item">INSTRUMENTOS <img src="http://www.losacordes.com/images/st-item.png" /></a>
            <div class="busca">
                <input name="search" type="text" id="search" autocomplete="off" placeholder="¿Qué estás buscando?" onFocus="openAutoComplete()" onBlur="closeAutoComplete()" onkeydown="if (event.keyCode == 13) { $('#img_search_top').click() }" rel="1" />
                <a class="sprite-bt-busca" alt="Search" rel="search" id="img_search_top"></a><br><div id="autocompletebox"><div id="autocomplete"></div></div>
            </div>
        </div>



  <div class="menubloco">
    <div class="menulado">
      <h2><img src="http://www.losacordes.com/images/ico-menu.png" /> menu</h2>
      <ul>
        <li><a href="requestvideo.htm">solicitar un vídeo</a></li>
        <li><a href="http://afinador.losacordes.com" target="_blank"><strong>afinador
          online</strong></a></li>
        <li><a href="chord-dictionary.htm">diccionario de acordes</a></li>
        <li><a href="http://www.chordeditor.com/" target="_blank">descargar billion
          chords</a></li>
        <li><a href="tutorials.htm">tutoriales e lecciones</a></li>
        <li><a href="scales.htm">escalas para guitarra</a></li>
        <li><a href="http://www.guitarprosongs.com" target="_blank">guitarprosongs.com</a></li>
        <li><a href="my-songbooks.htm">songbooks</a></li>
        <li><a href="riffs-list.htm">lecciones de riff</a></li>
      </ul>
    </div>
    <div class="menulado" style="width:160px">
      <h2><img src="http://www.losacordes.com/images/ico-submit.png" />contribuir</h2>
      <ul>
        <li><a href="submit-tab.htm">Enviar tabs</a></li>
        <li><a href="submit-tutorial.asp">Enviar tutoriales</a></li>
        <li><a href="send_riff_lesson.asp">Enviar tutoriales</a></li>
      </ul>
      <h2><img src="http://www.losacordes.com/images/ico-account.png" />mi cuenta</h2>
      <ul id="menuuser">
        <li><a href="login.htm">Iniciar sesión</a></li>
        <li><a href="signup-free.htm">Crear Cuenta</a></li>
        <li><a href="signup-free.htm?premium"><b>Cuenta Premium</b></a></li>
      </ul>
    </div>
    <div class="menulado">
      <h2 class="premium"><img src="http://www.losacordes.com/images/ico-premium.png" />premium content</h2>
      <ul>
        <li><a href="upgrade-premium.htm">¿Por qué cuenta premium?</a></li>
        <li><a href="leccionesdevideos.htm">lecciones de video</a></li>
        <li><a href="chords-editor.htm">guitar chord editor</a></li>
        <li><a href="chords-explorer.htm">explorador de acordes</a></li>
        <li><a href="guitar-chord-library.htm">biblioteca de acordes</a></li>
        <li><a href="personal-chord-library.htm">biblioteca personal de acordes</a></li>
        <li><a href="bonus.htm">brindes</a></li>
        <li style="background: none; margin-top:20px"> <a href="upgrade-premium.htm" style="background: none;" class="btn"><img src="http://static.losacordes.com/images/bt_sign_up_premium.png" width="120" height="56" alt="Crear Cuenta Premium" /></a>
        </li>
      </ul>
    </div>
    <div class="menulado" style="width:160px">
      <h2><img src="http://www.losacordes.com/images/ico-instruments.png" />instruments</h2>
      <ul>
        <li><a href="acordes">Guitarra Acústica</a></li>
        <li><a href="tablaturas">Guitarra</a></li>
        <li><a href="tablaturas-bajo">Bajo</a></li>
        <li><a href="ukulele">Ukulele</a></li>
        <li><a href="piano">Teclados</a></li>
        <li><a href="tablaturas-bateria">Batería</a></li>
        <li><a href="flauta">Flauta</a></li>
        <li><a href="armonicas">Harmónica</a></li>
      </ul>
    </div>
  </div>

    </div>


<ul id="premium-menu-box" class="menu-header-box">
    <div class="linkbloco">
    <h2 style="background:orange">contenido premium</h2>
    <li><a href="upgrade-premium.htm">¿Por qué cuenta premium?</a></li>
    <li><a href="leccionesdevideos.htm">lecciones de video</a></li>
    <li><a href="chords-editor.htm">guitar chord editor</a></li>
    <li><a href="chords-explorer.htm">explorador de acordes</a></li>
    <li><a href="guitar-chord-library.htm">biblioteca de acordes</a></li>
    <li><a href="personal-chord-library.htm">biblioteca personal de acordes</a></li>
    <li><a href="bonus.htm">brindes</a></li>
    <li style="background: none; margin-top:20px"><a href="upgrade-premium.htm" style="background: none;" class="btn"><img src="http://static.losacordes.com/images/bt_sign_up_premium.png" width="120" height="56" alt="Crear Cuenta Premium" /></a></li>
    </div>
</ul>

<ul id="free-menu-box" class="menu-header-box">
    <div class="linkbloco">
    <h2>free content</h2>
    <li><a href="acordes">acordes</a></li>
    <li><a href="tablaturas">tablaturas</a></li>
    <li><a href="requestvideo.htm">solicitar un vídeo</a></li>
    <li><a href="http://tuner.e-chords.com" target="_blank"><strong>online tuner</strong></a></li>
    <li><a href="chord-dictionary.htm">diccionario de acordes</a></li>
    <li><a href="http://www.chordeditor.com/" target="_blank">descargar billion chords</a></li>
    <li><a href="tutorials.htm">tutoriales e lecciones</a></li>
    <li><a href="scales.htm">escalas para guitarra</a></li>
    <li><a href="http://www.guitarprosongs.com" target="_blank">guitarprosongs.com</a></li>
    <li><a href="my-songbooks.htm">songbooks</a></li>
    <li><a href="riffs-list.htm">lecciones de riff</a></li>
    <li><a href="submit-tutorial.asp"><b>enviar tabs e acordes</b></a></li>
    <li><a href="send_riff_lesson.asp"><b>enviar tutoriales</b></a></li>
    </div>
</ul>

<style>
    .total{width:100%; height:100%; background: #DDDDDD;}
    a.iteminst{width:200px; height:50px; display:block; float: left; margin-left:10px;  margin-top:15px;  color:#000000;}
    a.iteminst img{float:left; margin-right:3px;}
    a.iteminst p{float:left; margin-left:4px; margin-top:5px;}
    a:hover.iteminst{color#}
    }

</style>

<div id="cmbInstruments" class="combao" style="visibility:visible;display:none">
<div class="total">
    <a class="iteminst" href="chords"><img src="http://static.e-chords.com/images/icons/cifra50.png" alt="Guitar Chords" width="49" height="49" /><p>Guitar Chords <br />143772 songs </p></a>

    <a class="iteminst" href="keyboards"><img src="http://static.e-chords.com/images/icons/teclado50.png" alt="Keyboards" width="49" height="49" /><p>Keyboards <br />143772 songs</p></a>

    <a class="iteminst" href="drums"><img src="http://static.e-chords.com/images/icons/bateria50.png" alt="Drums" width="49" height="49" /><p>Drums<br />5738 songs</p></a>

    <a class="iteminst" href="flute"><img src="http://static.e-chords.com/images/icons/flauta50.png" alt="Flute" width="49" height="49" /><p>Flute<br />336 songs</p></a>

    <a class="iteminst" href="tabs"><img src="http://static.e-chords.com/images/icons/tabs50.png" alt="Guitar Tabs" width="49" height="49" /><p>Guitar Tabs<br /> 30288 songs</p></a>

    <a class="iteminst" href="bass"><img src="http://static.e-chords.com/images/icons/baixo50.png" alt="Bass" width="49" height="49" /><p>Bass<br />8263 songs</p></a>

    <a class="iteminst" href="ukulele"><img src="http://static.e-chords.com/images/icons/cavaco50.png" alt="Ukulele" width="49" height="49" /><p>Ukulele<br />0 songs</p></a>

    <a class="iteminst" href="harmonics"><img src="http://static.e-chords.com/images/icons/cifra50.png" alt="Harmonics" width="49" height="49" /><p>Harmonics<br />394 songs</p></a></div>

</div>
</header>

<!-- FIN CODIGOS NAVBAR -->
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
    <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
    <div class="content">
        <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
        </p>

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

<!-- BEGIN switch_login_popup -->
<div id="login_popup">
    <div class="h3">{SITENAME}</div>
    {LOGIN_POPUP_MSG}
    <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 -->

<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
    <a id="top" name="top" accesskey="t"></a>
    {JAVASCRIPT}

    <div id="page-header">
        <div class="headerbar">
            <div class="inner"><span class="corners-top"><span></span></span>

            <div id="logo-desc">
                <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
                <!-- 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>

            <span class="corners-bottom"><span></span></span></div>
        </div>

        <div class="navbar">
            <div class="inner"><span class="corners-top"><span></span></span>

            <ul class="linklist navlinks{NAVBAR_BORDERLESS}">
            <li>{GENERATED_NAV_BAR}</li>
            </ul>

            <!-- BEGIN switch_search_box -->
            <div id="search-box">
                <form method="get" action="{ACTION_SEARCH}" id="search">
                    <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" />
                    {JS_SESSION_ID_INPUT}
                    <input class="button2" type="submit" value="{L_SEARCH}" /></p>
                </form>
            </div>
            <!-- END switch_search_box -->

            <span class="corners-bottom"><span></span></span></div>
        </div>

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

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

    <div id="page-body">

    <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
        <div id="outer-wrapper">
            <div id="wrapper">
                <div id="container">
                    <div id="content">

                        <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="main">
                            <div id="main-content">

Te recomiendo utilizar esta antes que hacerlo tú por tu cuenta, puesto que también he arreglado algunos errores muy graves de maquetación que impedían que funcionase correctamente cuando la pusiste en tu foro.

¡Disfruta!

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)
Srz

Publicado Jue 30 Oct - 0:20

#6
Srz
Vaya, entiendo Bret. Pero... ¿porque no podre sincronizarla? Debe haber una manera, no? al menos para las notificaciones. :/

EDIT: Veo que... Se ha suprimido mi tema en el foro... :/ 

[PUNBB] Como colocar esta nueva Navbar en mi foro? 53rz10

A 0 usuarios le gusta esto
Bret

Publicado Jue 30 Oct - 15:57

#7
Bret
Administrador
Sí, por supuesto que hay una manera, pero implica programar un código totalmente único para tu barra de navegación, pero supongo que no sabes programar en JavaScript.

Lo de que se reviertan los cambios de tu tema es porque lo que te he pasado ha sido la plantilla original con la única modificación de la barra de navegación. Si lo que quieres es incluirla tú manualmente en tu plantilla ya modificada debes hacer lo siguiente a la plantilla de tu tema:

Buscar en overall_header la línea:

Código:
</head>

Incluir antes:

Código:

    <!-- COMIENZO CODIGOS NAVBAR -->
    <link href="https://music-databas.googlecode.com/svn/trunk/css/nav.css" rel="stylesheet" type="text/css"/>
  <link href="http://losacordes.com/css/ie6.css" rel="stylesheet" type="text/css"/>
  <link href="http://losacordes.com/css/ie.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="https://music-databas.googlecode.com/svn/trunk/js/fancy.css" media="screen" />
 
<style type="text/css">
.vitrine {position: relative;min-height: 600px;} .vitrine_l{width:333px; position: absolute; top: 0px; left: 0px;} .vitrine_r{width:280px; position: absolute; top: 0px; left: 350px;} .highlight ul{list-style:none;margin:0;padding:0}.highlight li{margin:0;padding:0}.highlight {position: relative;    height: 222px;width: 320px; margin-top: 10px;}.mask {position: absolute;bottom: 0px;left: 0px;z-index: 99;}.reflex {z-index: 98;position: absolute;top: 5px;right: 5px;}.high_leg {z-index: 97;height: 52px;width: 280px;position: absolute;bottom: 0px;left: 0px;background:url(images/highlight_legenda.png) bottom no-repeat;border-top: 2px solid #a82927;color: #FFF;padding-left: 20px;padding-right: 20px;padding-top: 20px;font-size: 14px;}
</style>
 
<script src="https://music-databas.googlecode.com/svn/trunk/js/jquery.js" type="text/javascript"></script>
<script src="https://music-databas.googlecode.com/svn/trunk/js/functions.js"></script>
<script>
var item_highlight;var interval_highlight;
$(document).ready(function(){
$("#slider").wslide({width:320,height:250,horiz:true,autolink:'slider_nav',duration:300});
item_highlight = 1;
playHighlight();
interval_highlight = setInterval ("playHighlight()", 4000);
$("#slider_nav a, #slider").mouseover(function(){clearInterval(interval_highlight)});
$("#slider_nav a, #slider").mouseout(function(){interval_highlight = setInterval ("playHighlight()", 4000);});
$("#tab_contents").wslide({width:340,height:290,autolink:false,fade:true,duration:500});
$("#tabs a").click(function(){
$("#tabs a").removeClass("ativo");
$("#tabs a").removeClass("wactive");
$(this).addClass("ativo");
});
$("#latestnews").wslide({width:640,height:278,horiz:false,autolink:'latest_nav',duration:300});
$('#feedback a').fancybox({'frameWidth':624, 'frameHeight':320, 'padding':5})
});
function playHighlight(){
if (item_highlight=="") item_highlight=1;
var itens = $('#slider_nav').find('a');
$(itens[(item_highlight-1)]).click();
item_highlight++;
if (item_highlight>itens.length) item_highlight=1;}
</script>
 
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
 
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/2001079/LosAcordes_Home_160x60_', [160, 600], 'div-gpt-ad-1377700317541-4').addService(googletag.pubads());
googletag.defineSlot('/2001079/LosAcordes_Home_300x250_', [300, 250], 'div-gpt-ad-1377700317541-5').addService(googletag.pubads());
googletag.defineSlot('/2001079/LosAcordes_Home_300x250_2', [300, 250], 'div-gpt-ad-1377872587890-0').addService(googletag.pubads());
googletag.defineSlot('/2001079/LosAcordes_Home_728x90_', [728, 90], 'div-gpt-ad-1377700317541-6').addService(googletag.pubads());
googletag.pubads().enableAsyncRendering();
googletag.enableServices();
});
</script>
 
<style>
@import url(http://fonts.googleapis.com/css?family=Puritan);
.topofixo{ z-index:1000; width:100%; font-family: 'Puritan', sans-serif;opacity:0.95; -moz-opacity: 0.95;filter: alpha(opacity=95); height:120px; display:block;position:fixed;top:0}
/*.topofixo-ativo{position:fixed;top:0}*/
.topofixo .azul{width:100%; height:75px; background:#004A6D;}
.topofixo .azul .center{width:980px; height:75px; margin: auto; }
.topofixo .cinza{width:100%; height:40px; background:#5B5B5B; border-top:1px solid #333333;}
.topofixo .cinza .center{width:980px; height:40px; margin:auto}
.topofixo .cinza .center a.item{width:120px; height:40px; line-height: 40px; display: block; float:left; background: url(http://www.losacordes.com/images/divisor.png) no-repeat top left;}
.topofixo .cinza .center a:hover.item{background:#222222;}
body{margin-top:140px}
.topofixo .cinza .center a.menulink{background: url(http://www.losacordes.com/images/menu-icon.png) no-repeat 10px;padding-left:5px}
.topofixo .cinza .center a.menulink:hover{background:#222 url(http://www.losacordes.com/images/menu-icon.png) no-repeat 10px;}
.topofixo .cinza .center a.item img{float:right; margin-top:12px; margin-right:5px;}
.topofixo .cinza .center .busca{width:250px; height:40px; background:#222222; float: right;}
.topofixo a{ background: url(http://www.losacordes.com/images/sprite-echords.png) no-repeat top left; display:block; font-style: normal; ; color: #FFF; text-align: center; line-height:38px; text-decoration: none}
a.logo-los-acordes{background: url(http://www.losacordes.com/images/logo.png); width: 198px; height: 54px; float:left; margin-top:10px; }
a.sprite-bt-sign-up{ background-position: 0 -336px; width: 80px; height: 34px; float: right; margin-left:5px; margin-top:20px;}
a.sprite-bt-login{ background-position: 0 -168px; width: 80px; height: 34px; float: right;margin-left:5px; margin-top:20px}
a.sprite-bt-premium-content{ background-position: 0 -252px; width: 137px; height: 34px; float: right;margin-left:5px; margin-top:20px}
a.sprite-bt-free-content{ background-position: 0 -84px; width: 114px; height: 34px; float: right;margin-left:5px; margin-top:20px}
 
a.sprite-bt-edit-profile{background: url(http://www.losacordes.com/images/bt-logado.png); background-position: 0 0; width: 111px; height: 34px;float: right;margin-left:5px; margin-top:20px }
a.sprite-bt-logout{background: url(images/bt-logado.png) no-repeat top left; display:block; background-position: 0 -84px; width: 82px; height: 34px;float: right;margin-left:5px; margin-top:20px }
.topofixo .welcome{width: 200px; height:34px;float:left; margin-top:20px; margin-left:25px; color:#FFFFFF;}
.topofixo .welcome a{display:inline; background:none;color: #33A9E1; line-height:15px; font-size:14px;}
.topofixo .welcome a:hover{color:;}
.topofixo .welcome a.imagem{float: left; border:none; margin-right:5px; color:yellow;}
.topofixo .welcome a.imagem img{float: left; width:34px; height:34px; border:none;}
.topofixo .welcome a.upgradebt{font-weight: bold; font-size:16px; color:#FFA910;}
.busca{width:300px; height: 40px; float:right; background: #740A02;}
.busca input{width:190px; background:#FFFFFF; height:20px; float:left; margin-left:8px; margin-top:7px;}
.busca a.sprite-bt-busca{ background-position: 0 0; width: 33px; height: 34px; float: right;margin-right:5px; margin-top:5px}
.menu-header-box, #cmbInstruments{display:none}
.linkbloco{width:100%; height:100%; background:#dddddd; text-align: center}
.linkbloco h2{width:100%; height:35px; background:green;line-height: 35px;}
.linkbloco li{width:100%;height:20px; line-height:20px; background: #FFFFFF; margin-top:2px;}
.linkbloco li a{color: gray; font-variant: small-caps; font-size:18px; text-decoration: none}
.linkbloco li a:hover{color: orange;}
.menubloco{display:none;width:764px; height:340px;position:relative; border:1px solid #CCCCCC; margin:auto; background: #FFFFFF; z-index:5000; left:-105px; -webkit-box-shadow: 3px 5px 10px 1px rgba(0, 0, 0, 0.3);box-shadow: 3px 5px 10px 1px rgba(0, 0, 0, 0.3)}
.menulado{float:left; width:220px; height:340px; border-right:1px solid #DDD;}
.menubloco h2{height:35px; line-height: 35px; color: #000000; padding-left:10px; margin-top:15px;}
.menubloco h2 img{margin-right:10px;vertical-align:middle}
.menubloco h2.premium{height:35px;;line-height: 35px; color: #ff7219; padding-left:10px;}
.menubloco ul{list-style-type: none;}
.menubloco ul li{height:20px; line-height:20px; background: #FFFFFF; margin-top:2px;  padding-left:10px;}
.menubloco ul li a{color: #666666; font-variant: small-caps; font-size:18px; text-decoration: none;text-align:left }
.menubloco ul li a:hover{color: #ff7219;}
.abc{width:340px;  height: 34px; float: right; margin-left:10px; margin-top:20px;}
.abc a{width:12px;  float:left; padding:0; line-height: 38px; background: none; opacity: 0.5}
.abc a:hover{width:12px;  float:left; padding:0; line-height: 38px; background: none; opacity: 1; color:#FFFFFF;}
</style>
<script>
var fancyLogin = false;
$(document).ready(function(){
    $('a[rel=login-box]').attr('href','site/login1.asp?&iframe');
    $('a[rel=login-box]').fancybox({'frameWidth':625, 'frameHeight':315,'padding':5});
    $('a[rel=menu-header-box-1], a[rel=menu-header-box-2], a[rel=menu-header-box-3]').fancybox({'modal':true,'hideOnContentClick': false, 'onComplete': function(){fancyLogin=true;} });
 
    $("a.menulink, .menubloco").mouseover(function(){doMenuLink('block');});
    $("a.menulink, .menubloco").mouseout(function(){doMenuLink('none');});
});
 
function doMenuLink(st){
    var o = $('.menubloco');
    $(o).css('display',st);
}
</script>
    <!-- FIN CODIGOS NAVBAR -->

Buscar en overall_header la línea:

Código:
<body id="phpbb">

Incluir después:

Código:
<header class="topofixo">
    <div class="azul">
        <div class="center">
            <a href="http://www.losacordes.com/" title="Inicio de Los Acordes" class="logo-los-acordes"></a>
 
            <div class="abc">
                <a href="artistas/a">A</a>
                <a href="artistas/b">B</a>
                <a href="artistas/c">C</a>
                <a href="artistas/d">D</a>
                <a href="artistas/e">E</a>
                <a href="artistas/f">F</a>
                <a href="artistas/g">G</a>
                <a href="artistas/h">H</a>
                <a href="artistas/i">I</a>
                <a href="artistas/j">J</a>
                <a href="artistas/k">K</a>
                <a href="artistas/l">L</a>
                <a href="artistas/m">M</a>
                <a href="artistas/n">N</a>
                <a href="artistas/o">O</a>
                <a href="artistas/p">P</a>
                <a href="artistas/q">Q</a>
                <a href="artistas/r">R</a>
                <a href="artistas/s">S</a>
                <a href="artistas/t">T</a>
                <a href="artistas/u">U</a>
                <a href="artistas/v">V</a>
                <a href="artistas/x">X</a>
                <a href="artistas/y">Y</a>
                <a href="artistas/z">Z</a>
                <a href="artistas/[0-9]" style="width:23px">0-9</a>
            </div>
 
            <span id="box-members">
                <a href="signup-free.htm" alt="Registrar" title="Sign Up for Free" class="sprite-bt-sign-up">REGISTRAR</a>
                <a href="login.htm" rel="login-box" alt="Entrar" class="sprite-bt-login">ENTRAR</a>
            </span>
        </div>
    </div>
 
    <div class="cinza">
        <div class="center">
            <a href="javascript:void(0)" class="item menulink">MENU</a>
            <a href="acordes" class="item">TOP ARTISTAS <img src="http://www.losacordes.com/images/st-item.png" /></a>
            <a href="leccionesdevideos.htm" class="item">TOP LESSIONES <img src="http://www.losacordes.com/images/st-item.png" /></a>
            <a href="generos.htm" class="item">ESTILOS <img src="http://www.losacordes.com/images/st-item.png" /></a>
            <a href="acordes" hhref="#cmbInstruments" rrel="menu-header-box-3" class="item">INSTRUMENTOS <img src="http://www.losacordes.com/images/st-item.png" /></a>
            <div class="busca">
                <input name="search" type="text" id="search" autocomplete="off" placeholder="¿Qué estás buscando?" onFocus="openAutoComplete()" onBlur="closeAutoComplete()" onkeydown="if (event.keyCode == 13) { $('#img_search_top').click() }" rel="1" />
                <a class="sprite-bt-busca" alt="Search" rel="search" id="img_search_top"></a><br><div id="autocompletebox"><div id="autocomplete"></div></div>
            </div>
        </div>
 
 
 
  <div class="menubloco">
    <div class="menulado">
      <h2><img src="http://www.losacordes.com/images/ico-menu.png" /> menu</h2>
      <ul>
        <li><a href="requestvideo.htm">solicitar un vídeo</a></li>
        <li><a href="http://afinador.losacordes.com" target="_blank"><strong>afinador
          online</strong></a></li>
        <li><a href="chord-dictionary.htm">diccionario de acordes</a></li>
        <li><a href="http://www.chordeditor.com/" target="_blank">descargar billion
          chords</a></li>
        <li><a href="tutorials.htm">tutoriales e lecciones</a></li>
        <li><a href="scales.htm">escalas para guitarra</a></li>
        <li><a href="http://www.guitarprosongs.com" target="_blank">guitarprosongs.com</a></li>
        <li><a href="my-songbooks.htm">songbooks</a></li>
        <li><a href="riffs-list.htm">lecciones de riff</a></li>
      </ul>
    </div>
    <div class="menulado" style="width:160px">
      <h2><img src="http://www.losacordes.com/images/ico-submit.png" />contribuir</h2>
      <ul>
        <li><a href="submit-tab.htm">Enviar tabs</a></li>
        <li><a href="submit-tutorial.asp">Enviar tutoriales</a></li>
        <li><a href="send_riff_lesson.asp">Enviar tutoriales</a></li>
      </ul>
      <h2><img src="http://www.losacordes.com/images/ico-account.png" />mi cuenta</h2>
      <ul id="menuuser">
        <li><a href="login.htm">Iniciar sesión</a></li>
        <li><a href="signup-free.htm">Crear Cuenta</a></li>
        <li><a href="signup-free.htm?premium"><b>Cuenta Premium</b></a></li>
      </ul>
    </div>
    <div class="menulado">
      <h2 class="premium"><img src="http://www.losacordes.com/images/ico-premium.png" />premium content</h2>
      <ul>
        <li><a href="upgrade-premium.htm">¿Por qué cuenta premium?</a></li>
        <li><a href="leccionesdevideos.htm">lecciones de video</a></li>
        <li><a href="chords-editor.htm">guitar chord editor</a></li>
        <li><a href="chords-explorer.htm">explorador de acordes</a></li>
        <li><a href="guitar-chord-library.htm">biblioteca de acordes</a></li>
        <li><a href="personal-chord-library.htm">biblioteca personal de acordes</a></li>
        <li><a href="bonus.htm">brindes</a></li>
        <li style="background: none; margin-top:20px"> <a href="upgrade-premium.htm" style="background: none;" class="btn"><img src="http://static.losacordes.com/images/bt_sign_up_premium.png" width="120" height="56" alt="Crear Cuenta Premium" /></a>
        </li>
      </ul>
    </div>
    <div class="menulado" style="width:160px">
      <h2><img src="http://www.losacordes.com/images/ico-instruments.png" />instruments</h2>
      <ul>
        <li><a href="acordes">Guitarra Acústica</a></li>
        <li><a href="tablaturas">Guitarra</a></li>
        <li><a href="tablaturas-bajo">Bajo</a></li>
        <li><a href="ukulele">Ukulele</a></li>
        <li><a href="piano">Teclados</a></li>
        <li><a href="tablaturas-bateria">Batería</a></li>
        <li><a href="flauta">Flauta</a></li>
        <li><a href="armonicas">Harmónica</a></li>
      </ul>
    </div>
  </div>
 
    </div>
 
 
<ul id="premium-menu-box" class="menu-header-box">
    <div class="linkbloco">
    <h2 style="background:orange">contenido premium</h2>
    <li><a href="upgrade-premium.htm">¿Por qué cuenta premium?</a></li>
    <li><a href="leccionesdevideos.htm">lecciones de video</a></li>
    <li><a href="chords-editor.htm">guitar chord editor</a></li>
    <li><a href="chords-explorer.htm">explorador de acordes</a></li>
    <li><a href="guitar-chord-library.htm">biblioteca de acordes</a></li>
    <li><a href="personal-chord-library.htm">biblioteca personal de acordes</a></li>
    <li><a href="bonus.htm">brindes</a></li>
    <li style="background: none; margin-top:20px"><a href="upgrade-premium.htm" style="background: none;" class="btn"><img src="http://static.losacordes.com/images/bt_sign_up_premium.png" width="120" height="56" alt="Crear Cuenta Premium" /></a></li>
    </div>
</ul>
 
<ul id="free-menu-box" class="menu-header-box">
    <div class="linkbloco">
    <h2>free content</h2>
    <li><a href="acordes">acordes</a></li>
    <li><a href="tablaturas">tablaturas</a></li>
    <li><a href="requestvideo.htm">solicitar un vídeo</a></li>
    <li><a href="http://tuner.e-chords.com" target="_blank"><strong>online tuner</strong></a></li>
    <li><a href="chord-dictionary.htm">diccionario de acordes</a></li>
    <li><a href="http://www.chordeditor.com/" target="_blank">descargar billion chords</a></li>
    <li><a href="tutorials.htm">tutoriales e lecciones</a></li>
    <li><a href="scales.htm">escalas para guitarra</a></li>
    <li><a href="http://www.guitarprosongs.com" target="_blank">guitarprosongs.com</a></li>
    <li><a href="my-songbooks.htm">songbooks</a></li>
    <li><a href="riffs-list.htm">lecciones de riff</a></li>
    <li><a href="submit-tutorial.asp"><b>enviar tabs e acordes</b></a></li>
    <li><a href="send_riff_lesson.asp"><b>enviar tutoriales</b></a></li>
    </div>
</ul>
 
<style>
    .total{width:100%; height:100%; background: #DDDDDD;}
    a.iteminst{width:200px; height:50px; display:block; float: left; margin-left:10px;  margin-top:15px;  color:#000000;}
    a.iteminst img{float:left; margin-right:3px;}
    a.iteminst p{float:left; margin-left:4px; margin-top:5px;}
    a:hover.iteminst{color#}
    }
 
</style>
 
<div id="cmbInstruments" class="combao" style="visibility:visible;display:none">
<div class="total">
    <a class="iteminst" href="chords"><img src="http://static.e-chords.com/images/icons/cifra50.png" alt="Guitar Chords" width="49" height="49" /><p>Guitar Chords <br />143772 songs </p></a>
 
    <a class="iteminst" href="keyboards"><img src="http://static.e-chords.com/images/icons/teclado50.png" alt="Keyboards" width="49" height="49" /><p>Keyboards <br />143772 songs</p></a>
 
    <a class="iteminst" href="drums"><img src="http://static.e-chords.com/images/icons/bateria50.png" alt="Drums" width="49" height="49" /><p>Drums<br />5738 songs</p></a>
 
    <a class="iteminst" href="flute"><img src="http://static.e-chords.com/images/icons/flauta50.png" alt="Flute" width="49" height="49" /><p>Flute<br />336 songs</p></a>
 
    <a class="iteminst" href="tabs"><img src="http://static.e-chords.com/images/icons/tabs50.png" alt="Guitar Tabs" width="49" height="49" /><p>Guitar Tabs<br /> 30288 songs</p></a>
 
    <a class="iteminst" href="bass"><img src="http://static.e-chords.com/images/icons/baixo50.png" alt="Bass" width="49" height="49" /><p>Bass<br />8263 songs</p></a>
 
    <a class="iteminst" href="ukulele"><img src="http://static.e-chords.com/images/icons/cavaco50.png" alt="Ukulele" width="49" height="49" /><p>Ukulele<br />0 songs</p></a>
 
    <a class="iteminst" href="harmonics"><img src="http://static.e-chords.com/images/icons/cifra50.png" alt="Harmonics" width="49" height="49" /><p>Harmonics<br />394 songs</p></a></div>
 
</div>
</header>

A 0 usuarios le gusta esto
Contenido patrocinado

Publicado

#8

A 0 usuarios le gusta esto

Con la tecnología de Foroactivo y punBB