[Tutorial] VBNavBar en MyBB 1.6.x

Ignnacio_mybb_import8182 19 Jan, 2011, 7:16 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=1840][attachment=1841][attachment=1842]

Última modificación: 20 Jan, 2011, 2:11 am por Cluster.

Maxii_mybb_import8095 19 Jan, 2011, 7:21 pm

Sencillamente, no me gusta esa barra, nada de vBulletin me gusta, lo peor es el AdminCP XDDDD

Última modificación: 20 Jan, 2011, 3:33 am por Aeroxis.

nentab 20 Jan, 2011, 2:13 am

A mi no me desagrada, gracias por la traducción Ignnacio! Big Grin

Night~ 20 Jan, 2011, 7:11 am

En realidad, es muy bueno ese menú, siempre me ah interesado ^^.
Prefiero hacerlos yo por el diseño y eso pero esta de aquí queda muy bien si la usas con ese cuadro del panel (el que uso para algunos de mis themes)

Jaizu 18 May, 2011, 8:34 am

Eso me interesa, pronto recobraré mi nombre de usuario de zobyHost y seguro lo pondré(que torpeza xD)

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

Jaizu 5 Sep, 2011, 1:24 pm

Mmm
Pues la barra está medio mal,más bien la primera plantilla,falta parte del div container y luego adaptarla a tu header anterior,vamos,hacer una copia e ir pasando.
Saludos!

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

waylayer 15 Sep, 2011, 7:58 pm

x3 me parece divertido intentarlo hehe voy a ver si como dicen arriba tiene fallas y tambein veré que tanto peudo sacarle provecho con mi theme x3

FrancoBov_mybb_import8449 22 Nov, 2011, 1:04 pm

Si hago este tuto para el theme MyClean, funciona? o tengo que configurar otras cosas? porque veo que tienen distintos menú con respecto al theme default. Gracias.

nentab 22 Nov, 2011, 1:25 pm

(22 Nov, 2011, 1:04 pm)FrancoBov escribió: Si hago este tuto para el theme MyClean, funciona? o tengo que configurar otras cosas? porque veo que tienen distintos menú con respecto al theme default. Gracias.

Pues la verdad es que no lo sé porque este tutorial tiene mucho código. Habría que probar para saberlo.

Jaizu 22 Nov, 2011, 2:20 pm

#10

Sería mejor que alguien sacase el código e_e
Si tengo lo tiempo lo hago Smile

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

Actualización: [Tutorial] VBNavBar en MyBB 1.6.x

Ignnacio_mybb_import8182 19 Jan, 2011, 7:16 pm

Maxii_mybb_import8095 19 Jan, 2011, 7:21 pm

nentab 20 Jan, 2011, 2:13 am

Night~ 20 Jan, 2011, 7:11 am

Jaizu 18 May, 2011, 8:34 am

Jaizu 5 Sep, 2011, 1:24 pm

waylayer 15 Sep, 2011, 7:58 pm

FrancoBov_mybb_import8449 22 Nov, 2011, 1:04 pm

nentab 22 Nov, 2011, 1:25 pm

Jaizu 22 Nov, 2011, 2:20 pm