Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
Index con Boxes [Version 2]
MyBB-Es.com     Personalización y configuración de los foros MyBB     Tutoriales / Guías    

Index con Boxes [Version 2]

Páginas (4): 1 2 3 4   
bender   30 Jul, 2012, 1:05 pm
#1
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

Código PHP:
<?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:
<?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 !!! Big Grin

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


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:
<?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:
<?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:
<?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.
  
 Responder
ZioGuE   30 Jul, 2012, 1:19 pm
#2
Buen tutorial Wink siempre es mejor modificarlo por uno mismo que hacerlo con plugins cuando se trata de esta clase de cosas. + REP
  
 Responder
Cluster   30 Jul, 2012, 1:56 pm
#3
esta lindo, no tiene nada fuera de lo comun pero esta lindo Smile
:)
  
 Responder
Finer   30 Jul, 2012, 2:10 pm
#4
Me gusta seguro lo voy a usar ^^
[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
  
 Responder
bender   30 Jul, 2012, 2:21 pm
#5
(30 Jul, 2012, 1:56 pm)Cluster escribió: esta lindo, no tiene nada fuera de lo comun pero esta lindo Smile

gracias... la cosa es que el plugin sideboxes mueve todo a la izquierda incluyendo las estadisticas y se veia feo... y no sabia como editarlo para que no hiciera eso... por eso me puse a hacer esto para reemplazarlo por el sideboxes :p

Gracias ZioGuE y Finer !! Smile
  
 Responder
likepop   9 Aug, 2012, 7:27 pm
#6
Y si quiero poner en el 1er recuadro el grupo de Facebook que es lo que tengo que hacer? Tengo que instalar algún plugin o algo?
  
 Responder
bender   9 Aug, 2012, 7:47 pm
#7
(9 Aug, 2012, 7:27 pm)likepop escribió: Y si quiero poner en el 1er recuadro el grupo de Facebook que es lo que tengo que hacer? Tengo que instalar algún plugin o algo?

esto no lleva ningun plugin

ve a aqui -->
https://developers.facebook.com/docs/ref.../like-box/

y haces tu LikeBox... generas el codigo y pegas la version de IFrame en el primer Box Wink
Última modificación: 9 Aug, 2012, 7:48 pm por xxyogaxx.
  
 Responder
likepop   9 Aug, 2012, 8:05 pm
#8
Tengo otro problemita mira... a mi me queda así:

[Imagen: 17899138.jpg]

Pero yo quiero que me quede así:

[Imagen: 75752867.jpg]

Que es lo que debo modificar?

Osea, que desaparezca el delineo celeste y que el "Haste fan en Facebook!" me quede como en un recuadro.
  
 Responder
bender   9 Aug, 2012, 8:45 pm
#9
uff -.- yaa edite el codigo para ti 77

primero en la plantilla index... en la primera caja
Código:
<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 />

cambialo por esto

Código:
<div class="box2">
<!--start: primera caja-->
<div class="box3" align="center">
<div class="thead">
<strong>NOMBRE DEL RECUADRO</strong>
</div>
<div class="trow1">

TEXTO O CODIGO A MOSTRAR EN EL RECUADRO

</div>
</div>
<!--end: primera caja-->
<br />


en el CSS editas solo el Box 3
de esto...
Código:
.box3 {    
    padding: 5px 2px 2px 2px;
    border: 1px solid #d0d0d0;
}

a esto
Código:
.box3 {    
    padding: 5px 2px 2px 2px;
}

(solo le quite el border... )

y con eso te deberia quedar casi identico al SideBox...
fijate bien en el primer codigo que edite porque si quieres dejar todas las cajas asi
tendras que repetir el 1 paso en todas las cajas... y ademas fijate que lleva la etiqueta "trow1" ... si hiciste la modificacion para el color de letras agregando "trow3" tendras que agregarle Borde al "trow3"...

Código:
.trow3{    
    background-color: #FFFFFF;
    color: #000;
border: 1px solid #d0d0d0;
}

y en el primer codigo si lo copias entero recuerda cambiar a "trow3" si es que estas usando la modificacion para el color de letras...

trate de ser lo mas explicito y claro posible... saludos !
  
 Responder
likepop   10 Aug, 2012, 5:02 pm
#10
Y si quiero hacer la caja un poco más fina de ancho que es lo que debo modificar?

Osea, que me quede más chica de ancho..
  
 Responder
Páginas (4): 1 2 3 4   
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-2024 MyBB Group.
Made with by Curves UI.