[Tutorial] VBNavBar for MyBB 1.6.x [Traducido por Ignnacio]

Ignnacio 19 Jan, 2011, 7:04 pm

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:

Código:
<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:

Código:
<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

Código:
<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:

Código:
<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:

Código:
<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:

Código:
<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:

Código:
<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:

Código:
&raquo;

Navegación/ nav_sep_active, borrar y poner lo siguiente:

Código:
<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:

Código:
/* 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]

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]

Chandy 19 Jan, 2011, 8:14 pm

Muy bueno tio,gracias Smile

Gustavo R. 19 Jan, 2011, 8:21 pm

Muy bueno el tutorial Smile

lo usare algún día Smile

gracias por traducirlo ignacio Smile

[Imagen: http://i.imgur.com/l7Qimoa.png]

ĐдrkGдtø 4 Feb, 2011, 9:11 am

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.

TheZeuS 5 Feb, 2011, 12:39 pm

Tu foro no funciona amigo.

Así no puedo ayudarte.

Nafko 29 Jul, 2011, 12:18 am

tengo el proble de que el texto y todo el contenido se me ve en el centro que me puede ayudar???

naanoo 27 Feb, 2013, 7:06 am

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.

Finer 27 Feb, 2013, 10:53 pm

Es porque tenes que activar el plugin Wink

que pusiste con los archivos que te vino.

[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]

storm 17 Feb, 2014, 6:22 am

Alguna demo¿? El link no funciona.