Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Astuce: Personnaliser le cadre des fichiers joints

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 le 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
Adminactive
Adminactive

Masculin
Messages : 24353
Inscrit(e) le : 30/03/2007

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é le 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 le 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
Adminactive
Adminactive

Masculin
Messages : 24353
Inscrit(e) le : 30/03/2007

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é le 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 le 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
Adminactive
Adminactive

Masculin
Messages : 24353
Inscrit(e) le : 30/03/2007

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 le 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

http://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 le 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

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 le Jeu 1 Avr 2010 - 11:03

Belle idée, merci (Quierra)
AenigmA

AenigmA
Membre actif

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

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 le 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

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 le 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

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 le 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

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é le 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 le 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

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 le 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

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 le Jeu 4 Nov 2010 - 20:46

Bonjour,


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

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

Ea
Aidactif
Aidactif

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

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 le 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

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 le 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

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 le 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

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 le 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 : 23550
Inscrit(e) le : 04/04/2008

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

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


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