En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Mentions légales.

TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION
SERVICES
JQUERY
EN VRAC
EXEMPLES
En ce moment...

 121885 visiteurs

 1 visiteur en ligne

  • Fichier jqstyle.css
    • Pour davantage de précisions, voir les articles de la boîte JQUERY
  • Onglets
    • #gytabs{
          display: none;
          margin-left: -4px;
      }
      Ensemble des onglets
      #gytabs li{
          position: relative;
          float: left;
          list-style: none;
          padding: 2px 5px 7px;
          margin-right : -8px;
          border: 1px solid #8F916A;
          cursor: pointer;
          background-color: inherit;
          color: #000000;
          z-index: 1;
      }
      Titre des onglets
      #gytabs .gyactif{
          margin-bottom : 1px;
          background-color: #8F916A;
          font-weight: bold;
          color: #FFFFFF;
          z-index: 10;
      }
      Onglet actif
      #gytabcontent{
          clear: both;
          position: relative;
          margin: 0 2px;
          padding: 0 4px;
          border: 1px solid #8F916A;
          top: -2px;
          background-color: #ECEFC2;
          color: #000000;
          width: auto;
          overflow: hidden;
          z-index: 5;
      }
      Contenu des onglets

  • Accordéon vertical
    • #gyaccordion {
          width: auto;
          height: auto;
          list-style-type: none;
          background-color: inherit;
          color: inherit;
      }
      Accordéon
      #gyaccordion a {
          display: block;
          font-weight: bold;
          text-decoration: none;
      }
      Lien
      #gyaccordion ul {
          overflow: hidden;
          margin: 0;
          padding: 0;
      }
      Titre et contenu
      #gyaccordion li {
          margin: auto;
          list-style-type: none;
          height:auto;
      }
      Titre de chaque onglet
      #gyaccordion li a {
          width: auto;
          height: auto;
          padding: 4px;
          display: block;
          color: #FFFFFF;
      }
      Lien de chaque titre
      #gyaccordion li a.closed {
          color: #000000 !important;
          background-color: #ECEFC2;
          border: 1px solid #67890B;
          margin: 4px 0;
      }
      Lien fermé
      #gyaccordion li.firstitem a.closed {
          color: #000000 !important;
          background-color: #ECEFC2;
          border: 1px solid #67890B;
      }
      Premier onglet quand il est fermé
      #gyaccordion li.lastitem a.closed {
          color: #000000 !important;
          background-color: #ECEFC2;
          border: 1px solid #67890B;
      }
      Dernier onglet quand il est fermé
      #gyaccordion li  li {
          width: auto;
          height: auto;
          margin: auto;
          line-height: 28px;
          border: 1px solid #67890B;
      }
      Contenu
      #gyaccordion li a.opened {
          color: #FFFFFF;
          font-weight: bold;
          background-color: #67890B;
          border: 1px solid #67890B;
          margin: 4px 0;
      }
      Onglet ouvert
      #gyaccordion li.firstitem a.opened {
          color: #FFFFFF;
          font-weight: bold;
          background-color: #67890B;
          border: 1px solid #67890B;
          margin: 4px 0;
      }
      Premier onglet quand il est ouvert
      #gyaccordion li.lastitem li {
          margin: 4px 0 12px 0;
      }
      Dernier onglet
      #gyaccordion li.lastitem ul {
          padding-bottom: 4px;
          margin: 0;
      }
      Dernier titre et contenu

  • Fenêtre modale
    • #gyfade {
          display: none;
          background: #000000;
          position: fixed;
          left: 0;
          top: 0;
          z-index: 10;
          width: 100%;
          height: 100%;
          opacity: .60;
          z-index: 9999;
      }
      Fond derrière la fenêtre. Ici, noir légèrement transparent
      .gypopup_block{
          display: none;
          background: #F5F7DC;
          color: #000000;
          padding: 20px;     
          float: left;
          font-size: 1.2em;
          position: fixed;
          top: 50%; left: 50%;
          z-index: 99999;
          box-shadow: 0px 0px 20px #000000;
          border: 14px solid #67890B;
          border-radius: 6px;
      }
      Fenêtre contenant le texte et/ou l'image ainsi que l'image pour fermer
      .gypopup_block a { /* lien pop */
          color : #000000;
          text-decoration: underline;
      }
      Lien dans la fenêtre
      img.gybtn_close {
          float: right;
          margin: -50px -50px 0 0;
          border: none;
          color: #FFFFFF;
      }
      Image pour fermer la fenêtre
      .gypopup p {
          padding: 5px 10px;
          margin: 5px 0;
      }
      Attributs du texte de la fenêtre


Date de création : 28/06/2013 12:38
Page lue 4068 fois


Vous êtes ici :   Accueil » jqstyle.css