Connessione...
 Membri: 17 10 ultimi membri:[ Password persa ? ] [ Registrati ]  Utente online: 0 Anonimi online: 8 Visite totali: 52037 Webmaster - Infos
Presentazione
Guide e trucchi per skin
Newsletter
Siti di skin
5axe Astrographisme per GuppY 4.5 Astrographisme per GuppY 4.6 Atelier Skins per GuppY 4.5 Atelier Skins per GuppY 4.6 Charly Skin Deluxe Charly77 per GuppY 4.5 Charly77 per GuppY 4.6 Chez Papinou per GuppY 4.5/4.6 Chez Zeblai Cool Image Cymeco GuppY Style Guppy Skin Jardinature Magdavich Meric-graphisme Skin Alain Valric Design Vracinformatique |
Style.css - Guida completa
Guida completa al file style.css per GuppY v4.5 ATTENZIONE: In linea di massima questa guida vale anche per GuppY v4.6 Questa spiegazione del file style.css si riferisce ad una skin di nome étude v2 disponibile in download qui : Guppy Skins body { *corpo della pagina margin: 25px 0px 25px 0px; *margine dell'altezza,di sinistra,di destra e in basso alla pagina background-image: url(couleur_fond_de_site.png); *indirizzo dell'immagine di fondo background-repeat: repeat; *ripetizione dell'immagine background-color: #FFFFFF; *colore di fondo della pagina scrollbar-arrow-color: #E6E6DD; *colore delle piccole frecce in alto e in basso della barra di defilamento scrollbar-track-color : #E6E6DD; *colore al di sotto della barra scrollbar-shadow-color : #C8C8B5; *colore del bordo della barra scrollbar-face-color : #C8C8B5; *colore della faccia della barra } .header { *in alto alla pagina background-color: #000000; *colore del fondo background-position: 100% 50%; *posizione background-repeat: repeat-x; *ripetizione verticale } .logo { *logo background-color: transparent; *fondo trasparente padding: 0px; *margine di sinistra text-align: left; *posizione a sinistra } .banner { *banner background-image: url(); *indirizzo del banner background-repeat: no-repeat; *nessuna ripetizione per l'immagine background-position: right; *posizione a sinistra padding: 17px; *margine di destra di 17 pixels text-align: right; *allineamento a destra } .quote { *citazioni margin: 5px 0px 5px; *margine superiore,destra e inferiore width: 100%; *percentuale di larghezza definito sulle pagina } .headmenu { *menù width: 100%; *dispiegato su tutta la lunghezza della pagina } p { *alcuni testi del box centrale margin: 4px 0px; *margine superiore,sinistra e destra font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) color: #000000; *colore del testo } p.box { *alcuni testi dei box laterali margin: 4px; *margine superiore font-size: 11px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) color: #000000; *colore del testo text-align: center; *testo centrale } .box { *autres textes boites latérales font-size: 11px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) color: #000000; *colore del testo } .titre { *titres des boites centrales padding: 4px; *marge supérieure du titre margin-bottom: 0px; *marge inférieure du titre white-space: nowrap; *espace entre les lettres font-size: 12px; *grosseur des lettres font-family: Arial, Helvetica, sans-serif; *style del testo (police) color: #000000; *colore font-weight: bold; *titre gras text-align: center; *titre centré } .titrebox { *titres des boites latérales padding: 4px; *marge supérieur du titre margin-bottom: 0px; *marge inférieur du titre white-space: nowrap; *espace entre les lettres font-size: 12px; *grosseur des lettres font-family: Arial, Helvetica, sans-serif; *style della police color: #000000; *colore font-weight: bold; *titre gras text-align: center; *titre centré } .titrebox2 { *ne sert pas sur cette base de skin color: #2E3F4E; *ne sert pas sur cette base de skin font-weight: bold; *ne sert pas sur cette base de skin text-align: center; *ne sert pas sur cette base de skin } .cita { *citation background-color: transparent; *couleur du fond (ici transparent) font-family: Arial, Helvetica, sans-serif; *police del testo font-size: 12px; *taglia del testo font-weight: normal; *fond normal (non gras) color: #000000; *couleur du texte text-align: center; *texte centré margin-top: 7px; *marge du haut de 7 pixels width:100%; *étalé à 100% (toute la longueur de la page) } .htable { *hauts de tables boites centrales margin-bottom: 8px; *marge entre les boites de 8 pixels } .tbl { *table centrale padding: 5px; *ne sert pas sur cette base de skin background-color: #F0F0F0; *ne sert pas sur cette base de skin } .tblover { *boite centrale en hover (au passage de la souris)ne sert pas sur cette base de skin padding: 5px; *ne sert pas sur cette base de skin background-color: #F3F3F3; *ne sert pas sur cette base de skin } .tbl2 { *table2 (ne sert pas sur cette base) background-color: #F3F3F3; *ne sert pas sur cette base de skin padding: 0px; *ne sert pas sur cette base de skin } .htable1 { *hauts de tables boites latérales margin-bottom: 8px; *marge entre les boites de 8 pixels } .tblbox { *table boites latérales padding: 4px; *ne sert pas sur cette base de skin background-color: #F3F3F3; *ne sert pas sur cette base de skin } .tblboxover { *boite latérale en hover (au passage de la souris)ne sert pas sur cette base de skin padding: 4px; *ne sert pas sur cette base de skin background-color: #F3F3F3; *ne sert pas sur cette base de skin } .bordure { *bordure border: 0px solid #737E9E; *ne sert pas sur cette base de skin } .forum { *en-tête du forum ou vous avez le numéro du sujet padding: 5px; *marge interne du texte background-color: #F3F3F3; *couleur de fond font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style du texte (police) color: #000000; *colore del testo text-align: center; *texte centré font-weight: bold; *texte gras border: 1px solid #000000; *bordure solide d'épaisseur 1 pixel } .forum2 { *en-tête du forum ou vous avez le titre padding: 0px 5px; *marges internes background-color: #F3F3F3; *couleur de fond font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) color: #000000; *colore del testo border: 1px solid #000000; *bordure solide d'épaisseur 1 pixel } .quest { *case question padding: 5px; *marges internes background-color: #F3F3F3; *couleur de fond font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) color: #000000; *colore del testo border: 1px solid #000000; *bordure solide d'épaisseur 1 pixel } .rep { *case réponse padding: 10px 5px; *marges internes background-color: #F3F3F3; *couleur de fond font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) color: #000000; *colore del testo border: 1px solid #000000; *bordure solide d'épaisseur 1 pixel } .bord { *bordure dans les boites centrales border: 0px solid #000000; *épaisseur,type et couleur } a { *liens des boites centrales color: #000000; *colore dei links text-decoration: none; *aucune décoration } a:hover { *liens en hover des boites centrales (au passages de la souris) color: #DC0000; *couleur des liens text-decoration: none; *aucune décoration } a.box { *liens des boites latérales color: #000000; *couleur des liens text-decoration: none; *aucune décoration font-size: 11px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *police del testo } a.box:hover { *liens en hover des boites latérales (au passages de la souris) color: #DC0000; *couleur des liens text-decoration: none; *aucune décoration font-size: 11px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *police del testo } td.menu { *table menu margin-top: 2px; *marge supérieure du menu padding: 6px 1px; *marge supérieure et intérieure entre les onglets white-space: nowrap; *espace entre les lettres text-align: center; *texte centré font-weight: bold; *texte gras border-bottom:solid 2px #0000FF; *bordure sous les onglets (type,épaisseur,couleur) padding-top:12px ; *marge interne supérieure padding-bottom:0px; *marge interne inférieure } a.menu { *menu color: #000000; *colore del testo text-decoration: none; *aucune décoration font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *police du texte background-image: url(onglet.gif); *adresse de l'image de l'onglet (dans le dossier skin) bottom: no-repeat ; *non répétition de l'onglet padding: 6px 1px; *marge supérieure et intérieure entre les onglets float:left ; *flotement à gauche des onglets width:83px; *largeur de limage onglet } a.menu:hover { *menu au passage de la souris color: #0000FF; *colore del testo text-decoration: none; *aucune décoration font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *police du texte background-image: url(onglet.gif); *adresse de l'image de l'onglet (dans le dossier skin) padding: 6px 1px; *marge du haut et espace entre les onglets position:relative ; *comme c'est indiqué (ne pas changer) top:2px ; *comme c'est indiqué border-bottom : solid 2px #FFFFFF; *bordure sous les onglets en hover (passage de la souris) } hr { *ligne de séparation border-style: none none dashed; *style de bordure, aucune à droite, gauche, haut, basse pointillée border-color: #000000; *couleur bordure border-width: 0px 0px 1px; *taille bordure, 0 àdroite, gauche, haut, 1 en bas height: 1px; *épaisseur width: 98%; *largeur dans la boite } ul, ol, li { *listes font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) color:#000000; *couleur du texte } ul.art { *style listes font-weight:bold; padding:0px; margin:0px; *texte gras, marge et remplissage 0 } li.art { *styles items de listes font-weight:normal; list-style-type:none; padding:0px; margin-left:4px;*texte normal, pas de puce, remplissage 0, mage gauche 4 } dl, dd, dt, address, dir, menu, blockquote, td { *style des balises indiquées font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) color : #000000; *colore del testo } h1, h2, h3, h4, h5, h6 { *styles des balises h1 à h6 font-family: Arial, Helvetica, sans-serif; *style del testo (police) color: #000000; *colore del testo } td.cal0 { *définition d'une parite du calendrier font-size: 11px; *taglia del testo font-family: Arial, sans-serif; *style del testo (police) color: #000000; *couleur des lettres (jours,samedi etc...sauf dimanche) background-color: #F3F3F3; *couleur des cases jours (vides) background-image: url(bouton_centre.png); *adresse de l'image arrière plan width: 14%; *largeur de 14% text-align: center; *texte centré } td.cal1 { *définition d'une partie du calendrier font-size: 11px; *taglia del testo font-family: Arial, sans-serif; *style du texte (police) color: #000000; *couleur des chiffres jours de la semaine (sauf dimanche) background-color: #B0BAC1; *couleur des cases jours de la semaine (sauf dimanche) width: 14%; *largeur de 14% text-align: center; *texte centré } td.cal2 { *définition d'une partie du calendrier font-size: 11px; *taglia del testo font-family: Arial, sans-serif; *style del testo (police) color: #000000; *couleur du chiffre de la date du jour background-color: #DC0000; *couleur de la case de la date du jour width: 14%; *largeur de 14% text-align: center; *texte centré } td.cal3 { *définition d'une partie du calendrier font-size: 11px; *taglia del testo font-family: Arial, sans-serif; *style del testo (police) color: #000000; *couleur des chiffres (dimanche et jours fériés) background-color: #DC0000; *couleur des cases (dimanche et jours fériés) width: 14%; *largeur de 14% text-align: center; *texte centré } td.cal4 { *définition d'une partie du calendrier font-size: 11px; *taglia del testo font-family: Arial, sans-serif; *style del testo (police) font-weight: bold; *fond gras color: #000000; *couleur du chiffre de la date d'aujourd'hui background-color: #DC0000; *couleur de la case de la date d'aujourd'hui width: 14%; *largeur de 14% text-decoration: underline; *aucune décoration text-align: center; *texte centré } td.calevt { *définition d'une partie du calendrier font-size: 11px; *taglia del testo font-family: Arial, sans-serif; *style del testo (police) color: #000000; *couleur de chiffres évènements background-color: #DC0000; *couleur des cases évènements width: 14%; *largeur de 14% text-align: center; *texte centré } tr.vdev { *style de l'éditeur wysiwyg Typetool background-color: #009966; *couleur de fond } tr.vdevtr { *style de l'éditeur wysiwyg Typetoolr background-color: #009966; *couleur de fond } body.vdev { *style de l'éditeur wysiwyg Typetool margin-left: 10px; *marge de gauche font-family: Arial, sans-serif; *style del testo (police) font-size: 12px; *taglia del testo background-color: #E7E7F7; *couleurs de fond } body.vdevdialog { *style de l'éditeur wysiwyg Typetool margin-left: 0px; *marge de gauche font-family: Arial, sans-serif; *style del testo (police) font-size: 12px; *taglia del testo background-color: #E7E7F7; *couleur du fond } select.vdev { *style de l'éditeur wysiwyg Typetool font-family: Arial, sans-serif; *style del testo (police) font-size: 12px; *taglia del testo height: 22px; *hauteur background-color: #CFDDEB; *couleur du fond color: #000000; *colore del testo } input.vdev { *style de l'éditeur wysiwyg Typetool font-family: Arial, sans-serif; *style del testo (police) font-size: 12px; *taglia del testo height: 22px; *hauteur background-color: #E7E7F7; *couleur du fond color: #000000; *colore del testo } input.vdevx { *style de l'éditeur wysiwyg Typetool font-family: Arial, sans-serif; *style del testo (police) font-size: 12px; *taglia del testo height: 22px; *hauteur background-color: #E7E7E7; *couleur du fond color: #FF0080; *colore del testo } form { *style du formulaire margin: 3px 0px; *marge supérieure et droite } input.bouton { *bouton cursor: pointer; *définition du curseur margin: 4px 0px; *marge supérieure et droite color: #000000; *colore del testo sul bottone border: 0px inset #000000; *bordure autour du bouton background-color: #F3F3F3; *couleur d'arrière plan du bouton font-size: 10px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) height: 22px; *hauteur du bouton margin: 0px; *marge padding-top: 0px; *marge supérieure vertical-align: top; *aligné verticalement en haut text-decoration: none; *décoration du texte background-image: url(bouton_centre.png); *adresse de l'image du centre du bouton background-repeat: repeat-x; *répétition horizontale de l'image / } input.texte { *case texte (remplissage inscription etc... margin: 2px 0px; *marge supérieure et droite background-color: #FFFFFF; *couleur du fond de la case font-size: 11px; *taglia del testo font-family: Trebuchet MS, Helvetica, sans-serif; *style del testo (police) color: #000000; *colore del testo } select { *sélection margin: 4px 0px; *marge supérieure et doite color: #000000; *colore del testo della selzione background-color: #FFFFFF; *couleur du fond sélection font-family: Trebuchet MS, Helvetica, sans-serif; *style del testo (police) font-size: 11px; *taglia del testo } textarea { *ne sert pas sur cette base de skin margin: 4px 0px; *ne sert pas sur cette base de skin color: #000000; *ne sert pas sur cette base de skin background-color: #FFFFFF; *ne sert pas sur cette base de skin overflow: auto; *ne sert pas sur cette base de skin } .top { *haut (tout en bas du site pour remonter la page en un clic) font-family: Arial, Helvetica, sans-serif; *style del testo (police) font-size: 0.8em; *taglia del testo (peut se définir en pixel) text-align: center; *texte centré } .copyright { *comme son nom l'indique ( tout en bas de la page) font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) color: #000000; *colore del testo text-align: center; *texte centré } .timer { *temps d'affichage de la page (tout en bas du site) font-size: 12px; *taglia del testo font-family: Arial, Helvetica, sans-serif; *style del testo (police) font-style: italic; *autre style en italique color: #000000; *colore del testo text-align: center; *texte centré } .foot { *ne sert pas sur cette base de skin font-family: ; *chemin de la configuration style del testo (police) font-size: 12px; *taglia del testo text-align: center; *texte centré color: ;*chemin de la configuration couleur de texte (police) } .clsCursor { *curseur cursor: pointer; *on peut mettre ici un curseur peronalisé (voir astuce sur le site) }
Fonte: GuppYSkins Autore : valkiro Data creazione : 11/01/2008 @ 21:43 Opinioni su questo articolo
Ultime sul sito
Motore di ricerca
Ultimi post sul forum
| Cambia lingua
Tchat non-Membres
Mi dispiace ma dovete essere membri per poter accedere alla chat
Panoramica skins
Ricerche
Prova le Skin
Guide varie
TopArticles
totale articoli: 47
Top 9 Articoli più letti - Come mettere il copyright alla fine di ogni articolo - Personalizzare lo sfondo - Codici dei colori - Inserire un'immagine avanti a un testo o una frase - Come mettere un'immagine nel footer - Come disattivare i boridi del plugin icone frame - Come inserire un'immagine nell'header - Come togliere le interlinee - Siti di riferimento Ultimi 6 Articoli aggiunti - fffffffffffffff - fffffffffff - Immagini - Immagine panoramica in un articolo - Come togliere le interlinee - Le regole del sito - - CSS Bubble Tooltips - Come disattivare i boridi del plugin icone frame |
Copyright
Articoli, blog, ecc..
Anteprima di stampa
Stampa pagina
Torna in alto 
© 2004-2008 
Pagina caricata in 0.12 secondo
