Astuce: Personnaliser le cadre des fichiers joints

[Shadow]

Personnalisé le cadre des fichiers joints

Suite à la mise à jour de la semaine dernière, FA vous fournit cette astuce afin que vous puissiez personnaliser le cadre des pièces jointes: A savoir que L'effet du coin arrondi n'apparait que pour les membres utilisant les navigateurs: Firefox Safari Google Chrome Opera version 10.51 Ajout dans le CSS Panneau d'administration Affichage Couleurs Feuille de style CSS Insérez ce code dans votre feuille de style CSS : Code: .attachbox{ background-color: #191919; background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg'); border: 1px solid #888888; -moz-border-radius-topleft: 15px; -webkit-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -webkit-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius-bottomleft: 0px; color:#ffffff; }   .attachbox dl.file{ background-color: #212121; margin-top: 8px; padding: 5px; border: 1px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; } Récapitulatif des propriétés CSS: .attachbox >> Partie A background-color: #191919; >> La couleur de fond background-image: url('http:adresse_image'); >> L'image de fond border: 1px solid #888888; >> La bordure de la partie A -moz-border-radius-topleft: 15px; -webkit-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -webkit-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius-bottomleft: 0px; >> Les 4 coins color:#ffffff; >> Couleur de texte de la partie a .attachbox dl.file >> Partie B background-color: #212121; >> Couleur de fond margin-top: 8px; >> la marge extérieure haute (supérieure) (Voir image B) padding: 5px; >> La marge intérieure (Voir image B) border: 1px solid #fff; >> La couleur de bordure -moz-border-radius: 15px; -webkit-border-radius: 15px; >> Les 4 coins Image B Un grand merci à Quierra qui nous a inspiré pour ce tuto

Ce tutoriel a été rédigé par le Staff du Forum des Forums. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.

[Invité]

Bonjour,

L'effet du coin arrondi n'apparait
que pour les membres utilisant les
navigateurs:

• Firefox
  
• Safari
  
• Google Chrome

Ah mais que nenni !

• Opera

ça fait bien trois semaines qu'il les voit avec d'abord la version 10.50 et maintenant la version corrigée 10.51.
Hop pop hop, on l'ajoute on l'ajoute !

[Shadow]

Bonjour,

Je vous confirme que ça ne fonctionne pas sous Opera 10.52, pouvez vous tester sous la version 10.51 si vous l'avez. Merci!

Cordialement

[Invité]

Ah ben ils viennent de mettre la 10.51 en ligne le weekend dernier et il y aurait déjà la 10.52 ? (je ne peux pas vérifier pour le moment.)

Mais voici ce que je vois de mon CSS avec la version Opera 10.51 en mieux que des mots :


EDIT : Serait-ce une version Beta Zen ?

[Shadow]

Oui, c'est bien la version Beta.

Tant mieux si ça fonctionne sous Opera 10.51, je l'ai ajouté dans l'astuce. Merci!

[FANCH 56]

Image sous Linux
Firefox

[quierra]

Coucou, et bien c'est moi qui vous remerci d'avoir retenue une de mes idées, surtout quand je vois à quel point c'est bien expliqué.
Je n'aurai pas su mieux faire !

Bonne soirée (ou bonne nuit).

[AenigmA]

Belle idée, merci (Quierra)

[Basil Hawkins]

C'est bien de dire que ça marche sous Opéra, mais faudrait mettre le code ! XD

En effet maintenant c'est un troisième nouveau code qui était déjà présent pour certains :

Code:

border-radius: Xpx;

Le border-radius du CSS 3 tout simple sans aucun préfixe, eh oui !

[didine432]

excellent, ça marche

merci beaucoup pour l'astuce

[kelly97]

bjr pardon mais dans le pa ou le mets ou svp ?

[Invité]

Pourquoi ne pas utiliser CSS3 et appeller un fichier. htc pour rendre internet explorer compatible ? http://code.google.com/p/curved-corner/

[K@K]

Bonsoir,
p'tite question: elle sert à quoi cette astuce car là je ne vois pas du tout

[mastyx]

Je comprend pas, je fait des modif pour les couleurs et image de fond, je valide dans mon CSS mais aucunne modifs ne suit! ???

[Ea]

Bonjour,


Il manque le . devant attachbox, c'est comme ceci :

Code:

.attachbox{
 ...
}

Cordialement.

[mastyx]

Ajout: En faissant Optimisez votre CSS toutes les modifs reviennent au point original!!!

[mastyx]

Non le . et bel et bien devant le attachbox

[mastyx]

Je viens de trouver

Le script doit être placé AVANT le script qui arrondis les coins dans le forum (si vous l'avez d'installé) sinon il entre en conflit avec celui-ci!

[Ea]

à un moment le code :

Code:

blink {
          visibility: expression((function(){
          if (!window.IEBlink) {
          window.IEBlink = "visible";
          setInterval(function() {
          window.IEBlink = (window.IEBlink=="visible"?"hidden":"visible");
          var blinks = document.getElementsByTagName("blink");
          for (var i=0; i < blinks.length; i++) { blinks[i].style.visibility=window.IEBlink; }
          }, 700)
          }
          return "";
          })());
        }

Rendait tout le code qui suit innactif sous google chrome, enfin il vaut mieux le mettre à la fin, à part cela maintenant qu'il y a le point il n'y a pas de raison que ça ne fonctionne pas ^__^