Membres connectés récemment
[PHPBB3] Une barre de titre pour les citation avec la photo du profil
3 participants
Page 1 sur 2
Page 1 sur 2 • 1, 2
- Version du forum :PHPBB3
- Templates modifiés :oui
- Navigateur :Firefox
Salut à tous,
oui c'est encore moi à une nouvelle question :)
ayant vu ce site je vois qu'il est possible de faire une photo du profil à gauche de la citation (quote)
https://www.xul.fr/css/blockquote.php
Mon souhait serait d'avoir ceci:
1) Une photo de l'auteur de la citation à gauche (si possible dans un cercle et avec une légère transparence)
2) une barre de titre dans la citation pour bien séparer le texte du titre
3) retirer l’apostrophe qui est présent en début (et absent pour la fin)
En image (modifiée photoshop) en haut ce que j'ai, en bas ce que j'aimerai avoir
Est ce une chose envisageable ?
Merci pour votre aide toujours de qualité
PS: le profil en rond dans le titre de citation est un script obtenu sur le net, mais qui ne servira plus si ceci est faisable
oui c'est encore moi à une nouvelle question :)
ayant vu ce site je vois qu'il est possible de faire une photo du profil à gauche de la citation (quote)
https://www.xul.fr/css/blockquote.php
Mon souhait serait d'avoir ceci:
1) Une photo de l'auteur de la citation à gauche (si possible dans un cercle et avec une légère transparence)
2) une barre de titre dans la citation pour bien séparer le texte du titre
3) retirer l’apostrophe qui est présent en début (et absent pour la fin)
En image (modifiée photoshop) en haut ce que j'ai, en bas ce que j'aimerai avoir
Est ce une chose envisageable ?
Merci pour votre aide toujours de qualité
PS: le profil en rond dans le titre de citation est un script obtenu sur le net, mais qui ne servira plus si ceci est faisable
Hello Fred,
il y a déjà cette astuce ici:
https://www.milouze14.com/t31081-phpbb3-afficher-l-avatar-dans-une-citation-nommee#590706
Est-ce que cela répond à ta demande ?
il y a déjà cette astuce ici:
https://www.milouze14.com/t31081-phpbb3-afficher-l-avatar-dans-une-citation-nommee#590706
Est-ce que cela répond à ta demande ?
J'avais déja inséré ce script qui était très interessante, on la voit dans ma capture photo, mais ca ne répond pas vraiment à ce que j'aimerai maintenant pour personnaliser mes citations c'est à dire une barre de titre des citations et la photo à droite de la citation et non plus dedans, ce qui permet de 'lavoir plus grande
idéalement il faudrait le rajouter en fin de citation, si ce n'est pas possible alors le supprimer
e tpour la barre de titre d ela citation, c'est faisable ?
Pour la photo à gauche, j'ai vu ce lien (en bas de page) qui explique comment faire, mais c'est générique, faut adapter à forumactif
https://www.xul.fr/css/blockquote.php
ca te parait faisable avec ce lien ou pas ?
e tpour la barre de titre d ela citation, c'est faisable ?
Pour la photo à gauche, j'ai vu ce lien (en bas de page) qui explique comment faire, mais c'est générique, faut adapter à forumactif
https://www.xul.fr/css/blockquote.php
ca te parait faisable avec ce lien ou pas ?
Changement de programme apres debat avec les admin
La barre ne sert à rien si tu peux arriver à descendre le guillemet en debut et fin du texte de citation, et ne pas le mettre dans le titre de la citation
On garde la photo à gauche, si possible dans un petit cercle, ni trop grand ni trop petit, si possible un peu de transparence pour l'aténuer. et on supprime la photo dans le titre de la citation (script venant du lien que tu as donné un peu au dessus.
En gros il faudrait aboutir à ce résultat là si possible.
Prend ton temps il n'y a aucune urgence, la migration de mon forum est prévu pour juin car l'actu spatial en mai va etre chargée
As tu besoin que je t'envoie un template ou mon CSS ?
La barre ne sert à rien si tu peux arriver à descendre le guillemet en debut et fin du texte de citation, et ne pas le mettre dans le titre de la citation
On garde la photo à gauche, si possible dans un petit cercle, ni trop grand ni trop petit, si possible un peu de transparence pour l'aténuer. et on supprime la photo dans le titre de la citation (script venant du lien que tu as donné un peu au dessus.
En gros il faudrait aboutir à ce résultat là si possible.
Prend ton temps il n'y a aucune urgence, la migration de mon forum est prévu pour juin car l'actu spatial en mai va etre chargée
As tu besoin que je t'envoie un template ou mon CSS ?
oui desolé Phil mais on s'est mis d'accord sur ça voyant que la barre serait assez compliqué d'après tes propos, on a voulu te simplifier le travail et finalement on a trouvé cette solution plus simple pour toi et mieux pour nous. on s'est permis ce changement vu que là tu disais te reposé pour le moment ;)
Mais je te rassure nos travaux sur le forum touche à sa fin
Mais je te rassure nos travaux sur le forum touche à sa fin
C'est pas grave Fred .
Juste avant de partir:
Tu peux tester ce style:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
Penser a cliquer sur le bouton
Puis modifier le script donné par celui-ci:
Juste avant de partir:
Tu peux tester ce style:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
- Code:
blockquote.M14_cita{width: 80%;margin-left:10%;}
blockquote.M14_cita
{
background:#ebeadd url(https://2img.net/i/fa/prosilver/quote.gif) top right no-repeat !important;
}
blockquote.M14_cita div {margin-left:0px!important;}
/*Avatar citation*/
img.M14_Img_Citation
{
height:48px;/*hauteur de l avatar*/
width:48px;/*largeur de l avatar*/
position: absolute;
margin-left:-96px;
margin-top: -5px;
border-radius: 48px;/*on arrondi l avatar*/
opacity:0.8;/*l opactite de l avatar*/
border:2px solid #333;
}
Penser a cliquer sur le bouton
Puis modifier le script donné par celui-ci:
- Code:
$(function() {
if (_userdata["user_id"] >= (0))
{
$('blockquote').each(function(){
var $this=$(this);
// L AVATAR PAR DEFAUT
var M14_AvatarDefaut="https://2img.net/u/4111/79/89/03/avatars/gallery/avi11210.png";
var M14_Get_img=$(this).find('a[title^="Voir le profil"]:first').before('<img class="M14_Img_Citation"src="'+M14_AvatarDefaut+'"/>');
var M14_user=$(this).find('a[title^="Voir le profil"]:first').attr('href');
var M14_userTexte=$(this).find('a[title^="Voir le profil"]:first').text().substring(1);
$.get(M14_user,function(data){
var M14_Img_Citation=$(data).find('#profile-advanced-right .module:first img:first').attr('src');
if(M14_user)
{
$this.addClass('M14_cita');
M14_Get_img.prev().attr('src',M14_Img_Citation).wrap('<a href="'+M14_user+'" class="M14_prof_cita" title="Voir le profil de '+M14_userTexte+'"></a>');
}
});});
}
});
wow t'es rapide. Ca me donne ceci
Le guillemet d'ouverture en est fin de ligne du titre de citation, alors qu'il doit etre en début du texte (la ligne en dessous)
Il n'y a pas de guillemet en fin
Au chargement de la page la photo profil est à cheval entre le profil et le message et il se recale après un délai 1 à 2 sec.
https://coup-de-gueule.kanak.fr/t34-ceci-est-un-message-d-essai#90
Le guillemet d'ouverture en est fin de ligne du titre de citation, alors qu'il doit etre en début du texte (la ligne en dessous)
Il n'y a pas de guillemet en fin
Au chargement de la page la photo profil est à cheval entre le profil et le message et il se recale après un délai 1 à 2 sec.
https://coup-de-gueule.kanak.fr/t34-ceci-est-un-message-d-essai#90
Hello Fred,
il va falloir être assez indulgent avec cette balise car c'est assez complexe a coder.
Il suffit de modifier le display et hop tout est explicite:
Ensuite la latence correspond à l'appel du script.
C'est pour cela que je te demandais si tu voulais appliquer cela à toutes les citations nommées:
https://www.milouze14.com/t32575-phpbb3-une-barre-de-titre-pour-les-citation-avec-la-photo-du-profil#620619
On va donc appliquer le style à toutes les citations, sauf que cela risque de buguer pour des citations traditionnelles.
Voici le style a remplacer afin d'avoir un style plus ou moins identique entre les citations nommées ou traditionnelles.
il va falloir être assez indulgent avec cette balise car c'est assez complexe a coder.
Il suffit de modifier le display et hop tout est explicite:
- Code:
blockquote cite {display: block;}
- Code:
blockquote cite {display:inline;}
Ensuite la latence correspond à l'appel du script.
C'est pour cela que je te demandais si tu voulais appliquer cela à toutes les citations nommées:
https://www.milouze14.com/t32575-phpbb3-une-barre-de-titre-pour-les-citation-avec-la-photo-du-profil#620619
On va donc appliquer le style à toutes les citations, sauf que cela risque de buguer pour des citations traditionnelles.
Voici le style a remplacer afin d'avoir un style plus ou moins identique entre les citations nommées ou traditionnelles.
- Code:
blockquote{width: 80%; margin-left:10%;}
blockquote cite a[href^="/u"]:first-child{margin-left: 20px;}
blockquote div:after {
content: "";
width: 15px;
height: 12px;
background: url("https://2img.net/i/fa/prosilver/quote.gif");
float:right!important;
position: relative;
bottom: -12px;
}
/*Avatar citation*/
img.M14_Img_Citation
{
height:48px;/*hauteur de l avatar*/
width:48px;/*largeur de l avatar*/
position: absolute;
margin-left: -105px;
margin-top: -5px;
border-radius: 48px;/*on arrondi l avatar*/
opacity:0.8;/*l opacite de l avatar*/
border:2px solid #333;
}
Merci Phil.
le premier et second code que tu mets, je n'ai pas à le copier quelque part ?
Pour le 3eme bloc de code que tu donne , c'est dans le CSS mais c'est en plus ou à la place de celui d'hier ?
Par contre il y a toujours ce problème de guillemet qui est avant "X a écrit" alors qu'il devrait à la ligne suivante, devant le texte. Et le guillemet de fin est inversé, il faut le retourner vers la gauche. Je ne trouve nul par cette image du guillemet, c'est ou dans le codage ?
le premier et second code que tu mets, je n'ai pas à le copier quelque part ?
Pour le 3eme bloc de code que tu donne , c'est dans le CSS mais c'est en plus ou à la place de celui d'hier ?
Par contre il y a toujours ce problème de guillemet qui est avant "X a écrit" alors qu'il devrait à la ligne suivante, devant le texte. Et le guillemet de fin est inversé, il faut le retourner vers la gauche. Je ne trouve nul par cette image du guillemet, c'est ou dans le codage ?
Bonjour Philippe et Fred.
S'il s’agit des gillements fermantes que tu veux inverser, peut-être simplement changer dans le css le background correspondant à l'image par celle-ci:
https://i.servimg.com/u/f31/19/32/37/01/quote10.gif
S'il s’agit des gillements fermantes que tu veux inverser, peut-être simplement changer dans le css le background correspondant à l'image par celle-ci:
https://i.servimg.com/u/f31/19/32/37/01/quote10.gif
Pour l'image de fermeture , il suffit de mettre le lien de l'image:
https://i.servimg.com/u/f31/19/32/37/01/quote10.gif
entre les doubles guillemets ici:
https://i.servimg.com/u/f31/19/32/37/01/quote10.gif
entre les doubles guillemets ici:
- Code:
blockquote div:after {
content: "";
width: 15px;
height: 12px;
background: url("https://2img.net/i/fa/prosilver/quote.gif");
float:right!important;
position: relative;
bottom: -12px;
}
Page 1 sur 2 • 1, 2
Sujets similaires
» [PHPBB3] Intégrer des boutons en relation avec le profil du membre style barre de contact
» [PHPBB2] Ajouter lien message dans titre citation
» [PHPBB3] Mettre photo en favori après un vote
» [PHPBB2] WYSIWYG pour citation sur message rapide
» [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar
» [PHPBB2] Ajouter lien message dans titre citation
» [PHPBB3] Mettre photo en favori après un vote
» [PHPBB2] WYSIWYG pour citation sur message rapide
» [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum