Cargando...
Rango
Sexo
Mensajes
Última visita
Miembro desde

Foro Nube » Servicios » Soporte Foroactivo

Foro Cerrado
Este foro se encuentra cerrado de forma indefinida. Puedes utilizarlo para revisar material antiguo que desees recuperar.

[PHPBB3][Pedido] Cuadro personalizado alrededor del perfil

Creado por ,

Ir a la página : Precedente  1, 2

Mensaje [Página 2 de 2.]

Ysamar

Publicado Dom 7 Dic - 21:13

Ysamar
Recuerdo del primer mensaje :

Socorro!!! aqui vengo de nuevo con mis dudas Sonrisa

he encontrado un foro con un tutorial muy interesante para phpbb2 en cuanto al marco de los perfiles, pero mi version es la phpbb3, por lo que me gustaria encontrar ayuda para conseguir algo parecido

este es el tutorial




he intentado agregarle esos codigos sin exito de varias maneras distintas
he mirado en foroactivo, y con el codigo postprofile he logrado darle un tipo de marco al avatar, pero el problema es que el ava queda por encima del marco y no se ajusta a él, por tanto no queda bien

el resultado seria algo de este estilo para que me entendais mejor


gracias por adelantado por la ayuda Sonrisa

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)
Ysamar

Publicado Sáb 13 Dic - 17:09

Ysamar
no estoy muy segura de que sea el tuto adecuado, por las dudas te paso mi clave por mp
de todas formas te dejo la citacion por si sirve de algo

spinelsuns escribió:Bon d'accord, dans le titre, ce n'est pas très bien expliquer, mais aujourd'hui, je vais vous apprendre à faire ceci:


[PHPBB3][Pedido] Cuadro personalizado alrededor del perfil - Página 2 Tumblr_llvlxhTgS41qi686fo1_400

Ce qui veux dire: Travailler avec le CSS et le Template, donc, être le Fondateur du forum! Ce tutoriel est long et demande une écoute minutieuse,

É T A P E  N U M E R O 1 ::

Nous voulons créer un Cadre, donc vous allez devoir créer une nouvelle class. Vous lui donner donc le nom que vous voulez. Dans cette exemple, je l'ai appelé ''Cadre Avatar'' voici le code;

Código:
.cadreavatar {
background-color : #COULEUR DU FOND ;
border : 5px solid #COULEUR DE LA BORDURE ;
-moz-border-radius: 5px 5px 5px 5px
}

Mais après, c'est libre à vous de changer les variables! En voici quelques unes qui pourrais vous être utiles:

background-image : url("URL") : pour ajouter une image de fond à votre cadre
border : Xpx solid/dotted/dashed/double #COLOR : Solid/dotted/Dashed/double littéralement: Bordure Solide, pointillée, brisée ou double
Selon la taille de votre avatar, vous pourrez ajouter une taille ou une largeur.
height : XXpx ;
width : XXpx ;

OU
Overflow: auto (Qui mettera la taille automatiquement)
padding : XXpx ; : pour faire une marge avec le bord du cadre
É T A P E  N U M E R O 2 ::

Maintenant, nous devons nous attaquer aux Templates, (Rappel: Vous devez être Fondateur du forum pour y avoir accès, Sinon, demandez au fondateur de s'en occuper)

> Panneau d'Administration » Affichage » Templates » Général » viewtopic_body

À cette étape, je vous conseil FORTEMENT de copier/coller votre template dans un traitement de texte/bloc note/notepad ++ afin de ne perdre aucun détail s'il as déjà été changer et que vous désirez le conservé. Sinon, si le résultat ne vous plait pas, alors vous n'aurez qu'à copier coller le template par défaut.

cherchez ce code:

Código:
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}

* Si votre code as été changer, il se peu qu'il soit différent, mais normalement le span class reste le même.

Quelques infos utiles:

{postrow.displayed.POSTER_NAME} Le Pseudo.
{postrow.displayed.POSTER_RANK}  Le rang
{postrow.displayed.RANK_IMAGE} Une image du rang, si vous en avez une
{postrow.displayed.POSTER_AVATAR}  L'avatar

Ensuite, il faudra ajouter notre class dans ce code, il faudra le placer exactement où ont veux qu'il soit (dans notre cas, pour ce tuto, il encadrera tout le span class donc il faudra inclure ceci;

Código:
<div class="cadreavatar">    </div>

ainsi, votre code deviendra celui ci:

Código:
<div class="cadreavatar"> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</div>

Au contraire, si vous voulez que ce soit que l'avatar (supposons) que vous voulez d'encadré, alors vous devrez faire ceci:

Código:
<div class="cadreavatar"> {postrow.displayed.POSTER_AVATAR} </div>

Cliquez sur Enregistré et ensuite sur la prévisualisation, si ça vous plait alors sur la croix verte !

A VÉRIFIER:

Verifiez si la variable
Código:
<span class="postdetails poster-profile">
soit placé AVANT la class div
Código:
<div class="cadreavatar">
ainsi

Spoiler:
sinon vous aurez des caractères énorme et ce n'est pas vraiment ce qu'on veux

Le résultat:

[PHPBB3][Pedido] Cuadro personalizado alrededor del perfil - Página 2 Tumblr_llvquiJgD61qi686fo1_400

(P.S: je n'ai pas vu de tuto de ce genre ici donc c'est pour ça que je fais celui ci, s'il est dejà sur le forum, vous pouvez effacé et je suis désoler pour l'explication, c'est mon premier tuto ^^)


--------

Pour entouré tout les éléments du profil comme ceci:

[PHPBB3][Pedido] Cuadro personalizado alrededor del perfil - Página 2 F114

Il suffit simplement de placé sa div class dans le template avant
Código:
<!-- BEGIN profile_field -->
et la finir après
Código:
<!-- END profile_field -->

Normalement ça devrai fonctionner Sonrisa

A 0 usuarios le gusta esto
Bret

Publicado Dom 14 Dic - 11:42

Bret
Administrador
Vale, ya se como han hecho el efecto de estar por encima. En el fondo tienen una imagen con ciertos efectos comunes a todos los perfiles pero después ponen una imagen en el rango del usuario y luego la mueven para ponerla encima del avatar, dándole ese efecto de que esté por encima de él.

Para conseguir esto tienes que poner rangos con imágenes como las que tienen ellos. En este caso ellos tienen la siguiente:

Código:
http://img15.hostingpics.net/pics/929368rangemeraude.png

Luego tienes que buscar la siguiente porción de código en tu plantilla viewtopic_body:

Código:
{postrow.displayed.POSTER_RANK}

Y sustituirla por:

Código:
<span class="rambo">{postrow.displayed.POSTER_RANK}</span>

Ahora agrega el siguiente CSS:

Código:
.postprofile {
    position: relative;
}

.postprofile .rambo {
    position: absolute;
    top: 0;
    left: 0;
}

Juega con las propiedades top y left para posicionar correctamente la imagen. Y listo, debería estar todo listo.

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)
Ysamar

Publicado Dom 14 Dic - 18:20

Ysamar
siii gracias Bret!! eres un genio!
duda resuelta, puedes cerrar tema Sonrisa

A 0 usuarios le gusta esto
Contenido patrocinado

Publicado

A 0 usuarios le gusta esto

Ir a la página : Precedente  1, 2

Con la tecnología de Foroactivo y punBB