• Como cambiar el perfil y el avatar a la izquierda

Page 1 of 1

Como cambiar el perfil y el avatar a la izquierda

Posted: 22 Jun 2012, 16:35

by Carlos

[align=center]Este Tutorial está basado en: Knowledge Base - Prosilver: Profiles on Left
Escrito por: Snowcone y Raimon (eliminando la edición desde el ACP).[/align]

Bien con estos pasos vamos a cambiar el perfil y el avatar al a izquierda en los posts y mensajes privados:

* Abrir el archivo:
styles/prosilver/theme/content.css

* Buscar:

Code: Select all

/* Post body styles
----------------------------------------*/
.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: left;
clear: both;
}

* Reemplazar por:

Code: Select all

/* Post body styles
----------------------------------------*/
.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: right;
clear: both;
}

* Buscar:

Code: Select all

/* Poster profile block
----------------------------------------*/
.postprofile {
/* Also see tweaks.css */
margin: 5px 0 10px 0;
min-height: 80px;
color: #666666;
border-left: 1px solid #FFFFFF;
width: 22%;
float: right;
display: inline;
}

* Reemplazar por:

Code: Select all

/* Poster profile block
----------------------------------------*/
.postprofile {
/* Also see tweaks.css */
margin: 5px 0 10px 0;
min-height: 80px;
color: #666666;
border-right: 1px solid #FFFFFF;
width: 22%;
float: left;
display: inline;
}

* Buscar:

Code: Select all

.pm .postprofile {
border-left: 1px solid #DDDDDD;
}

* Reemplazar por:

Code: Select all

.pm .postprofile {
border-right: 1px solid #DDDDDD;
}

* Abrir el archivo:
styles/prosilver/theme/colours.css

* Buscar:

Code: Select all

.online {
background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
}

* Reemplazar por:

Code: Select all

.online {
background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
margin-top: -5px;
}

.online dt {
margin-top: 5px;
}

* Abrir el archivo:
styles/prosilver/template/viewtopic_body.html

* Buscar:

Code: Select all

<div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->">

* Eliminar esta parte:

Code: Select all

<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->

* De tal manera que quede así:

Code: Select all

<div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF -->">

* Buscar:

Code: Select all

<dl class="postprofile" id="profile{postrow.POST_ID}">

* Reemplazar por:

Code: Select all

<dl class="postprofile<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->" id="profile{postrow.POST_ID}">

* Abrir el archivo:
styles/prosilver/template/ucp_pm_viewmessage.html

* Buscar:

Code: Select all

<div id="post-{MESSAGE_ID}" class="post pm<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->">

* Eliminar esta parte:

Code: Select all

<!-- IF S_ONLINE --> online<!-- ENDIF -->

* De tal manera que quede así:

Code: Select all

<div id="post-{MESSAGE_ID}" class="post pm<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF -->">

* Buscar:

Code: Select all

<dl class="postprofile" id="profile{MESSAGE_ID}">

* Reemplazar por:

Code: Select all

<dl class="postprofile<!-- IF S_ONLINE --> online<!-- ENDIF -->" id="profile{MESSAGE_ID}">

Hasta aquí el tutorial, este tutorial está sacado después de que en la página oficial lo editaran para retirar la edición del acp, no os olvideis de actualizar el tema, limpiar el cache y refrescar el navegador para ver los cambios.

Aquí algunos ejemplos de como queda:

* Vista de los mensajes privados:
[hsimg2]http://www.darksideofthecarton.com/docu ... eft_pm.png[/hsimg2]

* Vista de los mensajes normales:
[hsimg2]http://www.darksideofthecarton.com/docu ... t_post.png[/hsimg2]