[Tutorial] Recuadros de Postbit con sombra parecido a MyBB-Es

Buenas,el tutorial este lo descubrí yo investigando un poquito con el css y las plantillas jeje xDD y a muchos no les gusta recuadrar el postbit con el contorno azul y el relleno blanco así que pongo estee.
El creador de este efecto es darkne porque estaba en su tema creo así que creditos a el Tongue

.

Muy bien,vamos a ACP/Plantillas y Esitlos/tu tema/global css/editar en modo avanzado.

Y al final de todo agregáis:

.postbit4_header {

background: #f9f9f9;

width: 130px;

color: #666;

border-bottom: 1px solid #bebebe;

font-size: 11px;

text-shadow: 1px 1px 0 #fff;


border-top: 1px solid #999999;

border-bottom: 1px solid #bebebe;

border-left: 1px solid #999999;

border-right: 1px solid #999999;

margin-top: 5px;



padding: 5px 10px;

text-align: center;

font-size: 11px;

font-weight: bold;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0 0 1em #b6b6b6;
	-moz-box-shadow: 0 0 1em #b6b6b6;
	-webkit-box-shadow: 0 0 1em #b6b6b6;

}

Y luego vas a ACP/Plantillas y estilos/Plantillas/tu tema templtaes/caja del mensaje/postbit_author_user/ borra todo lo que hay,pero antes copia todo lo que hay en un bloc de notas para que por si te equivocas.
y inserta este código:

<div class="postbit4_header">
<b>{$lang->postbit_posts}</b> 
{$post['postnum']}<br />
<b>{$lang->postbit_joined}</b> 
{$post['userregdate']}
<b>{$post['replink']}</b>
</div>

Quité el nivel de advertencia porque se veía mal :L
Si quieres añadirle más cosas puedes hacerlo Tongue

Ahora vuelve a Plantillas/Tu tema/Caja del mensaje/ y le das a postbit classic si tu foro usa el postbit a la izquierda o postbit si está a la derecha
Busca esto en tu postbit

[b]{$post['user_details']}[/b]

y centralo,así:

[b]<center>{$post['user_details']}</center>

[/b]

Aquí dejo una imagen adjunto de cómo se verá.
[attachment=1300]
Nora:Yo tengo otros elementos redondeados,solo fijáos en lo que pone Reputación Mensajes Ingreso etc...

Creditos wasmake

Buen tuto vader, pero seria mejor si explicaras como aplicar el estilo del css, porque hay personas que tienen modificaciones en el postbit_author_user. te dejo +Rep por compartir el tuto Smile

Si te das cuenta ".postbit4_header" tiene dos border-bottom:;, dos font-size :p

Y sobre <center></center> ya no es recomendable usarlo, esta... eliminado de las recomendaciones oficiales aunque sigue siendo soportado por los navegadores (al final son los navegadores quienes deciden que mostrar y que no mostrar de todas formas).

Es mejor:

<div style="text-align: center"></div>

Eso es mejor, y aun mejor es este:
globa.css

.align_center {
text-align: center;
}

<div class="align_center"></div>

Ya que el elemento "style" esta eliminado oficialmente en CSS3 (que aun no esta terminado y quien sabe cuando jaja).

Buen tutorial Big Grin

{SIGNATURE_IMAGE}

Hola, seguí el tuto y todo bien, me gusta como se ve pero tengo un problema y es que me gustaría que los recuadros estuvieran alineadas, ¿me explico? bueno miren:

[Imagen: knknk.png]

Los recuadros se ven desalineados, el del avatar está muy a la izquierda, los mensajes están bien, las gracias igual, la barra está muy a la izquierda al igual que los puntos y premios (la imagen caída) y lo que quiero es que estos estén todos alineados en una misma posición, espero y me puedan ayudar.

EDITO: Intenté hacerlo en los perfiles, los recuadros se aplican pero no se ve como quisiera, miren ustedes mismos:

[Imagen: hhhls4tl.png]

¿Ven? El caso es que quiero que todo el espacio en blanco se rellene con los cuadros, o sea, que lo que dice Villori, Administrador, las estrellas, lo que dice Información de... y todo eso sea del tamaño del recuadro blanco, hasta el borde negro.

(12 Nov, 2011, 6:36 pm)Orpheus escribió: Hola, seguí el tuto y todo bien, me gusta como se ve pero tengo un problema y es que me gustaría que los recuadros estuvieran alineadas, ¿me explico? bueno miren:

[Imagen: http://imagengratis.org/images/knknk.png]

Los recuadros se ven desalineados, el del avatar está muy a la izquierda, los mensajes están bien, las gracias igual, la barra está muy a la izquierda al igual que los puntos y premios (la imagen caída) y lo que quiero es que estos estén todos alineados en una misma posición, espero y me puedan ayudar.

EDITO: Intenté hacerlo en los perfiles, los recuadros se aplican pero no se ve como quisiera, miren ustedes mismos:

[Imagen: http://imagengratis.org/images/hhhls4tl.png]

¿Ven? El caso es que quiero que todo el espacio en blanco se rellene con los cuadros, o sea, que lo que dice Villori, Administrador, las estrellas, lo que dice Información de... y todo eso sea del tamaño del recuadro blanco, hasta el borde negro.

Modifica el ancho

Cita:width: 130px;

[Imagen: http://i.imgur.com/kLUbBrj.png]

(12 Nov, 2011, 6:36 pm)Orpheus escribió: Hola, seguí el tuto y todo bien, me gusta como se ve pero tengo un problema y es que me gustaría que los recuadros estuvieran alineadas, ¿me explico? bueno miren:

[Imagen: http://imagengratis.org/images/knknk.png]

Los recuadros se ven desalineados, el del avatar está muy a la izquierda, los mensajes están bien, las gracias igual, la barra está muy a la izquierda al igual que los puntos y premios (la imagen caída) y lo que quiero es que estos estén todos alineados en una misma posición, espero y me puedan ayudar.

EDITO: Intenté hacerlo en los perfiles, los recuadros se aplican pero no se ve como quisiera, miren ustedes mismos:

[Imagen: http://imagengratis.org/images/hhhls4tl.png]

¿Ven? El caso es que quiero que todo el espacio en blanco se rellene con los cuadros, o sea, que lo que dice Villori, Administrador, las estrellas, lo que dice Información de... y todo eso sea del tamaño del recuadro blanco, hasta el borde negro.

Como dijo jaizu,debes aumentar el ancho.
y para que no esten desorientadas centra las cosas con:
<div class="align_center"></div>

hola gracias pero yo tengo el postbit header 4 en la parte de arriba del post como puedo hacer para que este al lado izquierdo?

Oigan amigos lo que no puedo hacer es que el postbit se vea de lado izquierdo Sad

me podrian ayudar Sad

Se ve bueno. Lo voy a aplicar Tongue

(4 Feb, 2012, 2:02 pm)OscarHacker escribió: Oigan amigos lo que no puedo hacer es que el postbit se vea de lado izquierdo me podrian ayudar

En tu panel de administración ve a "Configuración" y luego a "Opciones de visualización de temas"
Ahí marcas "Mostrar mensajes usando la vista clásica". En caso de no cambiar es porque en tu panel de control de usuario debes cambiarlo también.

Bonito, aunque e IE no se vería. :/

[Tutorial] Recuadros de Postbit con sombra parecido a MyBB-Es

Buenas,el tutorial este lo descubrí yo investigando un poquito con el css y las plantillas jeje xDD y a muchos no les gusta recuadrar el postbit con ...

Colaboradores