Hola bueno ya habia echo un tuto de como colocar 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
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...
y listo... les deberia quedar algo asi...
[attachment=1292]
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 !!!
################################################
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
luego van a ACP > Estilos y plantillas > Estilos > tu_tema > global.css > Editar hoja en modo avanzado... y hasta el final pegan esto...
y con eso deberia volver el prostats al footer...
################################################
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...
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
################################################
vayan aqui casi identico a sideboxes
quedara asi
[attachment=1280]
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">
<!--start: primera 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>
<!--end: primera caja-->
<br />
<!--start: segunda 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>
<!--end: segunda 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-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: left;
width: 24%;
margin: 0px 0px 10px 10px;
}
.box3 {
padding: 5px 2px 2px 2px;
border: 1px solid #d0d0d0;
}
y listo... les deberia quedar algo asi...
[attachment=1292]
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 !!!
################################################
ProStats
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 {
clear: both;
}
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
}
################################################
Para dejarlo casi identico a SideBoxes
vayan aqui casi identico a sideboxes
quedara asi
[attachment=1280]
Última modificación: 10 Aug, 2012, 5:24 pm por xxyogaxx.