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...

 122287 visiteurs

 4 visiteurs 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 6275 fois


Vous êtes ici :   Accueil » style.css