By continuing your navigation on this site, you accept the use of cookies to offer you contents and adapted services. Legal Notice.

SKINS TUTO

GuppY Help Center


PRESENTATION
BOXES
SERVICES
JQUERY
BULK
EXAMPLES
Currently...

 121886 visitors

 1 visitor online

  • 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


Creation date : 28/06/2013 12:38
Page read 4069 times


You are here :   Home » jqstyle.css