• URL del foro: http://www.collisiongamers.com/forum
  
• Versión del foro: 1.6.3
  
• Actualización: 1.6.3
  

Estaba viendo la web de Audentio que de por cierto es muy parecida a The Cure, y la navegación del foro me encantó..

[Imagen: 5ZgjQ.png]

Dejo el link de su foro: http://www.audentio.com/community/forum/

Vi un poco el código cuente y las imágenes, me encantaría lograr lo mismo en mi foro.. Osea que la navegación quede por encima del container tal cual está en su web.. y si se puede separar el conteiner del header.. en fin, les dejo las capturas:

[Imagen: lHklr.gif]
[Imagen: DMYBP.gif]
[Imagen: xdX7N.gif]
[Imagen: Si2ns.jpg]

Este creo que es el código, ami no me funcionó.. creo que debe estar mal o me olvidé de algo.

.navigation {padding:10px; background:#d6ebfc url(images/gaming-jam/heading_grad.jpg) 0 -250px repeat-x; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px;-moz-border-radius-topleft: 6px;-moz-border-radius-topright:6px; border-top-left-radius:6px; border-top-right-radius:6px; border-bottom:1px solid #d0d0d0;  }
.navigation ul {color:#fff; font-size:1em; margin-left:-1px; font-weight:bold; height:28px; text-shadow:0 -1px rgba(255,255,255,1); background:url(images/gaming-jam/breadcrumb_right_light.gif) 100% 0 no-repeat; clear:both;  }
.navigation .breadcrumb_left {background:url(images/gaming-jam/breadcrumb_left_light.gif) 0 0 no-repeat; height:28px;  } 
.navigation li {float:left;height:28px; color:#006cb1; } 
.navigation li a {color:#454545; padding-left:15px; margin-left:-13px; background:url(images/gaming-jam/breadcrumb_light.gif) no-repeat 0 0; display:block; text-decoration:none;  }
.navigation li.bread_home {margin:0;padding:0}
.navigation li.bread_home a:hover {margin-left:0; background:url(images/gaming-jam/breadcrumb_light.gif) -39px -62px no-repeat; padding-left:0px; width:39px; height:28px; left:0; display:block;  }
.navigation li.bread_home a span {background:0; padding:7px 20px 6px 6px;  }
.navigation li a span {display:block; padding-right:25px; padding-left:10px; background:url(images/gaming-jam/breadcrumb_light.gif) no-repeat 100% 0;  }
.navigation li a:hover {background-position:0 -32px; text-shadow:#0069aa 0px -1px 0px; position:relative; left:-1px; color:#fff;  }
.navigation li a:hover span {background-position:100% -32px; padding-left:11px; padding-right:24px;  }
#breadcrumb .breadcrumb_main {background:#a0b9d3 url(images/gaming-jam/breadcrumb_main_light.gif) 0 0 repeat-x; height:28px;  }
#breadcrumb a {color:#FFFFFF; outline:none; text-decoration:none;  }
#breadcrumb li.bread_home a {margin-left:0; background:url(images/gaming-jam/breadcrumb_light.gif) 0 -62px no-repeat; padding-left:0px; width:39px; height:28px; display:block;  }
#breadcrumb li span {display:block; padding:7px 20px 6px 6px;  }

Saludos!

Vaya, recién abierto.

Quizás no te funcionó porque a decir de ellos no es sistema MyBB, sino un Custom System
Vamos a ver que tal les funciona.



Edit
Ah vaya, ya ví lo que quieres decir. No debería ser tan difícil

Además del cambio en el CSS, ¿modificaste la plantilla correspondiente?

Estaba modificando el tema en sí, vi la plantilla (creo) y no entendí mucho.. lo apliqué en el tema y las imágenes no se me ven.

Reemplacé en el tema .navitagion por esto y no me funcionó.. sinceramente no tengo idea de como adaptarlo para MyBB, creo que por eso no me anda..

Se ve muy bien ese .navigation.

Gracias por tu respuesta!

Es muy fácil adaptarlo, tan sólo es ver el css, pero no crees que es inmoral copiarle la barra?

Yo te ayudo, pero no sé...

Aparte de la imagen que haz puesto las 3 primeras son las del nav las demás son un sprite.

Si puedes ayudarme estaría sumamente agradecido ya que es algo que estuve intentando y todavía no me ha salido. Esta barra la he visto en otro tema pero es un poco básica y no está bien hecha como esta.
No es para comercializar ni nada, es para el tema de mi foro que estoy trabajando.. traté de arreglarme solo lo mas que pude pero esto es algo que no me sale.

Acá dejo una captura:

[Imagen: s7L6F.png]

Me encantaría aplicar la otra barra para reemplazar esta, aparte que combina con el estilo.

Saludos!

Mira si agregarla es muy fácil, encima me haz facilitado el code xDD
Te ayudo con la primera, pero aunque sea deja un copyright de Audentio en el html por ejemplo:
<!-- &copy; Audentio --> o algo así, si pones eso al menos tienes principios y te ayudaría encantado

Si, y de hecho en mi foro tengo instalado un tema de Audentio y ahora mismo estoy modificando otro tema de Audentio, obviamente siempre respetando el copyright.. no tengo problemas por eso, de hecho no me adjudico los temas de mi foro, solo los modifico a mi gusto..

[Imagen: 0jkVS.png]

Gaming Jam viene con un navigation personalizado pero no es de mi agrado.

Vale pues dame el HTML del nav xD y te lo hago.

Muchisimas gracias!

Al HTML del nav, te refieres a esto?

<template name="nav" version="1601"><![CDATA[<div class="navigation">
<a href="{$mybb->settings['bburl']}/index.php" class="home"></a>{$nav}{$activesep}{$activebit}
</div>]]></template>
<template name="nav_sep" version="1601"><![CDATA[<div class="sep"></div>]]></template>
<template name="nav_sep_active" version="1601"><![CDATA[<div class="sep"></div>]]></template>


Si no es eso tengo esto en global.css:
.navigation .home { width:30px; height:35px; float:left; background:url(images/gaming-jam/nav-home.jpg) top left no-repeat; display:block; margin:0 -10px 0 0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
.navigation .sep { width:16px; height:36px; display:block; margin:0 5px; background:url(images/gaming-jam/nav-sep.jpg) top left no-repeat; }
.navigation .active,.navigation a,.navigation .sep { float:left; }
.navigation a:link { text-decoration:none; }
.navigation a:visited { text-decoration:none; }
.navigation a:hover,.navigation a:active { text-decoration:none; }
.navigation .active { color:#959595; }


Tengo esas dos cosas, son las que necesitás? Saludos y nuevamente gracias!

#breadcrumb{padding:10px;background:#eaeaea url(images/gradients.jpg) 0 -400px repeat-x;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom:1px solid #d0d0d0;}
#breadcrumb ul{color:#fff;font-size:1em;margin-left:-1px;font-weight:bold;height:28px;text-shadow:0 -1px rgba(255,255,255,1);background:url(images/breadcrumb_right_light.gif) 100% 0 no-repeat;clear:both;}
#breadcrumb .breadcrumb_left{background:url(images/breadcrumb_left_light.gif) 0 0 no-repeat;height:28px;}
#breadcrumb .breadcrumb_main{background:#a0b9d3 url(images/breadcrumb_main_light.gif) 0 0 repeat-x;height:28px;}
#breadcrumb li{float:left;height:28px;color:#006cb1;}
#breadcrumb a{color:#FFFFFF;outline:none;text-decoration:none;}
#breadcrumb li a{color:#454545;padding-left:15px;margin-left:-13px;background:url(images/breadcrumb_light.gif) no-repeat 0 0;display:block;text-decoration:none;}
#breadcrumb li.bread_home{margin:0;padding:0}
#breadcrumb li.bread_home a{margin-left:0;background:url(images/breadcrumb_light.gif) 0 -62px no-repeat;padding-left:0px;width:39px;height:28px;display:block;}
#breadcrumb li.bread_home a:hover{margin-left:0;background:url(images/breadcrumb_light.gif) -39px -62px no-repeat;padding-left:0px;width:39px;height:28px;left:0;display:block;}
#breadcrumb li.bread_home a span{background:0;padding:7px 20px 6px 6px;}
#breadcrumb li span{display:block;padding:6px 20px 6px 6px;}
#breadcrumb li a span{display:block;padding-right:25px;padding-left:10px;background:url(images/breadcrumb_light.gif) no-repeat 100% 0;}
#breadcrumb li a:hover{background-position:0 -32px;text-shadow:#0069aa 0px -1px 0px;position:relative;left:-1px;color:#fff;}
#breadcrumb li a:hover span{background-position:100% -32px;padding-left:11px;padding-right:24px;}

Guarda eso en tu css y guarda todas las imágenes en tu carpeta "images" (No sé de donde haz sacado ese css)
Y decía el HTML no al XML xDD Pero bueno.
Plantilla nav:

<!-- Implementation by Gypaete - Karyuu, original idea &copy; Audentio --><div id="breadcrumb">
	<div class="breadcrumb_main">
		<div class="breadcrumb_left">
<ul>
<li class="bread_home"><a href="http://http://www.collisiongamers.com/forum/" title="Home"></a></li>
{$nav}{$activesep}{$activebit}										
</ul>
        </div>
	</div>
</div>

Plantilla nav_bit:

<li><a href="{$navbit['url']}"><span>{$navbit['name']}</span></a></li>

Plantilla nav_bit_active:

<li><span>{$navbit['name']}</span></li>

Prueba a ver como te queda y me pones una cap a ver.