Gantry4/joomla2.5 + gantry-custom.css et # rt-showcase avec Chrome et Firefox

Réduire
X
Réduire
 
  • Page sur 1
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages
Précédent template Suivant
  • #1

    [RÉGLÉ] Gantry4/joomla2.5 + gantry-custom.css et # rt-showcase avec Chrome et Firefox

    Bonjour à tous !

    Un titre bien compliqué pour un problème simple, mais qui visiblement ne veut pas se résoudre seul !!

    J'ai modifié un peu le showcase de Gantry, surtout au niveau du background au niveau des CSS compilés et du fichier, que j'ai créé, gantry.custom.css. Je n'ai pas la maîtrise de LESS à ce jour et pas encore pris le temps de m'y pencher...

    Cela fonctionne avec Chrome et Safari qui ont le même moteur, mais pas avec IE, Firefox et Opéra, indépendamment des plateformes PC ou MAC ; un peu comme si le CSS n'était pas compris ou les propriétés pas lues ou peut-être simplement pas les bons préfixes...

    J'avoue ne pas comprendre...

    Le site est en ligne : http://www.essonne-location.com

    Si vous avez des pistes, voire la solution, merci d'avance...
    Ils ne savaient pas que c'était impossible, alors ils l'ont fait - Mark Twain.
    Tags: Aucun
  • #2
    Re : Gantry4/joomla2.5 + gantry-custom.css et # rt-showcase avec Chrome et Firefox

    mets ici, stp, les propriétés css que tu as ajoutées.
    Serge (le même que sur la liste gantry)
    aidons nous les uns les autres ...

    https://www.web54.fr

    Commentaire

    • #3
      Re : Gantry4/joomla2.5 + gantry-custom.css et # rt-showcase avec Chrome et Firefox

      Bonjour et merci Serge de votre réponse.

      Ci-dessous mon fichier gantry-custom.css mis dans le dossier CSS de la dernière version de Gantry pour Joomla 2.5.
      J'aimerais aussi comprendre quelque chose qui m'échappe. Quand je regarde les fichiers de Gantry installé, il y a plein de fichier CSS dans le dossier css-compiled, alors qu'il n'y sont pas dans la version dézippée téléchargée non-installé (on y trouve juste fusionmenu.css et mediaqueries.css) ; ne sachant pas exactement pourquoi, c'est ici que j'ai retrouvé les propriétés css initiales que j'ai modifié dans mon gantry-custom.css. J'ai aussi modifié les propriétés à l'identique de celles ci-dessous. Ais-je fait une erreur aussi ?

      Merci de votre réponse et de votre disponibilité.

      h1,h2,h3,h4,h5,h6{color:#faf1f1;}

      h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:1;color:inherit;text-renderingptimizelegibility;}

      h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;line-height:1;color:#faf1f1;}

      h1{font-size:1.5em;line-height:40px;}

      h2{font-size:1.4em;line-height:40px;}

      h3{font-size:1.3em;line-height:40px;}

      h4{font-size:1.2em;line-height:20px;}

      h5{font-size:1.1em;line-height:20px;}

      h6{font-size:1em;line-height:20px;}

      .title,.component-content h2{font-size:1,4em;line-height:30px;font-weight:normal;letter-spacing:normal;margin-top:0;}

      .title,.component-content h2{color:#faf1f1;text-shadow:1px 1px 0 #999;}


      .rt-block{padding:0px;margin:0px;position:relative;}

      body{
      background-color: #f1f1f1;
      font-size:13px;
      line-height:1.7em;
      font-family:Optima, Lucida, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;
      }

      .font-size-is-xlarge{font-size:16px;line-height:1.7em;}.font-size-is-large{font-size:15px;line-height:1.7em;}

      .font-size-is-default{
      color: #faf1f1;
      font-size:1em;
      line-height:1.7em;
      background-color: #4d4b4b;
      -moz-background-color: #4d4b4b;
      -webkit-background-color: #4d4b4b;
      -o-background-color: #4d4b4b;
      -ms-background-color: #4d4b4b;
      -khtml-background-color: #4d4b4b;
      }

      .font-size-is-small{font-size:12px;line-height:1.7em;}.font-size-is-xsmall{font-size:10px;line-height:1.7em;}

      p{margin:0 0 0px 0;}

      #rt-transition.rt-hidden{
      opacity:0;
      background-color: #4d4b4b;
      -moz-background-color: #4d4b4b;
      -webkit-background-color: #4d4b4b;
      -o-background-color: #4d4b4b;
      -ms-background-color: #4d4b4b;
      -khtml-background-color: #4d4b4b;
      }

      #rt-transition.rt-visible{
      background-color: #4d4b4b;
      -moz-background-color: #4d4b4b;
      -webkit-background-color: #4d4b4b;
      -o-background-color: #4d4b4b;
      -ms-background-color: #4d4b4b;
      -khtml-background-color: #4d4b4b;
      opacity:1;
      -webkit-transitionpacity 0.4s ease-in;
      -moz-transitionpacity 0.4s ease-in;
      -o-transitionpacity 0.4s ease-in;
      transitionpacity 0.4s ease-in;}

      #rt-copyright{
      border-top:1px solid #d5d5d5;
      -webkit-box-shadow:inset 0 1px 0 #ffffff;
      -moz-box-shadow:inset 0 1px 0 #ffffff;
      box-shadow:inset 0 1px 0 #ffffff;
      }


      #rt-top-surround{
      background-color: #f1f1f1;
      -moz-background-color: #f1f1f1;
      -webkit-background-color: #f1f1f1;
      -o-background-color: #f1f1f1;
      -ms-background-color: #f1f1f1;
      -khtml-background-color: #f1f1f1;
      background-image:-moz-linear-gradient(top,#ffffff,#dddddd);
      background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#dddddd));
      background-image:-webkit-linear-gradient(top,#ffffff,#dddddd);
      background-image:-o-linear-gradient(top,#ffffff,#dddddd);
      background-image:linear-gradient(to bottom,#ffffff,#dddddd);
      background-repeat:repeat-x;
      filterrogidXImageTransform.Microsoft.gradient(startColorstr=' #ffffffff', endColorstr='#ffdddddd', GradientType=0);
      color:#6e6e6e;
      text-shadow:0 2px 3px #ffffff;
      -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.3);
      -moz-box-shadow:0 2px 4px rgba(0,0,0,0.3);
      box-shadow:0 2px 4px rgba(0,0,0,0.3);
      border-bottom:1px solid #ffffff;}

      #rt-top-surround .title{color:#303030;text-shadow:1px 1px 1px #ffffff;}#rt-top-surround a:hover{color:#303030;}#rt-top-surround:after{background:url(../images/patterns/noise.png);}

      #rt-showcase{
      background:url(../images/patterns/noise.png);
      background-color: #f1f1f1;
      background-image:-moz-linear-gradient(top,#ffffff,#dddddd);
      background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#dddddd));
      background-image:-webkit-linear-gradient(top,#ffffff,#dddddd);
      background-image:-o-linear-gradient(top,#ffffff,#dddddd);
      background-image:linear-gradient(to bottom,#ffffff,#dddddd);
      background-repeat:repeat-x;
      filterrogidXImageTransform.Microsoft.gradient(startColorstr=' #ffffffff', endColorstr='#ffdddddd', GradientType=0);
      color:#6e6e6e;
      text-shadow:0 2px 3px #ffffff;
      -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.3);
      -moz-box-shadow:0 2px 4px rgba(0,0,0,0.3);
      box-shadow:0 2px 4px rgba(0,0,0,0.3);
      border-bottom:1px solid #ffffff;

      #rt-showcase .title{color:#303030;text-shadow:1px 1px 1px #ffffff;}#rt-showcase a:hover{color:#303030;}

      .rt-showcase-pattern{
      background-size:80px 80px, 80px 80px, 5px 5px, 5px 5px;
      background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;}

      legend{color:#faf1f1;border-bottom:1px solid #d5d5d5;}

      legend small{color:#faf1f1;}

      legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:40px;color:#333;border:0;border-bottom:1px solid #e5e5e5;}

      legend small{font-size:15px;color:#faf1f1;}
      Ils ne savaient pas que c'était impossible, alors ils l'ont fait - Mark Twain.

      Commentaire

      • #4
        Re : Gantry4/joomla2.5 + gantry-custom.css et # rt-showcase avec Chrome et Firefox

        La solution est comme d'habitude simple et en même temps il suffisait de le savoir ou d'être capable de le voir.
        Sur le forum Google group gantry : https://groups.google.com/forum/?fro...rs/Bh1uXqLQlpY

        Rapide description de la solution : conflit entre "background:url"et "background-image" dans le le #rt-showcase, du coup la propriété gradient s'applique sur les autre moteur que webkit (Opéra, FF, IE) et la couleur de fond ne se voit pas.
        J'ai supprimé la ligne, inutile de plus pour ce que je voulais faire : background:url(../images/patterns/noise.png);

        Mais je veux bien Serge la réponse à cette question ci-dessous ou un lien tutoriel qui m'explique !
        J'aimerais aussi comprendre quelque chose qui m'échappe. Quand je regarde les fichiers de Gantry installé, il y a plein de fichier CSS dans le dossier css-compiled, alors qu'il n'y sont pas dans la version dézippée téléchargée non-installé (on y trouve juste fusionmenu.css et mediaqueries.css) ; ne sachant pas exactement pourquoi, c'est ici que j'ai retrouvé les propriétés css initiales que j'ai modifié dans mon gantry-custom.css. J'ai aussi modifié les propriétés à l'identique de celles ci-dessous. Ais-je fait une erreur aussi ?

        Merci encore de votre gentillesse...
        Ils ne savaient pas que c'était impossible, alors ils l'ont fait - Mark Twain.

        Commentaire

        • #5
          Re : Gantry4/joomla2.5 + gantry-custom.css et # rt-showcase avec Chrome et Firefox

          bon, j'arrive un peu tard et marcin t'as déjà expliqué comment modifier.
          pour ce qui est des fichier css-compiled : je vais essayer de le faire simplement :
          gantry crée des css à la volée en fonction des paramètres que tu lui donnes dans l'administration.
          par exemple, la couleur de fond, certaines distances, les polices.
          c'est pour cela que nous créons un fichier gantry custom.

          je vais faire un tuto plus complet là dessus, car c'est une des questions les plus récurrentes.
          ( pour mettre du code dans ce forum il y a des boutons exprès dans l'éditeur ci dessus en mode avancé)
          Code:
           code
          aidons nous les uns les autres ...

          https://www.web54.fr

          Commentaire

          • #6
            Re : Gantry4/joomla2.5 + gantry-custom.css et # rt-showcase avec Chrome et Firefox

            Merci bien tataye !
            Ils ne savaient pas que c'était impossible, alors ils l'ont fait - Mark Twain.

            Commentaire

            Précédent template Suivant

            Annonce

            Réduire
            Aucune annonce pour le moment.

            Partenaire de l'association

            Réduire
            Hébergeur Web PlanetHoster
            Travaille ...
            X