[Tutorial] VBNavBar for MyBB 1.6.x [Traducido por Ignnacio]
Traído desde Mybb.com. Créditos: Flick (Quien puso el tema en Mybb.com) Comencemos con el tutorial: Los archivos que necesitaras para el tutorial:...

Traído desde Mybb.com.
Créditos: Flick (Quien puso el tema en Mybb.com)

Comencemos con el tutorial:

Los archivos que necesitaras para el tutorial:
-Std files for 1.6.x.zip
-functions.php
-class_templates.php

Los archivos están al final, pero aquí esta lo que debes hacer con ellos:

1. Subir functions.php en el directorio /inc
2. Subir [b]class_templates.php
en el directorio [/b]/inc
3. Subir las 21 imágenes en el directorio/images
4. Subir los 3 archivos .js en el directorio /jscripts
5. Subir el archivo vbnavbar.php en el directorio /inc/plugins
6. Subir vbnavbar.lang.php en el directorio /inc/languages/english y /espanol dependiendo de cual lenguaje uses.

*Asegúrate de subir bien los archivos en el directorio correcto para que no se produzcan errores.

*En los siguientes pasos utilizaremos las plantillas de el theme default de mybb, debe funcionar en todos los themes, a más que tengas otras configuraciones trata de hacerles una copia porque reemplazaremos.

Todas las indicaciones estarán en español.

Vamos a Plantillas/Tu Theme/Cabecera Header y borramos todo lo que tienes y reemplazamos por lo siguiente:

   <div id="header">
            <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
<br />

<!-- breadcrumb, login, pm info -->
<table class="tborder" cellpadding="$theme[tablespace]" cellspacing="$theme[borderwidth]" border="0" width="100%" align="center">
<tr>
<td class="trow1" width="100%">

<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">

<td>&nbsp;</td>
<td width="100%"><navigation></td>
</tr>
</table>

</td>


<if condition=$mybb->user['uid']> 0 <then>

<td class="trow1" valign="top" nowrap="nowrap">
<div class="smalltext">{$lang->welcome_back}<br />
<a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}<br />
{$lang->welcome_current_time}
</div>
</td>

<else />

<td class="trow1" nowrap="nowrap" style="padding:0px">

<!-- login form -->

<form action="{$mybb->settings['bburl']}/member.php" method="post">
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="{$mybb->settings['bburl']}" />
<input type="hidden" name="quick_login" value="1" />
<table cellpadding="0" cellspacing="3" border="0" class="trow1">
<tr>
<td class="smalltext">{$lang->username}</td>
<td><input type="text" name="quick_username" size="8" title="{$lang->vbnavbar_username}" class="textbox" value="{$lang->vbnavbar_username}" onfocus="this.value=''" tabindex="1" /></td>
<td class="smalltext"><label title="{$lang->remember_me_desc}"><input type="checkbox" class="checkbox" name="quick_remember" value="yes" tabindex="3" checked="checked" />{$lang->remember_me}</label></td>
</tr>
<tr>
<td class="smalltext">{$lang->password}</td>
<td><input type="password" name="quick_password" size="8" title="{$lang->password}" value="{$lang->password}" class="textbox" onfocus="this.value=''" tabindex="2" /></td>
<td><input type="submit" class="button" name="submit" style="font-weight:normal" value="{$lang->welcome_login}" tabindex="4" /></td>
</tr>
</table>
</form>
<!-- / login form -->

</td>

</if>

</tr>
</table>
<!-- / breadcrumb, login, pm info -->

<table cellpadding="5" cellspacing="0" border="0" width="100%" class="tvbnav" align="center">
<tr>
<td class="tcat" align="center">{$welcomeblock}</td>
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_index.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/index.php"><strong>{$lang->vbnavbar_index}</strong></a></td>
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_search.png" alt="" title="" class="vbottom" /><a href="{$mybb->settings['bburl']}/search.php" id="search" onclick="return openMenu(this)" class="popup_button">{$lang->toplinks_search} <img src="{$theme['imgdir']}/vbnb_popdown.gif" border="0" /></a></td>
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_member.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/memberlist.php"><strong>{$lang->toplinks_memberlist}</strong></a></td>
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_calendar.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/calendar.php"><strong>{$lang->toplinks_calendar}</strong></a></td>
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_help.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/misc.php?action=help"><strong>{$lang->toplinks_help}</strong></a></td>
{$admincplink}
{$modcplink}
<if condition=$mybb->user['uid']> 0 <then>
<td class="tcat" align="center"> <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"><strong>{$lang->welcome_logout}</strong></a></td><else /></if>
</tr></table>

<hr class="hidden" />
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
        {$pm_notice}
        {$bannedwarning}
        {$bbclosedwarning}
        {$unreadreports}
        {$pending_joinrequests}
<!-- header quick search form -->
<div class="menupop" id="search-popup">
<table cellpadding="4" cellspacing="1" border="0" class="tvbnavsearch">
<tr>
<td class="tcat">{$lang->toplinks_search}</td>
</tr>
<tr>
<td class="row">

<form method="post" action="{$mybb->settings['bburl']}/search.php">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="" />
{$gobutton}
</form>
</td>
</tr>
<tr>
<td class="menu_row"><a href="{$mybb->settings['bburl']}/search.php">{$lang->vbnavbar_advanced_search}</a></td>
</tr>
</table>
</div>

<!-- / header quick search form -->
<br />

Cabecera / header_welcomeblock_guest también reemplazaremos así que hagan copia, borren y pongan lo siguiente:
<img src="{$theme['imgdir']}/vbnb_register.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/member.php?action=register"><strong>{$lang->welcome_register}</strong></a>

Cabecera / header_welcomeblock_member, como en todos los pasos anteriores reemplazar
<img src="{$theme['imgdir']}/vbnb_usercp.png" alt="" title="" class="vbottom" /><a href="{$mybb->settings['bburl']}/usercp.php" id="usercp" onclick="return openMenu(this)" class="popup_button">{$lang->vbnavbar_user_cp} <img src="images/vbnb_popdown.gif" border="0" /></a>

<!-- user cp tools menu -->
<div class="menupop" id="usercp-popup">
<table cellpadding="4" cellspacing="1" border="0" class="tvbnavcp">

<tr><td class="tcat"><strong>{$lang->vbnavbar_quick_links}</strong></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_newposts.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/search.php?action=getnew" title="{$lang->welcome_newposts}">{$lang->welcome_newposts}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_daily.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/search.php?action=getdaily" title="{$lang->welcome_todaysposts}">{$lang->welcome_todaysposts}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_all.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/misc.php?action=markread" title="{$lang->vbnavbar_mark_read}">{$lang->vbnavbar_mark_read}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_buddy.png" alt="" title="" class="vbottom" /> <a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);" title="{$lang->welcome_open_buddy_list}">{$lang->welcome_open_buddy_list}</a></td></tr>

<tr><td class="tcat"><a href="{$mybb->settings['bburl']}/usercp.php" title="{$lang->vbnavbar_user_cp_full}"><strong>{$lang->vbnavbar_user_cp_full}</strong></a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_sig.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/usercp.php?action=editsig" title="{$lang->vbnavbar_edit_sig}">{$lang->vbnavbar_edit_sig}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_avatar.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/usercp.php?action=avatar" title="{$lang->vbnavbar_change_avatar}">{$lang->vbnavbar_change_avatar}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/usercp/profile.gif" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/usercp.php?action=profile" title="{$lang->vbnavbar_edit_profile}">{$lang->vbnavbar_edit_profile}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/usercp/options.gif" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/usercp.php?action=options" title="{$lang->vbnavbar_edit_options}">{$lang->vbnavbar_edit_options}</a></td></tr>

<tr><td class="tcat"><strong>{$lang->vbnavbar_misc}</strong></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_pm.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/private.php" title="{$lang->vbnavbar_view}">{$lang->welcome_pms}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/usercp/subscriptions.gif" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/usercp.php?action=subscriptions" title="{$lang->vbnavbar_view}{$lang->vbnavbar_sub_threads}">{$lang->vbnavbar_sub_threads}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/usercp/viewprofile.gif" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/member.php?action=profile&amp;uid={$mybb->user['uid']}" title="{$lang->vbnavbar_view}{$lang->vbnavbar_profile}">{$lang->vbnavbar_view}{$lang->vbnavbar_profile}</a></td></tr>

</table>
</div>

Cabecera / header_welcomeblock_member_admin, borrar y poner lo siguiente:
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_admincp.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/{$config['admin_dir']}/index.php"><strong>{$lang->welcome_admin}</strong></a></td>

Cabecera/ header_welcomeblock_member_moderator, borrar y poner lo siguiente:
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_modcp.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/modcp.php"><strong>{$lang->welcome_modcp}</strong></a></td>

Plantillas sin grupo/ headerinclude, borrar y poner lo siguiente:
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/vbnb_menu.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/vbnb_menu2.js"></script>
<!--[if lte IE 6]>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/vbnb_supersleight-min.js"></script>
<![endif]-->
{$stylesheets}
<script type="text/javascript">
<!--
    var cookieDomain = "{$mybb->settings['cookiedomain']}";
    var cookiePath = "{$mybb->settings['cookiepath']}";
    var cookiePrefix = "{$mybb->settings['cookieprefix']}";
    var deleteevent_confirm = "{$lang->deleteevent_confirm}";
    var removeattach_confirm = "{$lang->removeattach_confirm}";
    var loading_text = '{$lang->ajax_loading}';
    var saving_changes = '{$lang->saving_changes}';
    var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
    var my_post_key = "{$mybb->post_code}";
    var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}

Navegación/ nav, borrar y poner lo siguiente:
<div class="navigation">
<img class="vbottom" src="{$theme[imgdir]}/vbnb_navstart.gif" />{$nav}{$activesep}{$activebit}
</div>



Navegación/ nav_sep, borrar y poner lo siguiente:
&raquo;

Navegación/ nav_sep_active, borrar y poner lo siguiente:
<br /><img class="vbottom" src="{$theme[imgdir]}/vbnb_navend.gif" />

Lo siguiente debes Agregar una nueva hoja de estilo
Nombre de la hoja: vbnavbar.css
Seleccionen: Globalmente y Escribir mi propio código

En la hoja de estilo vbnavbar.css pongan lo siguiente:
/* Popup Menus */

.popup_button {
color: #FFFFFF;
text-align: right;
font-weight: bold;
padding: 3px;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 3px;
}

a.popup_button:link,
a.popup_button:visited,
a.popup_button:active,
a.popup_button:hover {
text-decoration: none;
color: #000000;
}

.popup_menu {
position: absolute;
border: 1px solid #000;
background: #ccc;
}

.popup_menu ul
{
margin:0px;
padding:0px;
list-style-type:none;
}

.popup_menu li
{
background: #fff;
margin: 1px;
padding: 0;

}

.popup_menu ul li a
{
display: block;
padding: 3px;
color: #000;
text-decoration: none;
}

* html .popup_menu ul li a {
display: block;
width: 100%;
}

.popup_menu a:hover {
background: #C7DBEE;
text-decoration: none;
color: #000;
}

.menupop {
background: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
display:none;
}

/* Navbar Menu */

.tvbnav {
background: #81A2C4;
width: 100%;
margin: auto auto;
border-top: 0px;
border-left: 1px solid #0F5C8E;
border-right: 1px solid #0F5C8E;
border-bottom: 1px solid #0F5C8E;
}

/* Navbar CP and Search */
.tvbnavcp{
background: ;
text-align: left;
}

.tvbnavsearch{
background: ;    
}

td.left{
text-align:left;
}

/* CSS Styling */
.vbottom{
vertical-align:bottom;
border: 0px;
}

Por ultimo tienes que activar el plugin VBNavBar.


Imagenes:
[Imagen: vbnavbar16_guest.png]
[Imagen: vbnavbar16_usercp.png]
[Imagen: vbnavbar16_search.png]

Demo Online:
http://www.landsofdivinity.com/

Créditos:
0.00000000000000000000000000000000000001% Ignnacio por Traducción al español.
Quacktacular Media
FamFamFam Silk Icons
24ways

[attachment=809][attachment=810][attachment=811]
Archivos Adjuntos

Muy bueno tio,gracias Smile
Muy bueno el tutorial Smile lo usare algún día Smile gracias por traducirlo ignacio Smile
Amigos segui el paso al pie de la letra lo comprobe y recontra volvi a probar y me sigue saliendo todo centrado y con algunas diferencias pueden ayudarme. plz esta es mi web.

http://www.gamers.tv.gg/

PD. recien estoy utilizando este tipo de foros.
Tu foro no funciona amigo.

Así no puedo ayudarte.
tengo el proble de que el texto y todo el contenido se me ve en el centro que me puede ayudar???
Hola segui el tutorial paso por paso, y creo que algo me salio mal :|

[Imagen: Dibujo.jpg]
Última modificación: 27 Feb, 2013, 7:06 am por naanoo.
Alguna demo¿? El link no funciona.
Colaboradores
ĐдrkGдtø TheZeuS storm Nafko naanoo Gustavo R. Finer Chandy
This forum uses Lukasz Tkacz MyBB addons.