Staff en línea

Página 1 de 2. 1, 2  Siguiente

[html] Perfiles horizontales
Tema iniciado por y Añadir a favoritos

[html] Perfiles horizontales 
el Vie Dic 19, 2014 6:49 am
staff


Última edición por Chalo el Mar Oct 13, 2015 6:52 pm, editado 7 veces
[codebox]Creador: Flerex





Descripción: Dale un diseño más moderno a los mensajes de tu foro con este código CSS.[/codebox]

Código:

Agrega lo siguiente a tu CSS:


[hidecode]
Código:
div.topic-actions ~ .post > .inner {
    position: relative;
}
div.topic-actions ~ .post .postbody {
    padding-top: 80px;
    float: none;
    width: auto;
}
div.topic-actions ~ .post .postbody .profile-icons {
    margin-right: 0;
}
div.topic-actions ~ .post .postprofile {
    margin: 0;
    padding: 10px 0 10px 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: none;
    border-bottom: 1px solid #FFF;
    width: auto;
    display: block;
    min-height: 0;
}
div.topic-actions ~ .post .postprofile dt,
div.topic-actions ~ .post .postprofile dd {
    margin: 0;
}
div.topic-actions ~ .post .postprofile dt img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}
div.topic-actions ~ .post .postprofile dt br {
    display: none;
}
div.topic-actions ~ .post .postprofile dt img {
    float: left;
}
div.topic-actions ~ .post .postprofile dt strong {
    font-weight: normal;
}
div.topic-actions ~ .post .postprofile dt > strong {
    float: left;
    font-size: 14px !important;
    margin-left: 5px;
}
.equipodelforo {
    padding: 2px 5px;
    border-radius: 2px;
    color: #FAFAFA;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
}
div.topic-actions ~ .post .postprofile dt + dd {
    margin-left: 10px;
    float: left;
}
div.topic-actions ~ .post .postprofile dd br {
    display: none;
}
div.topic-actions ~ .post .postprofile dd .campo_perfil {
    display: inline-block;
    border-radius: 5px;
    padding: 5px;
    background-color: #cadceb;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    margin-right: 10px;
    border: 1px solid rgba(162, 188, 199, 0.4);
    border-top: none;
    border-left: none;
}
div.topic-actions ~ .post .postprofile dd:nth-child(4) {
    float: left;
    padding: 10px 0 0 5px;
    width: 90%;
}
div.topic-actions ~ .post .postprofile dd:last-child {
    clear: both;
    padding-top: 5px;
    display: none;
}

Ahora ve a las plantillas y, en la plantilla viewtopic_body.html busca:


Código:
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

Y sustitúyelo por:



Código:
<span class="campo_perfil">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>

Para colocar los rangos, simplemente edita cada rango que tengas en el PA y en vez de poner sólo texto pones lo siguiente:



Código:
<span class="equipodelforo" style="background-color: #333">Nombre del rango</span>

Nótese que donde pone #333 debes poner el color de ese rango en específico de forma manual.
[/hidecode]


Créditos y más:
Este código pertenece a la biblioteca de Overflow. No está permitido publicarlo en otros foros. Este código sólo ha sido compartido para que puedas ver la clase de cosas que hacemos en Overflow.
Chalo
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Dom Mayo 17, 2015 10:11 am
gracias, veamos
kensha
avatar

¿Que estoy pensando? :

regresando [table class=fecha_up][td]Se modifico:27/03/17 - 9:42 hrs.[/td][/table]


Banner en temas :

http://facecoverz.com/static/img/uploads/o_facecoverz.com-1365693265366.jpg


Color de titulos :

#0FAEAC


Sombra titulo :

1px 1px 1px #fff


Mensajes :

287


Puntos :

420


Me gusta :

81


ingreso :

12/05/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://bookland.activosforos.com

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Dom Mayo 17, 2015 7:56 pm
se agradece veamos como esta el code.
Julinho
avatar

¿Que estoy pensando? :

buen sabado :) [table class=fecha_up][td]Se modifico:2/06/18 - 22:12 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/hkeup0N.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

131


Puntos :

182


Me gusta :

33


ingreso :

05/02/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://4reyes.foroactivo.com/

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Lun Mayo 18, 2015 7:00 pm
staff
veo
Chalo
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Sáb Oct 10, 2015 7:58 pm
En serio necesitaba esto, gracias
Enis
avatar

¿Que estoy pensando? :

Pues... seguir procrastinando, se me da bien(?). [table class=fecha_up][td]Se modifico:10/10/15 - 19:39 hrs.[/td][/table]


Banner en temas :

http://www.sleekcover.com/covers/halloween-cats-bats-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

14


Puntos :

18


Me gusta :

4


ingreso :

02/07/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Mar Oct 13, 2015 1:04 am
Esta interesante este Codigo.
mrsrz
avatar

¿Que estoy pensando? :

... [table class=fecha_up][td]Se modifico:25/11/16 - 19:20 hrs.[/td][/table]


Banner en temas :

http://profilerehab.com/facebook_covers/musical/cool_guitar_cover_9.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

424


Puntos :

597


Me gusta :

63


ingreso :

23/12/2014


Sexo :

Masculino

Plataforma :

PunBB


Navegador :

Chrome


Ver perfil de usuario http://musicinstant.forumotion.com/

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Mar Oct 13, 2015 1:14 am
Comentare de nuevo porque creo que omiti un paso jaja.
mrsrz
avatar

¿Que estoy pensando? :

... [table class=fecha_up][td]Se modifico:25/11/16 - 19:20 hrs.[/td][/table]


Banner en temas :

http://profilerehab.com/facebook_covers/musical/cool_guitar_cover_9.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

424


Puntos :

597


Me gusta :

63


ingreso :

23/12/2014


Sexo :

Masculino

Plataforma :

PunBB


Navegador :

Chrome


Ver perfil de usuario http://musicinstant.forumotion.com/

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Lun Dic 28, 2015 3:30 pm
ohhh <3 gracias ^^ haber si me sale algo decente con esto xD
S.D.Locky
avatar

¿Que estoy pensando? :

Cabras voladoras por todos lados <3 [table class=fecha_up][td]Se modifico:28/12/15 - 22:08 hrs.[/td][/table]


Banner en temas :

http://profilerehab.com/facebook_covers/st_patricks/lucky_clover_cover_1.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

18


Puntos :

23


Me gusta :

3


ingreso :

28/12/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Miér Dic 30, 2015 12:06 am
Gracias por el aporte
icolor
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://myfbcovers.com/uploads/covers/2012/01/30/a5a2d8402dbc012f4e6600259003b428/watermarked_cover.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #000


Mensajes :

68


Puntos :

112


Me gusta :

20


ingreso :

29/12/2015


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Miér Ene 13, 2016 6:40 pm
Siempre he querido averiguar como lograr un perfil así *-* espero hacerlo bien. Gracias.
Lola_R
avatar

¿Que estoy pensando? :

No tengo idea de como ver los recursos aquí u_u [table class=fecha_up][td]Se modifico:13/01/16 - 18:29 hrs.[/td][/table]


Banner en temas :

http://doublemesh.com/wp-content/uploads/2015/12/star-wars-7-cover-photo.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

9


Puntos :

12


Me gusta :

3


ingreso :

13/01/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

FireFox


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.