TUTO SKINS

Centre d'Aide GuppY


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

 101894 visiteurs

 1 visiteur en ligne

  • Skin no_skin
    • Ici, le fichier style.css est présenté en détail, section par section.
    • C'est à partir du fichier de cette skin qu'il est préférable de construire votre skin car tous les attributs de base, nécessaires au bon affichage du site, y sont inscrits.
    • Vous pourrez ensuite ajouter ajouter les attributs que vous souhaitez pour personnaliser votre skin.
  • GÉNÉRAL
    • html { /*  document */
        font: 12px Arial, Helvetica, sans-serif;
        color: #000000;
        background: inherit;
      }
      Fond du site
      body { /*  corps du document */
        margin: 0;
        font: 12px Arial, Helvetica, sans-serif;
        color: #000000;
        background-color: #F5F7DC;
      }
      a { /* lien */
          color: #000000;
          background: inherit;
          text-decoration: none;
      }
      Attributs des liens pour tout le site
      a.titre { /* lien titres */
          color: #000000;
          background-color: inherit;
          text-decoration: none;
      }
      Attributs des liens dans les titres
      a:hover { /* lien survolé */
          color: #FF0000;
          text-decoration: none;
          font-weight: bold;
          background-color: inherit;
          position: relative;  top: 1px;  left: 1px;
      }
      Attributs des liens survolés
      p { /* paragraphe */
          margin: 16px 0;
          color: inherit;
          background: inherit;
      }
      Attributs des paragraphes
      hr { /* ligne horizontale */
          height: 1px;
          border: 1px inset #000000;
          width: 98%;
      }
      Ligne horizontale
      ul, ol, dl, dd, dt { /* listes */
          padding: 0;
          margin: 0;
      }

      UL : liste à puces non numérotées

      OL : liste numérotée

      DL : liste de définitions

      DD : définition du terme

      DT : terme à définir

      h1 { /* titre niveau 1 */
          font-size: 24px;
      }
      h2 { /* titre niveau 2 */
          font-size: 18px;
      }
      h3 { /* titre niveau 3 */
          font-size: 16px;
      }
      h4 { /* titre niveau 4 */
          font-size: 14px;
      }
      Taille des caractères selon les niveaux de titre
      img {
          border-style: none !important;
      }
  • BLOCS PRINCIPAUX
    • #noscriptWarning {
          background: #B5121B;
          color: #FFF;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 24px;
          line-height: 24px;
          font-weight: 700;
          font-size: 11px;
          font-family: Arial, sans-serif;
      }
      #screen_choice {
          z-index: 20;
          position: absolute;
          top: 2px;
          right: 4px;
          padding: 0px;
          margin: 0;
          text-align: right;
      }

      Sélecteur de la résolution

      (plein écran ou 1024 ou 1280)

      #page{ /* all the page */
          padding-top: 8px;
          color: inherit;
          background-color: #F5F7DC;
      }
      Attributs de la page
      #header { /* header */
          color: inherit;
          background-color: inherit;
      }
      Attributs de la partie entre le haut du site et l'entête (ne contient aucune boîte)
      #TopBoxes { /* header top and middle (logo-banner + citation) */
          height: auto;
          margin: 0;
          padding: 0;
          color: inherit;
          border: 1px solid #000000;
          border-radius: 6px;
          background-color: #CFDD35;
      }
      Attributs de l'entête (ancien #header dans 4.6)
      #MainContent { /* main page */
          margin: 0 4px;
          padding: 0;
      }
      Attributs de la partie principale du site
      #LeftBoxes { /* leftboxes area */
          margin: 0;
          padding-right: 4px;
          width: 172px;
      }
      Attributs de la colonne gauche des boîtes latérales
      #RightBoxes { /* right boxes area */
          margin: 0;
          padding-left: 4px;
          width: 172px;
      }
      Attributs de la colonne droite des boîtes latérales
      #AboveBoxes { /* boîtes au-dessus dans la partie centrale */
          background : inherit;
      }
      Attributs de la partie au-dessus de la partie centrale
      #EditoBoxes { /* boîtes qui apparaissent dans la page d"accueil - CONFIG ACCUEIL */
          background: inherit;
      }
      Attributs de la partie Éditorial sur la page d'accueil
      #UnderBoxes { /*boîtes en-dessous dans la partie centrale */
          background: inherit;
      }
      Attributs de la partie en-dessous de la partie centrale
      #BottomBoxes { /* optionnal area between main page and bottom */
          margin: 4px 8px;
          text-align: left;
      }
      Attributs de la partie entre la partie principale et le pied-de-page
      #footer { /* footer Copyright */
          font-family: Arial, Helvetica, sans-serif;
          text-align: center;
          color: #000000;
          background-color: #CFDD35;
          border: 1px solid #000000;
          border-radius: 6px;
          padding: 0 8px;
      }
      Attributs du pied-de-page (ne contient que le Copyright)
      #skinCopyright {
          width: 100%;
          text-align: center;
      }
      Copyright de la skin ou tout autre texte qui s'insère dans le pied-de-page
  • BLOG
    • #BlogTop {
          width: 100%;
          padding: 0;
          margin: 0;
          color: inherit;
          background-color : inherit;
      }
      Attributs du haut du blog
      #BlogLeftBoxes { /* colonne gauche du blog */
          padding: 0;
          margin: 0;
          color: inherit;
          background-color : transparent;
          width: 172px;
      }
      Attributs de la colonne de gauche du blog
      #BlogRightBoxes { /* colonne droite du blog */
          padding: 0;
          margin: 0;
          color: inherit;
          background-color : transparent;
          width: 172px;
      }
      Attributs de la colonne de droite du blog
  • LOGO - BANNIÈRES - CITATIONS
    • div.logo { /* block logo */
          padding: 0 8px;
          text-align: center;
      }
      Attributs du logo
      div.banner { /* block bannière */
          background-repeat: no-repeat;
          padding: 8px;
          text-align: center;
      }
      Attributs de la bannière
      div.quote { /* block citation */
          text-align: center;
          padding: 0 4px;
      }
      Attributs de la boîte citation
      div.quote span.labelcita { /* label */
          font: bold 11px Arial, Helvetica, sans-serif;
          color: #000000;
          background: inherit;
          border: 0;
          margin: 0;
          padding: 0 8px;
      }
      Attributs de "Texte à méditer"
      div.quote span.cita { /* texte */
          font: 11px Arial, Helvetica, sans-serif;
          color: #000000;
          background: inherit;
          font-style: normal;
          text-align: center;
          border: 0;
          margin: 0;
          padding: 0 8px;
      }
      Attributs du texte de la citation
      div.quote span.author { /* auteur */
          font: italic 11px Arial, Helvetica, sans-serif;
          color: #000000;
          background: inherit;
      }
      Attributs de l'auteur de la citation
  • MENU ICONES
    • div.menuIcons { /* block menu */
          padding: 8px 0;
      }
      Attributs du bloc menu
      div.menuIcons ul { /* block liste du menu */
          margin: 0;
          padding: 0;
          list-style: none;
          width: 100%;
      }
      Attributs de la liste du menu
      div.menuIcons ul li { /* toutes les sections */
          float: left;
          margin-right: 8px;
          text-align: center;
      }
      Position de la liste du menu et alignement des items
      div.menuIcons ul li span { /* toutes les sections */
          display: block;
          white-space: nowrap;
      }
      Liste du menu : les items sont sur la même ligne
      div.menuIcons ul li.menu_flags { /* section drapeau */
          float: left;
          margin-right: 10px;
          text-align: center;
      }

      Position du drapeau

      div.menuIcons ul li.menu_flags img { /* séparation drapeau */
          margin: 0;
      }
      div.menuIcons ul li.menu_admin { /* section admin */
          float: right;
          padding-right: 3px;
      }
      position du lien ADMIN
      div.menuIcons ul li a span { /* lien */
          color: #000000;
          background-color: inherit;
          text-decoration: none;
          font: bold 11px Arial, Helvetica, sans-serif;
      }
      Attributs de chaque item du menu
      div.menuIcons ul li a span.current { /* lien actif */
          color:#FF0000;
          background-color: #000000;
          text-decoration: underline;
      }
      Attributs de l'item actif
      div.menuIcons ul li a:hover span { /* lien survolé*/
          color: #FF0000;
          text-decoration: underline;
          background-color: inherit;
          position: relative;  top: 1px;  left: 1px;
      }
      Attributs de l'item survolé
      ul.boxmenu { /* block liste */
          margin: 0;
          padding: 5px 0;
          list-style: none;
      }

      BOÎTE MENU

      Attributs du bloc

      ul.boxmenu li { /* items liste */
          margin-bottom: 10px;
      }

      BOÎTE MENU

      Attributs de la liste des items

      ul.boxmenu li .curr_item { /* items actifs liste */
          margin-bottom: 10px;
      }

      BOÎTE MENU

      Attributs de l'item actif

      ul.boxmenu li img { /* icons */
          vertical-align: middle;
          margin-right: 10px;
      }

      BOÎTE MENU

      Position des icônes

  • FIL D'ARIANE
    • .ariane { /* bloc fil d"ariane */
          text-align: left;
          padding: 4px;
          margin: 0px;
      }
      Attributs du bloc
      div.ariane span.arianeOn { /* adresses actives */
          font-style: italic;
          color: inherit;
      }
      Attributs du ou des liens précédents
      div.ariane span.arianeOff { /* page courante */
          font-style: italic;
          color: #FF0000;
      }
      Attributs de la page courante
  • BOÎTES CENTRALES ET LATÉRALES
    • .htable {
          margin-bottom: 8px;
      }
      Attributs généraux de la boîte centrale
      .htable1 {
          margin-bottom: 8px;
      }
      Attributs généraux de la boîte latérale
      .tblbox {  /* Corps */
          color:inherit;
          border-width: 0;
          border-width: 0;
          padding: 4px;
          margin-bottom: 8px;
          text-align:left;
      }

      BOÎTE LATÉRALE

      Attributs du corps de la boîte

      .tblboxover { /* Corps survolé */
          background-color: #EFF2D0;
      }

      BOÎTE LATÉRALE

      Attributs du corps de la boîte survolée

      .tblboxout { /* Corps non survolé */
          background-color: #F5F7DC;
      }

      BOÎTE LATÉRALE

      Attributs du corps de la boîte qui a été visitée

      .titrebox { /* Titre */
          background-color: #67890B;    border-width: 0;
          border: 1px solid #67890B;
          border-radius: 6px;
          padding: 4px;
          white-space: nowrap;
          font: bold 15px Arial, Helvetica, sans-serif;
          color: #FFFFFF;
          text-align: left;
      }

      BOÎTE LATÉRALE

      Attributs du titre de la boîte

      .titre, .titre a {
          background-color: #67890B;    border-width: 0;
          border: 1px solid #67890B;
          border-radius: 6px;
          padding: 5px;
          white-space: nowrap;
          font: bold 15px Arial, Helvetica, sans-serif;
          color: #FFFFFF;
          text-align: left;
      }

      BOÎTE CENTRALE

      Attributs du titre de la boîte

      .tbl {
          border-width: 0;
          border-width: 0;
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          padding: 4px;
          margin-bottom: 8px;
          text-align:left;
      }

      BOÎTE CENTRALE

      Attributs du corps de la boîte

      .tblout {
          background-color: #F5F7DC;
      }

      BOÎTE CENTRALE

      Attributs du corps de la boîte qui a été visité

      .tblover {
          background-color: #EFF2D0;
      }

      BOÎTE CENTRALE

      Attributs du corps de la boîte survolé

      div ul, ol { /* listes */
          padding: 8px 0 8px 8px;
          margin-left: 16px;
      }
      Attributs des listes dans les boîtes
      div li{
          padding: 0;
          margin-left: 12px;
      }
      Attributs des items dans les boîtes
      .box {
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: inherit;
          text-align: left;
      }

      BOÎTES STANDARDS

      Attributs des boîtes

      p.box {
          margin: 0;
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: inherit;
      }

      BOÎTES STANDARDS

      Attributs du texte

      .box a, .item a {
          color: #000000;
          background-color: inherit;
          text-decoration: none;
          font: 12px Arial, Helvetica, sans-serif;
      }

      BOÎTES STANDARDS

      Attributs des liens

      .box a:hover, .item a:hover {
          color: #FF0000;
          text-decoration: none;
          background-color: inherit;
          position: relative;  top: 1px;  left: 1px;
      }

      BOÎTES STANDARDS

      Attributs des liens survolés

  • BOÎTES RÉSEAUX SOCIAUX - IMPRESSION - RECHERCHE
    • .boxnet {
          width: 100%;
          margin: auto;
          text-align: center;
          background-color: transparent;
      }

      RÉSEAUX SOCIAUX et RSS

      Attributs de la boîte

      .boxprint {
          margin: 0;
          font: 12px Arial, Helvetica, sans-serif;
          color: inherit;
          background-color: inherit;
      }

      IMPRESSION

      Attributs de la boîte

      .thinboxsearch {
          background-color: inherit;
      }
      BOÎTE RECHERCHE COMPLÈTE - colonnes latérales
      .wideboxsearch {
          background-color: inherit;
      }
      BOÎTE RECHERCHE SIMPLE  - partie centrale
      .thinboxsearch1 {
          background-color: inherit;
      }
      BOÎTE RECHERCHE SIMPLE et AVANCÉE - colonnes latérales
      .wideboxsearch1 {
          background-color: inherit;
      }
      BOÎTE RECHERCHE SIMPLE et AVANCÉE - partie centrale
      .thinboxsearch2 {
          background-color: inherit;
      }
      Partie de la recherche avancée quand elle est dépliée - colonnes latérales
      .wideboxsearch2 {
          background-color: inherit;
      }
      Partie de la recherche avancée quand elle est dépliée - partie centrale
  • BOÎTES ARTICLES (boîte menu)
    • .rubr { /* catégories des articles */
          font: bold 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: inherit;
          text-align: left;
          margin: 1px;
          padding: 4px 2px;
      }
      Attributs de la rubrique
      p.rubr {
          padding: 0 2px;
          margin: 1px;
          font: inherit;
          color: inherit;
          background-color: inherit;
          text-align: left;
      }
      Attributs du texte de la rubrique
      .item {
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: inherit;
          text-align: left;
          list-style: none;
          margin: 0;
          padding: 2px 0;
      }
      Attributs des articles
      ul.item {
          margin: 0;
          padding: 0;
      }
      Position de la liste d'articles
      ul.item li.item { /* titres des articles */
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: inherit;
          text-align: left;
          list-style: none;
          padding: 2px 0 2px 10px;
      }
      Attributs des articles
      .curr_item {
          font: 12px Arial, Helvetica, sans-serif;
          color: #FFFFFF;
          background-color: #8F916A;
          text-align: left;
          list-style: none;
          padding: 2px 0;
      }
      ul.item li.curr_item a { /* titre article est affiché */
          font: 12px Arial, Helvetica, sans-serif;
          color: #FFFFFF;
          background-color: #8F916A;
          text-align: left;
          list-style: none;
          padding: 2px 0 2px 10px;
      }
      Attributs de l'article affiché
  • POP
    • .pop {
          text-align: justify;
          cursor: help;
          float: left;
          z-index: 30;
      }
      .pop a {
          display: block;
      }
      .pop span {
          display: none;
          z-index: 30;
      }
      .pop a:hover span {
          color: #000000;
          background-color: #ECEFC2;
          font: normal 12px Arial, Helvetica, sans-serif;
          border: 1px solid #000000;
          border-radius: 6px;
          display: block;
          position: absolute;
          width: 280px;
          text-decoration: none;
          padding: 4px;
          margin-top: 8px;
          text-shadow: 0px 0px 0px;
      }
      .pop a:hover span em {
          position: absolute;
          top: -7px;
          left: 8px;
          height: 7px;
          width: 11px;
          background: transparent url(img/infobullet.png);
          border: none;
      }
  • CALENDRIER
    • .cal {
          width: 100%;
          text-align: center;
          margin: auto;
          border-collapse: separate;
          border: 1px solid #000000;
          border-radius: 6px;
          border-spacing: 1px;
          color: inherit;
          background-color: #E3EDC7;
      }
      Attributs du fond du calendrier (ne pas confondre avec la boîte calendrier)
      tr.cal { /* calendar nav bar */
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: #ECEFC2;
          text-align: center;
      }
      Attributs de la barre de navigation

      td.cals { /* week */
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: #E3EDC7;

          width: 14%;
          text-align: center;
      }

      Attributs des jours de la semaine (lundi, mardi...)
      td.cal0 { /* empty cell*/
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: #E3EDC7;
          width: 14%;
          text-align: center;
      }
      Attributs des cellules vides
      td.cal1 { /* days */
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: #ECEFC2;
          width: 14%;
          text-align: center;
      }
      Attributs des jours
      td.cal2 { /* today */
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: #C5D1A5;
          border: 1px solid #000000;
          border-radius: 6px;
          width: 14%;
          text-align: center;
      }
      Attributs pour aujourd'hui
      td.cal3 { /* sunday or special */
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: #ECEFC2;
          border: 1px solid #000000;
          border-radius: 6px;
          width: 14%;
          text-align: center;
      }
      Attributs les dimanches et les jours fériés
      td.cal4 { /* today is sunday or special */
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: #ECEFC2;
          border: 1px solid #000000;
          border-radius: 6px;
          width: 14%;
          text-align: center;
      }
      Attributs si aujourd'hui est dimanche ou férié
      td.cal5 { /* link to month agenda */
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: #ECEFC2;
          border: 1px solid #000000;
          border-radius: 6px;
          width: 14%;
          text-align: center;
      }
      td.calevt { /* planner event */
          font: bold 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: #C5D1A5;
          text-decoration: underline;
          text-align: center;
          width: 14%;
      }
      Attributs pour un événement
      select.cal { /* month and year select */
          background-color: #E3EDC7;
      }

      Attributs pour la sélection du mois et de l'année

  • FORMULAIRES
    • form { /* formulaire */
          margin: 3px 0;
      }
      Attributs des formulaires
      fieldset { /* Encadrement des champs */
          border: 1px solid #8F916A;
          border-radius: 6px;
          margin: 8px;
      }
      Attributs des champs
      legend { /* légende des encadrements */
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: inherit;
          font-weight: bold;
      }
      Légende des encadrements

      input.bouton, button { /* bouton */
          cursor: pointer;
          margin: 4px 0;
          color: #000000;
          border: 1px inset #000000;
          background-color: #F5F7D9;
          font: 11px Arial, Helvetica, sans-serif;

      }

      Bouton
      input.texte { /* champ texte */
          background-color: #ECEFC2;
          font: 11px Arial, Helvetica, sans-serif;
          color: #000000;
          border: 1px solid #000000;
          margin: 4px 0;
      }
      Attributs de la partie où on écrit le texte (par exemple pour la recherche)
      select { /* champ select */
          color: #000000;
          background-color: inherit;
          font: 11px Arial, Helvetica, sans-serif;
          border: 1px solid #000000;
          margin: 4px 0;
      }
      Attributs des champs à sélectionner
      textarea { /* champ textarea */
          color: #000000;
          background-color: #ECEFC2;
          border: 1px solid #000000;
          overflow: auto;
          margin: 4px 0;
      }
      Attributs de la partie où on écrit le texte (corps du message, de l'article)
  • FORUM et TABLES
    • .row {
          width: 100%;
          border: none;
      }
      ligne
      .col {
          width: 100%;
          vertical-align: top;
      }
      colonne
      .forum, .forum a {
          background-color: #8F916A;
          padding: 5px 5px;
          font: bold 12px Arial, Helvetica, sans-serif;
          color: #FFFFFF;
          text-align: center;
      }
      Attributs de "note n°" dans le livre d'or
      .forum2, .forum2 td a {
          background-color: #8F916A;
          padding: 5px 5px;
          font: 12px Arial, Helvetica, sans-serif;
          color: #FFFFFF;
          text-align: left;
      }
      Attributs de la date quand l'agenda est affiché

      tr.forum2 {
          background-color: #8F916A;

          padding: 5px 5px;
          font: bold 12px Arial, Helvetica, sans-serif;
          color: #000000;
          text-align: left;
      }

      Attributs de la ligne d'entête du forum (catégories de discussion - Nombre de sujets...)
      .quest {
          background-color: #ECEFC2;
          padding: 5px 5px 5px 5px;
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          text-align: left;
      }

      Attributs de :

      - FORUM : lignes paires des catégories

      - LIVRE D'OR : auteur du message

      - AGENDA : horaire

      - NOUVELLES : titre et auteur de la nouvelle

      .rep {
          background-color: #E3EDC7;
          padding: 10px 5px 5px 5px;
          font: 12px Arial, Helvetica, sans-serif;
          color: #000000;
          text-align: left;
      }

      Attributs de :

      - FORUM : lignes impaires des catégories et corps des messages

      - LIVRE D'OR : corps du message

      - NOUVELLES : corps du message

      - AGENDA : corps de l'événement

      - LIENS : corps du lien

      - FAQ : corps de la FAQ

      .rep .cite { /*citation dans le forum*/
        width: 90%;
        background-color: #fff;
      }

      Citation dans le forum

      .rep .cite p { /*texte citation forum*/
        background: transparent;
        border: 0px;
        color: #000;
      }

      Attributs du texte de la citation

      .rep .cite span.cite { /*auteur de la citation dans le forum*/
          width: 100%;
        color: #fff;
        background: #808080;
        border: 0px;
      }

      Auteur de la citation

      .bord {
          border: 1px solid #8F916A;
          padding: 1px;
      }

      Encadrement et couleur de fond de plusieurs tables (dans le forum, le blog, les nouvelles, le livre d'or, l'agenda).

      .bord2 {
          border: 2px double #E3EDC7;
      }
      Encadrement
  • ÉDITEUR des messages
    • .Code {
          border: 1px solid #8F916A;
          padding-right: 5px;
          padding-left: 5px;
          color: #000000;
          font: 11px Arial, Helvetica, sans-serif, Monospace;
          background-color: #E3EDC7;
      }
      Attributs du titre des paragraphes de la charte du forum
      div.pgeditor {
          color: inherit;
          background-color: inherit;
          border: 1px solid inherit;
      }
      div #toolbarIcons_ptxt, div #toolbarSmileys_ptxt {
          color: inherit;
          background-color: #8F916A;
          border: 1px solid #8F916A;
      }
      Attributs de la barre d'icônes en haut et de la barre des émoticons en bas
  • INCLASSABLES
    • .f-right {
          float: right;
      }
      .f-left {
          float: left;
      }
      .c-right {
          clear: right;
          display: none;
      }
      .c-left {
          clear: left;
          display: none;
      }
      .c-both {
          clear: both;
          display: none;
      }
      .top {
          font: 0.8em Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: inherit;
          text-align: center;
      }
      Attributs de lien vers le haut
      .timer {
          font: italic 0.9em Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: inherit;
          text-align: center;
          padding: 8px;
      }
      Attributs du temps d'affichage des pages
      .clsCursor {
          cursor: pointer;
      }
      .notice {
          color: red;
          background-color: #FF9;
          padding: 2px;
      }
      .errorInputText {
          background-color: #FFE5E5;
          font: 11px Arial, Helvetica, sans-serif;
          color: #000099;
          border: 1px solid #8F916A;
          margin: 4px 0;
      }
      Attributs messages d'erreur javascript désactivé
      .visits {
          z-index: 15;
          position: absolute;
          margin: -64px 0 0 24px;
          padding: 0 4px;
          width: 180px;
          display: none;
          color: #000;
          background: #f05e03;
          border: 1px solid #000;
      }
      Attributs boîte Visites membres du jour
  • MENUS DÉROULANTS
    • ul.dropdown {
          font-weight: bold;
          list-style: none;
          margin: 0;
          padding: 0;
          position: relative;
          float: left;
      }
      Position du menu déroulant
      ul.dropdown li {
          padding: 7px 10px;
          border: 1px solid #E3EDC7;
          background-color: #CFDD35;
          color: #000;
          list-style: none;
          margin: 0;
          float: left;
          line-height: 1.3em;
          vertical-align: middle;
      }
      Attributs généraux des items
      ul.dropdown li:hover {
          background-color: #CFDD35;
          color: #000;
          position: relative;
          z-index: 599;
          cursor: pointer;
      }
      Attributs généraux des items survolés
      ul.dropdown a:link, ul.dropdown a:visited    {
          color: #000;
          text-decoration: none;
      }
      Attributs généraux des liens visités
      ul.dropdown a:hover {
          color: #000;
      }
      Attributs généraux du menu survolé
      ul.dropdown ul {
          width: 150px;
          margin-top: 1px;
          list-style: none;
          margin: 0;
          padding: 0;
          visibility: hidden;
          position: absolute;
          top: 100%;
          left: 0;
          z-index: 598;
      }
      Attributs généraux du premier niveau
      ul.dropdown ul li {
          font-weight: normal;
          float: none;
      }
      Attributs généraux du second niveau
      ul.dropdown ul ul {
          top: 1px;
          left: 99%;
      }
      Position des items
      ul.dropdown li *.dir {
          padding-right: 20px;
      }
      ul.dropdown-horizontal ul li *.dir {
          padding-right: 20px;
      }
      MENU HORIZONTAL
      ul.dropdown li:hover > ul {
          visibility: visible;
      }
      ul.dropdown-vertical {
          width: 160px;
      }
      MENU VERTICAL
      ul.dropdown-vertical ul {
          top: 1px;
          left: 99%;
      }
      Position du menu vertical
      ul.dropdown-vertical li {
          float: none;
      }
      Position des items du menu vertical
      ul.dropdown-linear {
          width: 100%;
          font-size: 12px;
      }
      MENU LINÉAIRE
      ul.dropdown-linear li {
          font: 12px Arial, Helvetica, sans-serif;
      }
      Attributs des items du menu linéaire
      ul.dropdown-linear ul li {
          float: left;
          font: 12px Arial, Helvetica, sans-serif;
          background-color: #E3EDC7;
          border: 1px solid #000;
          border-radius: 6px;
      }
      ul.dropdown-linear li:hover {
          position: static;
          background:
      }

      Items survolé du menu linéaire

      ul.dropdown-linear ul li:hover {
          background-color: #FFF;
      }
      Premier niveau survolé
      ul.dropdown-linear ul ul {
          display: none !important;
      }
  • MOTS-CLÉS
    • ul.keyword {
          list-style: none;
          margin: 0;
          padding: 0;
          position: relative;
          float: left;
      }
      ul.keyword li {
          margin: 0;
          padding: 0 6px;
          background-color: transparent;
          color: #000;
          list-style: none;
          float: left;
          line-height: 2.0em;
          vertical-align: bottom;
      }
      Chaque mot et la bulle qui apparaît au survol
      ul.keyword li:hover {
          background-color: transparent;
          color: #000;
          position: relative;
          z-index: 599;
          cursor: pointer;
      }
      Mot et bulle survolés
      ul.keyword ul {
          width: 180px;
          list-style: none;
          margin: 0;
          padding: 0;
          visibility: hidden;
          position: absolute;
          top: 75%;
          left: 0;
          z-index: 598;
      }
      ul.keyword-horizontal ul li *.dir {
          padding-right: 20px;
      }
      ul.keyword li:hover > ul {
          visibility: visible;
      }
      ul.keyword div {
          border: 1px solid #c0c0c0;
          border-radius: 4px;
          background-color: #fff;
          padding: 4px 8px;
          line-height: 1.3em;
      }
      bulle
      .keyword0 { /* nombre d'occurrences nulle */
          font-size : 0.8em;
      }
      .keyword1 { /* entre 1 et 3 */
          font-size : 1.2em;
      }
      Taille du mot selon qu'il est peu ou beaucoup utilisé - UN PEU
      .keyword2 { /* entre 4 et 5 */
          font-size : 1.6em;
      }
      Taille du mot selon qu'il est peu ou beaucoup utilisé - MOYEN
      .keyword3 { /* plus de 5 */
          font-size : 2.0em;
      }
      Taille du mot selon qu'il est peu ou beaucoup utilisé - BEAUCOUP
  • CRYPTOGRAMMES TEXTE
    • .cryptogram0 {
          color: #000;
          background-color: #FFF;
          border: 2px solid #000;
          border-radius: 4px;
      }
      .cryptogram1 {
          color: #000;
          background-color: #FFF;
          border: 2px solid #000;
          border-radius: 4px;
      }
      CAPTCHA texte 2
      #cryptogram1 {
          color: #000;
          background-color: #FFF;
          border: 2px solid #000;
          border-radius: 4px;
      }

      CAPTCHA texte 1


Date de création : 24/03/2013 14:25
Dernière modification : 18/08/2013 18:20
Page lue 5223 fois


Vous êtes ici :   Accueil » style.css