Staff en línea
Últimos temas
[html] Perfiles horizontales - Página 2 Origin10[html]Menú de enlaces simple
por Lelu Jue Nov 28, 2019 6:30 am

[html] Perfiles horizontales - Página 2 Origin10[html]Menú dinámico
por Lelu Jue Nov 28, 2019 6:11 am

[html] Perfiles horizontales - Página 2 Origin10[html]Escaparate de imágenes sencillo
por Lelu Jue Nov 28, 2019 6:02 am

[html] Perfiles horizontales - Página 2 Origin10[Duda] ModernBB vale la pena?
por mrsrz Miér Nov 27, 2019 9:57 am

[html] Perfiles horizontales - Página 2 Origin10[Ocio] Contemos hasta el 5000
por Fibo Miér Nov 27, 2019 9:19 am

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 :

7036


Puntos :

9158


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

Renovando YFC [table class=fecha_up][td]Se modifico:16/11/19 - 11:07 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 :

1267


Puntos :

1688


Me gusta :

251


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 :

1698


Puntos :

2458


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.