Bien, lo hice de una manera desprolija pero creo que es bastante entendible:
1) Lo primero que vamos a modificar es el
message_user_info
buscamos:
HTML:
<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
y lo
reemplazamos por:
PHP:
<xen:if is="{$post.position} % 2 == 0"> <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
<xen:else /><div class="messageUserInfo1" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person"> </xen:if>
buscamos:
HTML:
<span class="arrow"><span></span></span>
y lo
reemplazamos por:
PHP:
<xen:if is="{$post.position} % 2 == 0"><span class="arrow">
<xen:else /><span class="arrow1"></xen:if><span></span></span>
2)
message_user_info.css
Es importante aclarar que los bloques de estilos pueden ser distintos a los de mi ejemplo. Hay que tener en cuenta que solo debemos copiar el bloque completo, pegarlo justo debajo agregando a la propiedad el numero 1 al final.-
En el siguiente ejemplo
buscamos el bloque
.messageUserInfo, lo
copiamos todo y lo pegamos justo debajo añadiendo un
1 al final y cambiando el float de
left a
right en este ultimo.-
buscamos
PHP:
.messageUserInfo
{
@property "messageUserInfo";
float: left;
width: 124px;
@property "/messageUserInfo";
}
y justo
debajo agregamos
PHP:
.messageUserInfo1
{
@property "messageUserInfo1";
float: right;
width: 124px;
@property "/messageUserInfo1";
}
lo mismo hay que hacer con los bloques
.messageUserBlock .arrow y
.messageUserBlock .arrow span
PHP:
.messageUserBlock .arrow
{
...
...
...
}
.messageUserBlock .arrow span
{
...
...
...
}
aca el ejemplo de mi modificacion
PHP:
.messageUserBlock .arrow
{
position: absolute;
top: 10px;
right: -10px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: @messageUserBlock.border-color;
border-right: none;
/* Hide from IE6 */
_display: none;
}
.messageUserBlock .arrow span
{
position: absolute;
top: -10px;
left: -11px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: @messageAvatarHolder.background-color;
border-rigth: none;
}
Justo debajo pegue lo mismo añadiendo un 1 al final de cada propiedad y cambiando los "left" por "right" y viceversa.-
me quedo asi:
PHP:
.messageUserBlock .arrow1
{
position: absolute;
top: 10px;
left: -10px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-right-color: @messageUserBlock.border-color;
border-left: none;
/* Hide from IE6 */
_display: none;
}
.messageUserBlock .arrow1 span
{
position: absolute;
top: -10px;
right: -11px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-right-color: @messageAvatarHolder.background-color;
border-left: none;
}
3) Modificar
message
buscamos:
HTML:
<div class="messageInfo primaryContent">
y lo
reemplazamos por:
PHP:
<xen:if is="{$post.position} % 2 == 0"><div class="messageInfo primaryContent">
<xen:else /><div class="messageInfo1 primaryContent"></xen:if>
buscamos:
PHP:
<xen:if is="{$message.isNew}"><span class="newIndicator"><span></span>{xen:phrase new}</span></xen:if>
y lo
reemplazamos por:
PHP:
<xen:if is="{$post.position} % 2 == 0"><xen:if is="{$message.isNew}"><span class="newIndicator"><span></span>{xen:phrase new}</span></xen:if>
<xen:else /><xen:if is="{$message.isNew}"><span class="newIndicator1"><span></span>{xen:phrase new}</span></xen:if></xen:if>
4) Modificar
message.css
Creo que fui bien explicito en cuanto a ejemplos, ahora haganlo ustedes mismos...
deben
copiar estos tres bloques:
.message .messageInfo
.message .newIndicator
.message .newIndicator span
de manera que les quede:
.message .messageInfo
.message .messageInfo1
.message .newIndicator
.message .newIndicator1
.message .newIndicator span
.message .newIndicator1 span
(recuerden de cambiar los
left por
right)
Cualquier cosa me avisan...
Saludos