JCink Postprofile
:: CATEGORIA :: TITULO FORO
Página 1 de 1.
JCink Postprofile
JCKIN:
Wrapper:
Css:
Miniprofile:
FOROACTIVO::::::::::::::::::::::::::::::::
Como te imaginaras deberemos tocar tanto templantes como el css, empecemos por lo sencillo. Iremos a Visualizacion → Imágenes y Colores → Colores y alli colocaremos nuestro css:
Ahora iremos a los templantes Visualizacion → Templates → General → viewtopic_body y borramos la parte del perfil suplantandola por esto:
Ya tenemos lo mas complicado.
Ahora tenemos que poner los lugares del perfil. Esto es MUY importante por que dependiendo el orden que coloques las cosas es si esto funciona o no. Ignoremos mi pulso de aguacate https://i.imgur.com/WTsm21R.png Como el orden debe ser el mismo que el perfil, si ponemos la imagen primero o tercero en el perfil se vera una cosa deforme y desconfigurada. Otra cosa a tener en cuenta en este sector es que para que se vea como se debe y los invitados no vean solo la caja blanca debes selección una visión publica: https://i.imgur.com/4Ne6D2l.png
Avatar: 250x400
Y creo que ya esta todo, mucha suerteeee!
ROSE
Hay una manchita a a a a...hi!
MENSAJES:
475
PUNTOS:
3644
INSCRIPCIÓN:
14/03/2014
Ver perfil de usuario Enviar mensaje privado
http://glintz.foroactivo.com/t459-beauty-and-the-beast-rose-gale
ROSE ESTÁ
AdministradorAdministrador
Wrapper:
- Código:
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
Css:
- Código:
/******** BEE'S MINI PROFILE **********/
#schov{width: 250px; height: 350px; background: #fff; overflow: hidden; z-index: 1; }
#schov .sc-first { width: 250px; height: 350px; position: relative; background-color: transparent; background-image:url(http://i.imgur.com/NC7N8IT.png); transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; z-index: 2; }
#schov:hover .sc-first { margin-top: -130px; }
.sc-av { width: 250px; height: 350px; overflow: hidden; }
.sc-outpad { width: 250px; border: 10px solid #fff; }
.sc-inpad { width: 140px; height: 100px; background: #fff; }
.sc-hovpad { width: 250px; height: 130px; background: #fff; }
.sc-quote {width:240px; height: 8px; overflow: hidden; padding: 5px 10px 5px 0px; font-family: georgia; font-size: 10px; text-transform: lowercase; font-style: italic; text-align: right; line-height: 120%; color: #3f7476; background: #fff; border-bottom: 2px solid #3f7476; margin-bottom: 5px; }
.sc-text { width: 140px; height: 10px; padding: 3px 0px 2px 0px; font-family: lato, arial; font-weight: 300; font-size: 12px; text-align: center; text-transform: uppercase; line-height: 90%; margin-bottom: 2px; }
.sc-ball { width:20px; height: 15px; padding-top: 5px; font-family: 'lato', arial; font-weight: 300; font-size: 10px; color: #fff; text-align: center; line-height: 90%; background: #D4E2B6; margin: 5px 5px 0px 0px; -webkit-border-radius: 100%; -moz-border-radius: 100%; position: relative; }
.sc-gpad { width: 210px; height: 40px; padding: 20px; background: #000; color: #fff; border-top: 10px solid #fff;}
.sc-char { width: 210px; padding-bottom: 5px; font-family: 'lato', arial; font-size: 18px; font-weight: 300; line-height: 90%; text-transform: uppercase; text-align: center; border-bottom: 1px solid #fff; color: #fff; }
.sc-char a { width: 210px; padding-bottom: 5px; font-family: 'lato', arial; font-size: 18px; font-weight: 300; line-height: 90%; text-transform: uppercase; text-align: center; border-bottom: 1px solid #fff; color: #fff; }
.sc-memg { width: 210px; padding-top: 5px; font-family: 'lato', arial; font-size: 10px; font-style: italic; font-weight: 300; line-height: 90%; text-transform: uppercase; text-align: center; }
.sc-gifp { width: 100px; height: 100px; background: #ccc; margin-left: 10px; float: left; position: relative; top: -100px; left: 140px; background-size: 100px auto; background-position: center; overflow: hidden; }
Miniprofile:
- Código:
<div class="sc-outpad"><div id="schov"><div class="sc-av"><!-- |avatar| --></div><div class="sc-first"><div class="sc-hovpad"><div class="sc-quote"><!-- |field_5| --></div><div class="sc-inpad"><div class="sc-text" style="border-bottom: 2px solid #539FA2;"> <!-- |field_2| --> </div><div class="sc-text" style="border-bottom: 2px solid #72B1A4;"> <!-- |field_3| --> </div><div class="sc-text" style="border-bottom: 2px solid #ABCCB1;"> <!-- |field_4| --> </div><div class="sc-text" style="border-bottom: 2px solid #C4DBB4;"> <!-- |field_1| --> IS <!-- |status| --> </div><center><div style="width: 100px; height: 20px; position: relative; left: -30px;"><a href="<!-- |field_7| -->"><div class="sc-ball" style="top: 0px; left: 0px;">A</div></a><a href="<!-- |field_8| -->"><div class="sc-ball" style="top: -25px; left: 25px;">S</div></a><a href="<!-- |field_9| -->"><div class="sc-ball" style="top: -50px; left: 50px;">W</div></a><a href="<!-- |field_10| -->"><div class="sc-ball" style="top: -75px; left: 75px;">T</div></a></div></center></div><div class="sc-gifp" style="background-image:url(<!-- |field_6| -->);"> </div> </div></div></div><div class="sc-gpad"><div class="sc-char"> <!-- |name| --> </div><div class="sc-memg"><!-- |g_title| --></div></div></div>
FOROACTIVO::::::::::::::::::::::::::::::::
Como te imaginaras deberemos tocar tanto templantes como el css, empecemos por lo sencillo. Iremos a Visualizacion → Imágenes y Colores → Colores y alli colocaremos nuestro css:
- Código:
/*Caja donde estan los botones de MP, PAG, ETC*/
div#caja-contac {
text-align: center;
width: 135px;
height: 24px;
top: -20px;
line-height: 24px;
display: block;
position: relative;
}
/*Cajas donde esta la info del perfil, edad, nombre, O. Sexual, etc */
h5:nth-child(1), h5:nth-child(3), h5:nth-child(5), h5:nth-child(7), h5:nth-child(9), h5:nth-child(11) {
display: none;
}
h5:nth-child(2) {
width: 240px;
height: 8px;
overflow: hidden;
padding: 5px 10px 5px 0px;
font-family: georgia;
font-size: 10px;
text-transform: lowercase;
font-style: italic;
text-align: right;
line-height: 120%;
color: #3f7476;
background: #fff;
border-bottom: 2px solid #3f7476;
margin-bottom: 5px;
font-weight: lighter;
}
h5:nth-child(4) {
width: 100px;
height: 100px;
background: #ccc;
margin-left: 10px;
float: left;
position: relative;
left: 140px;
background-size: 100px auto;
background-position: center;
overflow: hidden;
display: block;
}
h5:nth-child(6), h5:nth-child(8), h5:nth-child(10), h5:nth-child(12) {
padding: 3px 0px 2px 0px;
margin-bottom: 2px;
position: relative;
display: block;
font-family: georgia;
font-size: 10px;
font-style: italic;
font-weight: lighter;
height: 10px;
line-height: 10px;
overflow: hidden;
text-align: center;
text-transform: lowercase;
width: 138px;
left: -110px;
}
h5:nth-child(6){
border-bottom: 2px solid #539FA2;
}
h5:nth-child(8){
border-bottom: 2px solid #72B1A4;
}
h5:nth-child(10){
border-bottom: 2px solid #ABCCB1;
}
h5:nth-child(12){
border-bottom: 2px solid #C4DBB4;
}
/*Caja donde esta todo el perfil*/
.postprofile {
display: block;
margin: 5px 0 0;
float: right;
position: relative;
width: 250px;
border: 10px solid #fff;
}
/*caja donde esta el avatar y datos*/
div#caja-av-1 {
background-color: transparent;
display: block;
overflow: hidden;
height: 400px;
width: 250px;
}
/*Caja que tiene la imagen del Avatar*/
div#caja-av-2 {
height: 400px;
width: 250px;
display: block;
}
/*Caja chiquita de los datos*/
div#caja-av-3 {
display: block;
width: 250px;
height: 130px;
background-color: #fff;
position: relative;
}
/*Hover que sube la caja chiquita de datos*/
div#caja-av-1:hover div#caja-av-3{
margin-top: -130px;
}
/*Caja del nombre y rango*/
div#caja-nombre {
width: 210px;
height: 40px;
padding: 20px;
background: #000;
color: #fff;
border-top: 10px solid #fff;
}
/*nombre*/
div#ava-nombre {
width: 210px;
padding-bottom: 5px;
font-family: 'lato', arial;
font-size: 18px;
font-weight: 300;
line-height: 90%;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid #fff;
color: #fff;
}
/*nombre de rangos*/
div#ava-rango {
width: 210px;
padding-top: 5px;
font-family: 'lato', arial;
font-size: 10px;
font-style: italic;
font-weight: 300;
line-height: 90%;
text-transform: uppercase;
text-align: center;
}
Ahora iremos a los templantes Visualizacion → Templates → General → viewtopic_body y borramos la parte del perfil suplantandola por esto:
- Código:
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
<!-- div class="online2"></div-->
<div id="caja-av-1">
<div id="caja-av-2"> {postrow.displayed.POSTER_AVATAR}</div>
<div id="caja-av-3">
<!-- BEGIN profile_field -->
<h5>{postrow.displayed.profile_field.LABEL} </h5>
<h5> {postrow.displayed.profile_field.CONTENT}</h5>
<!-- END profile_field -->
<div id="caja-contac">{postrow.displayed.POSTER_RPG}
{postrow.displayed.PROFILE_IMG}
{postrow.displayed.PM_IMG}
{postrow.displayed.EMAIL_IMG}
<!-- BEGIN contact_field -->
{postrow.displayed.contact_field.CONTENT}
<!-- END contact_field --> </div> </div>
</div>
<div id="caja-nombre">
<div id="ava-nombre">{postrow.displayed.POSTER_NAME}</div>
<div id="ava-rango"> {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</div>
</div>
</div>
Ya tenemos lo mas complicado.
Ahora tenemos que poner los lugares del perfil. Esto es MUY importante por que dependiendo el orden que coloques las cosas es si esto funciona o no. Ignoremos mi pulso de aguacate https://i.imgur.com/WTsm21R.png Como el orden debe ser el mismo que el perfil, si ponemos la imagen primero o tercero en el perfil se vera una cosa deforme y desconfigurada. Otra cosa a tener en cuenta en este sector es que para que se vea como se debe y los invitados no vean solo la caja blanca debes selección una visión publica: https://i.imgur.com/4Ne6D2l.png
Avatar: 250x400
Y creo que ya esta todo, mucha suerteeee!
ROSE
Hay una manchita a a a a...hi!
MENSAJES:
475
PUNTOS:
3644
INSCRIPCIÓN:
14/03/2014
Ver perfil de usuario Enviar mensaje privado
http://glintz.foroactivo.com/t459-beauty-and-the-beast-rose-gale
ROSE ESTÁ
AdministradorAdministrador
:: CATEGORIA :: TITULO FORO
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.