MyBB-Es.com     Personalización y configuración de los foros MyBB     Tutoriales / Guías    

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

Ignnacio Ausente   19 Jan, 2011, 7:04 pm
#1
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 />
None

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>
None

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>
None

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>
None

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>
None

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}
None

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



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

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

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;
}
None

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]
  
Chandy   19 Jan, 2011, 8:14 pm
#2
Muy bueno tio,gracias Smile
  
 Responder
Gustavo R.   19 Jan, 2011, 8:21 pm
#3
Muy bueno el tutorial Smile lo usare algún día Smile gracias por traducirlo ignacio Smile
[Imagen: l7Qimoa.png]
  
 Responder
ĐдrkGдtø   4 Feb, 2011, 9:11 am
#4
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.
  
 Responder
TheZeuS   5 Feb, 2011, 12:39 pm
#5
Tu foro no funciona amigo.

Así no puedo ayudarte.
  
 Responder
Nafko   29 Jul, 2011, 12:18 am
#6
tengo el proble de que el texto y todo el contenido se me ve en el centro que me puede ayudar???
  
 Responder
naanoo   27 Feb, 2013, 7:06 am
#7
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.
  
 Responder
Finer   27 Feb, 2013, 10:53 pm
#8
Es porque tenes que activar el plugin Wink que pusiste con los archivos que te vino.
[Imagen: tumblr_nj9sv13aff1tga1sco4_r1_500.gif]
  
 Responder
storm   17 Feb, 2014, 6:22 am
#9
Alguna demo¿? El link no funciona.
  
 Responder
Tema anterior      Tema siguiente
  
 Contáctanos
 Equipo del foro
 MyBB-Es.com - Soporte para los Foros MyBB en Español
 Volver arriba
 Marcar foros como leídos
 Sindicación RSS
 Ayuda
Powered By MyBB, © 2002-2025 MyBB Group.
Made with by Curves UI.