Staff en línea

Página 2 de 2. Precedente  1, 2

[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
Recuerdo del primer mensaje :

[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 Jue Mar 31, 2016 5:18 pm
Muy buen truco!
Se agradece mucho
YoshiGM
avatar

¿Que estoy pensando? :

Octubre Sorprendeme [?] [table class=fecha_up][td]Se modifico:1/010/18 - 17:37 hrs. [/td][/table]


Banner en temas :

https://i.servimg.com/u/f19/13/45/80/80/banner10.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #555


Mensajes :

1151


Puntos :

1548


Me gusta :

237


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://www.yoshifansclub.net

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Dom Oct 02, 2016 9:03 am
gracias :3 yo hacía esto con css pero supongo que no es muy eficiente

edito. creo que es para phpbb3, no funciona en punbb
Redline
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://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

44


Puntos :

56


Me gusta :

8


ingreso :

13/09/2016


Sexo :

Masculino

Plataforma :

punbb


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Lun Feb 19, 2018 9:10 am
provando gracias boy aver
rokitx
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://www.profilebrand.com/images/facebook-cover/4342-loading-90-percent-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

72


Puntos :

76


Me gusta :

4


ingreso :

18/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Dom Abr 08, 2018 11:44 am
staff
Excelente aporte se ve muy bueno...
Dosh
avatar

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1577


Puntos :

2320


Me gusta :

453


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Dom Sep 30, 2018 2:13 am
thank you very much
Eslam Love
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://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

63


Puntos :

63


Me gusta :

0


ingreso :

30/09/2018


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


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