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



[html] Perfiles horizontales - Página 2 3oxGBu2

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
Chalo

¿Que estoy pensando? :

saquen el wato..... [table class=fecha_up][td]Se modifico:8/11/19 - 9:09 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/374/37476.png


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

7038


Puntos :

9160


Me gusta :

1053


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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
YoshiGM

¿Que estoy pensando? :

Hola o3o [table class=fecha_up][td]Se modifico:22/01/20 - 12:09 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 :

1272


Puntos :

1694


Me gusta :

252


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


https://www.yoshifansclub.net/forum

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
Redline

¿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 :

https://2img.net/h/oi64.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


Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Lun Feb 19, 2018 9:10 am
provando gracias boy aver
rokitx
rokitx

¿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


Volver arriba Ir abajo

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

¿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 :

1700


Puntos :

2460


Me gusta :

468


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


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
Eslam Love

¿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 :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

72


Puntos :

74


Me gusta :

2


ingreso :

30/09/2018


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Re: [html] Perfiles horizontales 
el Lun Oct 22, 2018 9:51 pm
Thank You Very Much
Eslam Love
Eslam Love

¿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 :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

72


Puntos :

74


Me gusta :

2


ingreso :

30/09/2018


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

 En la misma categoria


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