[MOD] Las categorias de los foros en Pestañas
bueno, otra vez con mis modificaciones geniales xD... esta vez con una modificacion que labrocca me inspiro ya que este es un plugin de paga, pero y...

bueno, otra vez con mis modificaciones geniales xD...
esta vez con una modificacion que labrocca me inspiro ya que este es un plugin de paga, pero yo lo keria sin pagar y saque esta modificacion xD...

1° vayan a su plantilla Index y despues de {headerincluide} pongan lo siguiente:
Código PHP:
<script type="text/javascript" src="http://www.generalzone.net/foro/jscripts/tabcontent.js"></script

2° despues vayan a su plantilla "forumbit_depth1_cat" y al principio ponen este codigo: <div id="tabmenu_{$forum['fid']}"> y al final el </div>

3° vuelvan a su plantilla Index y pongan antes de {$forums}
Código PHP:
<ul id="menutabs" class="shadetabs"><li><a href="#" rel="tabmenu_136" rev="" class="selected">algo aqui</a></li></ul
y despues de {$forums} pongan esto xD
Código PHP:
<script type="text/javascript">
<!--
//
var myflowers=new ddtabcontent("menutabs")
myflowers.setpersist(true)
myflowers.init()
-->
</
script

como en los ficons cada id de las categorías ira en tabmenu_(id del foro)

y a cada categoria agregaran otro <li>,, si no entendieron este paso ahorita lo explico mejor o cualquier duda respondo xD

ahora le dan el estilo Big Grin
van a su set css, global.css y al final agregan:
Código:
.shadetabs{
padding: 0 10px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Arial;
list-style-type: none;
width:100%;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
color: #000000;
}

.shadetabs li a:hover{
text-decoration: underline;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background:#000000;
color: #ffffff;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontent{
display:none;
}

y lito Big Grin un demo de como quedaria dale click aqui aqui
GeneralzOne.NeT Foros

Creditos ArmyZ Productions © 2010 algunos derechos reservados, por favor de no postear este tutorial en otro foro sin consentimiento mio Big Grin y la idea a Labrocca, si hay algún problema con mybb-central ps eliminan el tema, no kiero problemas xD... y que quede claro que este no sustituye al plugin de mybb-central ya que ese es mas facil de poner y administrar xD...

por cierto si quieren soporte y ayuda webmaster Premium vayan a la zona webmaster de GeneralzOne.NeT y ahi pogan sus dudas...
no entiendo para que sirve S:
Muchas gracias!
Lo has hecho porque te lo pedí por el chat de Gz Tongue

Deseaba saber como hacer esto.


(9 Jan, 2010, 7:34 am)pelayov escribió: no entiendo para que sirve S:
Ves a www.generalzone.net, ves a los foros y verás que solo muestra una categoría.
Y que arriba pone:
Ocio, Entretenimiento, etc.(Los nombres de distintas categorías)
Das clic sobre una de esas pestañas y solo muestra esa categoría que has marcado.
Creo que lo hace todo más ordenado.

Una pregunta ArmyZ, sobre el estilo de las pestañas desde global.css
Se podría hacer que las pestañas fuesen transparentes, osea que solo se viese las letras y se transparentará el thead, o el tcat de abajo. Y que cuando pongas el ratón encima se ponga de otro color, como en más oscuro.
(9 Jan, 2010, 10:05 am)dennis_ariel_15 escribió:
(9 Jan, 2010, 4:15 am)BlackFox escribió: armyz, vos como siempre luciendote con tus tutos y nuevas idea (Y) , bien ai en pasarlo , igual siempre tarde o temprano , massi o ariel te lo ivan a copiar XD

yo uso el plugins al igual q armyz, el me dijo, lo que es tabcontent.js y despues vayan a su plantilla "forumbit_depth1_cat" y al principio ponen este codigo: <div id="tabmenu_{$forum['fid']}"> y al final el </div> eso esta en el tuto del plugins.....

asi que no digas las cosas antes de saber

primero yo no uso plugin xD,, segundo yo no te dije nada y ademas donde esta esa cosa esta en ingles... y ademas no lo explica como yo, ellos no te daran soporte y no entiendes nada....

y Gracias blackfox, y es muy cierto lo que dices xd...
(8 Jan, 2010, 9:15 pm)ArmyZ escribió: 1° vayan a su plantilla Index y despues de {headerincluide} pongan lo siguiente:
Código PHP:
<script type="text/javascript" src="http://www.generalzone.net/foro/jscripts/tabcontent.js"></script

No sería mejor que adjuntes aquí el archivo .js y que se ponga en la carpeta jscripts?
Así para que cada quien tenga su fuente. Wink

Seria así:
Código PHP:
<script type="text/javascript" src="{$mybb->settings['bburl']/jscripts/tabcontent.js"></script> 

Saludos, buen tuto. Big Grin

PD: Me puedes enseñar un screenshot sobre el resultado final de este tuto? pls. Smile
@angelbg
jejej angelbg, es logico que tengan que hacer eso, y no lo adjunte para que se les fuera mas facil hacerlo en su foro ya que da weba bajarlo y subilo y todo ese pex...

@Aeroxis
y Aeroxis lo siento, eske cuando hiciste tu post yo estaba haciendo el de abajo y no lo vi jeje xD... el codigo css podria ser algo asi,,, la verdad no se que color sea tu thead ni tu tcat xD pero ahi prueba si no modificalo ps
Código:
.shadetabs{
padding: 0 10px;
margin-left: 0;
margin-top: 1px;
margin-bottom: -10;
font: bold 13px Arial;
list-style-type: none;
width:100%;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
color: #000000;
background: transparent;
}

.shadetabs li a:hover{
text-decoration: underline;
background: #000000;
color:#ffffff;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background:#000000;
color: #ffffff;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontent{
display:none;
}

Y ya saben si quieren ver un ejemplo de como quedaría esta modificación en vivo vayan a http://www.generalzone.net/foro/
superman te la mandaste este si que es buen aporte con este te luciste Espero que no tener problemas ya que mi foro tiene bastantes categorias
gracias y +1 rep.
se te olvido esto
Código:
<script type="text/javascript">
<!--//
var myflowers=new ddtabcontent("menutabs")
myflowers.setpersist(true)
myflowers.init()
-->
</script>
@Himura
gracias man jeje sis e me olvido esque andaba apurado y no me di cuenta que faltaba eso n_n
Usé el tutorial y me sirvió perfectamente, peeero creo que esto tiene un pequeño error. Cuando elijes una pestaña, se queda permanente hasta que la cambies.
Ejemplo: Si abres la web, escojes la segunda pestaña, cierras el navegador y abres de nuevo la web, sale elejida la segunda pestaña.

Cómo se hace para que salga la primera pestaña por defecto?
(12 Jan, 2010, 10:51 am)nodba escribió: Usé el tutorial y me sirvió perfectamente, peeero creo que esto tiene un pequeño error. Cuando elijes una pestaña, se queda permanente hasta que la cambies.
Ejemplo: Si abres la web, escojes la segunda pestaña, cierras el navegador y abres de nuevo la web, sale elejida la segunda pestaña.

Cómo se hace para que salga la primera pestaña por defecto?

lo mismo pasa con el perfil bulletin, creo usan el mismo script