• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión

Mod.Plantilla Avatares a la derecha y a la izquierda

¿Les gusta el avatar de un lado y de otro?


  • Votantes totales
    6
  • Encuesta cerrada .
#1
Bueno Gente, les muestro otra de mis modificaciones...

img.PNG


Estoy construyendo un foro con varias modificaciones y necesito que me ayuden con sus sugerencias...

(Ahora estoy en la empresa) si tengo tiempo esta semana les enseño como hacerlo.-

EDIT: he terminado la explicacion, espero que les guste!

¡¡¡ Ver la EXPLICACION !!!

Saludos
 

lenin

XenForoUser
#2
me parece bonito, es genial, si tienes el tuto estaría cool, también me gustaría, andube buscando la plantilla de members, pero no se cual es... no con exactitud, si sabes cual es.. dimela gracias..
 

xavimtz

XenForoUser
#3
hola que tal dl_gushh esta muy buena la idea todavía no me acostumbro mucho pero realmente me gusto, lo que pasa que en ningún foro había visto esa forma de visualizar el avatar del post....
 

lms

Administrador
#5
No está mal pero, pienso, que puede volver loco a cualquier lector del foro ya que no se acostumbra a mirar sólo en un lado. Tiene de bueno que acostumbra a leer, cosa que no se suele hacer cuando un tema es largo.

Así pues, espero ansioso el tuto.

Salud2
 
#7
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
 

lenin

XenForoUser
#10
gracias.. :) muy bueno
unq cuando salga una nueva versión habrá que modificarlo... espero que no sea así . solo hacer los mismos pasos
 
#13
NO PUEDO VER LA IMAGEN!!!


xenFácil. Soporte xenForo en español - Error

No tiene permiso para ver esta página o realizar esta acción
 

lms

Administrador
#14
Yo tampoco. Todo es tras un complemento instalado. Lo acabo de desactivar.

Repaso permisos y demás.

Gracias y salud2
 
Arriba