SoporteMyBB tiene ya 1488 temas de soporte resueltos, de un total de 2325. 29 todavía están por resolver y 808 han quedado obsoletos.

[Tutorial] Index con Boxes [Version 'div']
Usuario(s) navegando en este tema: 1 invitado(s)
 
Calificación:
  • 1 votos - 5 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Enviar respuesta 

Benderv
Miembro novato
Miembros

Sin conexión Chile Hombre
Temas: 3
Mensajes: 11
Reputación: 4
Registro en: Apr 2011
30-07-2012 10:20 PM
(Este mensaje fue modificado por última vez en: 31-07-2012 05:05 AM por Bender.)
Regístrate en SoporteMyBB para eliminar este anuncio
Hola bueno ya habia colocado boxes en el index sin plugins... estaba echo con tablas y tenia un par errores... asi que hize otro pero con DIVs

ok el codigo va asi...

ACP > Estilos y plantillas > plantillas > tu_tema > index > index...

y buscan {$forums}... lo borran y copian este codigo


Código PHP:
<div class="box1">
{
$forums}
</
div>

<
div class="box2">
<!--
startprimera caja-->
<
div class="thead">
<
div class="box3" align="center">
<
strong>NOMBRE DEL RECUADRO</strong>
<
div class="trow1">

TEXTO O CODIGO A MOSTRAR EN EL RECUADRO

</div>
</
div>
</
div>
<!--
endprimera caja-->
<
br />

<!--
startsegunda caja-->

<
div class="thead">
<
div class="box3" align="center">
<
strong>NOMBRE DEL 2º RECUADRO</strong>
<
div class="trow1">

AQUI AGREGAN LO QUE QUIERAN

</div>
</
div>
</
div>
<!--
endsegunda caja-->
</
div

y guardan...

luego van a ACP > Estilos y plantillas > Estilos > tu_tema > global.css > Editar hoja en modo avanzado... y hasta el final pegan esto...


Código PHP:
.box1 {    
width:74%;
float:left;
}
        
.
box2 {    
-
webkit-border-radius10px;
-
moz-border-radius10px;
border-radius10px;
floatleft;
width24%;
margin0px 0px 10px 10px;
}

.
box3 {    
    
padding5px 2px 2px 2px;
    
border1px solid #d0d0d0;


y listo... les deberia quedar algo asi...


   

a mi parecer queda mejor que con las tablas que habia echo antes...

Nota: para que despues no digan que las imagenes les descuadran la caja... pongan las imagenes con width="100%" al igual que los <iframe>

Nota 2: Si notan algun error en el codigo ... o algo que se pueda mejorar les agradeceria que me lo hicieran saber !!! Gran sonrisa



################################################



si estan usando el plugin ProStats en el footer y se les deforma el foro o el prostats se les mueve al lado derecho del foro deberan agregar un par de lineas extras...



ACP > Estilos y plantillas > plantillas > tu_tema > index > index...


buscan ... {$ps_footer_index} ... (esta justo despues del codigo del boxes)

y reemplazan por esto

Código PHP:
<div class="extra">
{
$ps_footer_index}
</
div

luego van a ACP > Estilos y plantillas > Estilos > tu_tema > global.css > Editar hoja en modo avanzado... y hasta el final pegan esto...

Código PHP:
.extra {
    
clearboth;


y con eso deberia volver el prostats al footer...




################################################


Cambiar color de letra


Si se fijan en la imagen que adjunte, en el sugundo box no sale nada escrito, pero si ven el codigo veran que dice "AQUI AGREGAN LO QUE QUIERAN" ... bueno no se ve porque el fondo es blanco y la letra es blanca...

solucion...

en el codigo que va en el index busquen <div class=trow1> y cambien el 1 por 3 quedando <div class=trow3> (deben cambiarlo en cada caja que tengan)



luego van a ACP > Estilos y plantillas > Estilos > tu_tema > global.css > Editar hoja en modo avanzado... y hasta el final pegan esto...

Código PHP:
.trow3{    
    
background-color#ffffff;
    
color#000;
}

.
trow3 a:link, .trow3 a:visited, .trow3 a:hover, .trow3 a:active{
color#000000;


y listo... la caja tendra el fondo blanco y los enlaces y links seran negros

pero ahi ustedes tambien pueden jugar con los colores que les gustan


Código:
.trow3{    
    background-color: #ffffff; <--- cambia color de fondo
    color: #000; <--- cambia color de letra
}

.trow3 a:link, .trow3 a:visited, .trow3 a:hover, .trow3 a:active{
color: #000000; <--- cambia color de links
}
Cita este mensaje en tu respuesta
3
XEDEv
JAMPS
Equipo de soporte

Sin conexión Argentina Hombre
Temas: 22
Mensajes: 525
Reputación: 65
Registro en: Sep 2011
31-07-2012 01:17 AM
Buen tutorial, ahora entendí a que te referías en el otro tema xD
Firma de XEDE
[Imagen: 243firma_torneo_JAMPS2.png]
Cita este mensaje en tu respuesta
0
Benderv
Miembro novato
Miembros

Sin conexión Chile Hombre
Temas: 3
Mensajes: 11
Reputación: 4
Registro en: Apr 2011
31-07-2012 01:29 AM
wuajajajajaj algo tarde pero mejor asi... prefiero estas cajas que el plugin Sonrisa
Cita este mensaje en tu respuesta
0
Missyv
Miembro novato
Miembros

Sin conexión Spain Mujer
Temas: 3
Mensajes: 15
Reputación: 0
Registro en: May 2013
21-05-2013 07:45 PM
Una pregunta..Antes de colocar los códigos hay que borrar lo que vienen por defecto o simplemente se pegan bajo estos, esa es la duda que me ha surgido, es para no cagarla, de todas formas, suelo pegar los codigos originales por defecto en blog de notas, por si meto la pata tenerlos a mano.
Firma de Missy
[Imagen: bannerdeafiliado2.jpg]

Venid a mi nubes,alzaos cual faltal tormenta para destriparlas,que el manto nocturno sea testigo y destruya a quienes se resisten y buscan mi dolor. Que con su sangre yo me lave, por la belleza eterna, yo os pido.
Cita este mensaje en tu respuesta
0
Jaizuv
@DepresivoOFF
Miembros

Sin conexión Spain Hombre
Temas: 60
Mensajes: 499
Reputación: 32
Registro en: Dec 2010
Ayer 12:47 AM
¿Por qué lo haces con divs? MyBB funciona con tablas.
Y @Missy, en el tutorial especifica en cada caso.
Y siempre puedes guardar las plantillas en .txt antes de eidtar.
Firma de Jaizu
¡Pásate por mi Foro! http://omnes-tecno.multiloads.com
Cita este mensaje en tu respuesta
0

Enviar respuesta 

Posibles temas similares...
Tema: Autor Respuestas: Vistas: Último mensaje
  [1.4.x/1.6.x] [Tutorial] Botón para crear nuevos temas desde el index Bour Elvan 7 1,315 11-05-2012 06:14 PM
Último mensaje: Gypaete_k

Salto de foro: