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

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:

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


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

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

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

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

Invité
Invité


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

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


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

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

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

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 :


EDIT : Serait-ce une version Beta Zen ?

Invité
Invité


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

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


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

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

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

Re: Astuce: Personnaliser le cadre des fichiers joints

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

Image sous Linux
Firefox


FANCH 56
+ Hyperactif +

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

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

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

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.

Re: Astuce: Personnaliser le cadre des fichiers joints

Message par AenigmA le Jeu 1 Avr 2010 - 11:03

Belle idée, merci (Quierra)

AenigmA
+ Hyperactif +

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

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

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

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.

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

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.

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
+ Hyperactif +

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

http://jobasv.net
kelly97 a été remercié(e) par l'auteur de ce sujet.

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/

Invité
Invité


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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Messages : 23429
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