TUTO SKINS

Centre d'Aide GuppY


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

 100632 visiteurs

 2 visiteurs 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 3170 fois


Vous êtes ici :   Accueil » jqstyle.css