Astuce: Personnaliser le cadre des fichiers joints

+6
didine432
Basil Hawkins
AenigmA
quierra
FANCH 56
Shadow
10 participants

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

Astuce: Personnaliser le cadre des fichiers joints Empty Astuce: Personnaliser le cadre des fichiers joints

Message par Shadow Mar 30 Mar 2010 - 9:08

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:

Astuce: Personnaliser le cadre des fichiers joints 29-03-14
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

Astuce: Personnaliser le cadre des fichiers joints 09615175839 Ajout dans le CSS

Panneau d'administration Astuce: Personnaliser le cadre des fichiers joints Arrow10 Affichage Astuce: Personnaliser le cadre des fichiers joints Arrow10 Couleurs Astuce: Personnaliser le cadre des fichiers joints Arrow10 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;
}

Astuce: Personnaliser le cadre des fichiers joints Enregi13

Récapitulatif des propriétés CSS:

Astuce: Personnaliser le cadre des fichiers joints 29-03-15

.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

Astuce: Personnaliser le cadre des fichiers joints Margin10
Image B

Un grand merci à Quierra qui nous a inspiré pour ce tuto Very Happy

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.


Dernière édition par Zen le Mar 30 Mar 2010 - 10:19, édité 3 fois
Shadow

Shadow
Modéractive
Modéractive

Féminin
Messages : 24353
Inscrit(e) le : 30/03/2007

Voir le profil de l'utilisateur
Shadow a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par Invité Mar 30 Mar 2010 - 9:18

Bonjour,

Zen a écrit: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 ! Mr. Green
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par Shadow Mar 30 Mar 2010 - 9:44

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
Shadow

Shadow
Modéractive
Modéractive

Féminin
Messages : 24353
Inscrit(e) le : 30/03/2007

Voir le profil de l'utilisateur
Shadow a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par Invité Mar 30 Mar 2010 - 9:55

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 :
Astuce: Personnaliser le cadre des fichiers joints Captur21

EDIT : Serait-ce une version Beta Zen ?
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par Shadow Mar 30 Mar 2010 - 10:11

Oui, c'est bien la version Beta.

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

Shadow
Modéractive
Modéractive

Féminin
Messages : 24353
Inscrit(e) le : 30/03/2007

Voir le profil de l'utilisateur
Shadow a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par FANCH 56 Mar 30 Mar 2010 - 18:01

Image sous Linux
Firefox

Astuce: Personnaliser le cadre des fichiers joints Captu171
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

Voir le profil de l'utilisateur https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par quierra Jeu 1 Avr 2010 - 1:05

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).
quierra

quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

Voir le profil de l'utilisateur http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par AenigmA Jeu 1 Avr 2010 - 11:03

Belle idée, merci (Quierra)
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

Voir le profil de l'utilisateur http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par Basil Hawkins Sam 3 Avr 2010 - 10:56

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 ! Smile
Basil Hawkins

Basil Hawkins
****

Masculin
Messages : 458
Inscrit(e) le : 24/10/2009

Voir le profil de l'utilisateur http://rpg-world.forum-actif.net/
Basil Hawkins a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par didine432 Mar 6 Avr 2010 - 9:55

excellent, ça marche

merci beaucoup pour l'astuce
didine432

didine432
**

Féminin
Messages : 52
Inscrit(e) le : 24/03/2008

Voir le profil de l'utilisateur http://pele-mele-des-sister.forumactif.com/forum.htm
didine432 a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par kelly97 Dim 11 Avr 2010 - 19:11

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

kelly97
Membre actif

Messages : 2063
Inscrit(e) le : 26/01/2007

Voir le profil de l'utilisateur
kelly97 a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par Invité Mer 14 Avr 2010 - 19:09

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par K@K Mer 14 Avr 2010 - 21:31

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

K@K
*****

Masculin
Messages : 848
Inscrit(e) le : 04/04/2008

Voir le profil de l'utilisateur http://www.1302-03only.com/forum
K@K a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par mastyx Jeu 4 Nov 2010 - 20:40

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

mastyx
*****

Masculin
Messages : 993
Inscrit(e) le : 04/12/2007

Voir le profil de l'utilisateur http://www.repticlic.com
mastyx a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par Ea Jeu 4 Nov 2010 - 20:46

Bonjour,


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

Code:
.attachbox{
 ...
}
Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Voir le profil de l'utilisateur
Ea a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par mastyx Jeu 4 Nov 2010 - 21:02

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

mastyx
*****

Masculin
Messages : 993
Inscrit(e) le : 04/12/2007

Voir le profil de l'utilisateur http://www.repticlic.com
mastyx a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par mastyx Jeu 4 Nov 2010 - 21:03

Non le . et bel et bien devant le attachbox scratch
mastyx

mastyx
*****

Masculin
Messages : 993
Inscrit(e) le : 04/12/2007

Voir le profil de l'utilisateur http://www.repticlic.com
mastyx a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par mastyx Jeu 4 Nov 2010 - 21:10

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! Wink
mastyx

mastyx
*****

Masculin
Messages : 993
Inscrit(e) le : 04/12/2007

Voir le profil de l'utilisateur http://www.repticlic.com
mastyx a été remercié(e) par l'auteur de ce sujet.

Astuce: Personnaliser le cadre des fichiers joints Empty Re: Astuce: Personnaliser le cadre des fichiers joints

Message par Ea Jeu 4 Nov 2010 - 21:12

à 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 ^__^
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Voir le profil de l'utilisateur
Ea a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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