Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB3] Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne


2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Freedom Sun
Freedom Sun
Modérateur

https://misterswing.forumactif.com/

MessageFreedom Sun Dim 17 Nov 2024 - 14:59

Bonjour à toutes et tous, hinhin

Si cela vous dit : cette astuce est assez sympa !

Vous pouvez Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne.

Il y a une partie en template et une autre partie en CSS :

1 - Exemple en image pour les icônes "Nouveau et Répondre" vous pouvez apercevoir quand la souris passe sur l'un de ces icônes, ceci est flouté.

[PHPBB3] Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne Nr010

Pour la partie Template : on va y coller ce code span :
Code:
<span id="Freedom"class="section-flou">  </span>

Dans votre : Panneau d'administration / Affichage / Templates / Général : viewtopic_body :

Cherchez ceci : les icônes "Nouveau et Répondre"
Code:
<div class="buttons">

      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img title="Nouveu sujet" src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" />  </a>  
      <!-- END switch_user_authpost -->

      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}"><img title="Répondre au message" src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      <!-- END switch_user_authreply -->
     </div>

Collez le code du span entre les deux div intérieurement :
Code:
<span id="Freedom"class="section-flou"> </span>

Ce qui vous donnera :
Code:
<div class="buttons"><span id="Freedom"class="section-flou">
    
      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img title="Nouveu sujet" src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /> &nbsp;</a>  
      <!-- END switch_user_authpost -->

      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}"><img title="Répondre au message" src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      <!-- END switch_user_authreply -->
     </span></div>

------

2 - Exemple en image pour les petites icônes "Citer" "éditer" "supprimer", etc, vous pouvez apercevoir quand la souris passe sur l'un de ces icônes, ceci est flouté.

[PHPBB3] Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne Im110

Pareillement comme la partie 1 :

Dans votre : Panneau d'administration / Affichage / Templates / Général : viewtopic_body :

Cherchez ceci :  les petites icônes "Citer" "éditer" "supprimer", etc,
Code:
<ul class="profile-icons">
               <li>{postrow.displayed.THANK_IMG}</li>
               <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
               <li>{postrow.displayed.QUOTE_IMG}</li>
               <li>{postrow.displayed.EDIT_IMG}</li>
               <li>{postrow.displayed.DELETE_IMG}</li>
               <li>{postrow.displayed.IP_IMG}</li>
              <li>{postrow.displayed.REPORT_IMG_NEW}</li></span>
            </ul>

Collez le code du span entre les deux ul intérieurement :
Code:
<span id="Freedom"class="section-flou"> </span>

Ce qui vous donnera :
Code:
<ul class="profile-icons"><span id="Freedom"class="section-flou">
               <li>{postrow.displayed.THANK_IMG}</li>
               <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
               <li>{postrow.displayed.QUOTE_IMG}</li>
               <li>{postrow.displayed.EDIT_IMG}</li>
               <li>{postrow.displayed.DELETE_IMG}</li>
               <li>{postrow.displayed.IP_IMG}</li>
              <li>{postrow.displayed.REPORT_IMG_NEW}</li>
            </span></ul>

Maintenant passons au SCC :

Dans votre : Panneau d'administration / Affichage / Images et Couleurs / Feuille de style CSS

Collez ce code CSS :
Code:
/**Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne**/
 /* DEBUT CSS FLOU SUR IMAGE */
span#Freedom.section-flou a, span#Freedom.section-flou{
}

span#Freedom.section-flou:hover a {  
    filter: blur(10px);            /*Augmenter ou diminuer la valeur du flou en px des icones voisins au passage de la souri et mettre le même px dans le reste de cette section*/
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');  /* Ajouter le même nombre, sans y mettre de px */
  
}
span#Freedom.section-flou:hover a:hover {
    filter: blur(0px);            /* Augmenter ou déminuer la valeur du flou en px de l'icone ou se trouve votre souris et mettre le même px dans le reste cette section */    
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');   /* Ajouter le même nombre, sans y mettre de px */
}
/* FIN CSS FLOU SUR IMAGE */
/**Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne**/


Vous pouvez aussi mettre le flou dans divers endroits de vos icônes dans d'autres templates :
Suffit juste d'y rajouter le code span à chaque extrémité intérieure de vos codes icônes !!

Je précise que si vous mettez le code span à chaque extrémité extérieurement de vos codes icônes, le flou n'aura aucun n'effet !

En espérant que ceci vous plaira...

Si vous avez des questions, faites le savoir en créant une demande d'Entraide avec un titre assez explicite et si possible avec une capture d'image de votre besoin ! pour qu'une aide vous soit mieux adaptée !

https://www.milouze14.net/f14-entraide#A

Voir cette page pour être certain d'avoir validé votre template :  clin oeil

https://www.milouze14.net/h2-diverses-aides


À bientôt, impeccable


Dernière édition par Freedom Sun le Dim 17 Nov 2024 - 16:55, édité 2 fois

Milouze14, Bri et fred9545 aiment ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 17 Nov 2024 - 18:52

@Freedom Sun,
merci beaucoup pour cette astuce et pour le partage Stefano Merci

Bri et Freedom Sun aiment ce message

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum