|
SiteAccueil Site ... Forum Démo L'annuaire LW |
|
A
propos de Lovely Web Version n°12 par Alexia Forum : LovelyWebForum Hébergeur : Starszz.com. Thank you so much! |
|
Tagboard
|
|
|
Site Accueil Site ... Forum Démo L'annuaire LW |
|
A
propos de Lovely Web Version n°12 par Alexia Forum : LovelyWebForum Hébergeur : Starszz.com. Thank you so much! |
|
Tagboard
|
PROGRAMMES 
Coppermine Gallery CSS [+++]
I De quoi s'agit-il?
Je vais ici vous montrer à quoi correspond chaque code de la
feuille de style afin que vous la personnalisiez au mieux.
A chaque fois, j'utiliserais la couleur
#FF0000 pour montrer ce qui change.
II Style.css
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background : #CCCCCC; --->
Fond de page.
color : Black; --->
Couleur de la
police d'écriture
margin: 0px;
}
table {
font-size: 12px;
}
h1{
font-weight: bold;
font-size: 22px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
line-height : 120%;
color : #000000; --->
Couleur du titre
de la galerie
margin: 2px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin: 0px;
}
h3 {
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 2px;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 2px 0px;
}
ul {
margin-left: 5px;
padding: 0px;
}
li {
margin-left: 10px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0px;
list-style-position: outside;
list-style-type: disc;
}
.textinput {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #D1D7DC; --->
Bordure des
zones de texte
padding-right: 3px;
padding-left: 3px;
}
.listbox {
font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #D1D7DC; --->
Bordures des
champs et boutons pour uploader des photos.
vertical-align : middle;
}
.button {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #005D8C; --->
Bordure des
boutons de validation.
background-image : url(images/button_bg.gif);
background-position : bottom;
}
.comment_button {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #005D8C; --->
Bordure du
bouton d'envoie des commentaires.
background-image : url(images/button_bg.gif);
background-position : bottom;
padding-left: 3px;
padding-right: 3px;
}
.radio {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
vertical-align : middle;
}
.checkbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
vertical-align : middle;
}
a {
color: #0033CC; --->
Couleur des
liens du haut.
text-decoration: none;
}
a:hover {
color: #0033CC; --->
Couleur des
liens du haut au passage de la souris.
text-decoration: underline;
}
.bblink a {
color: #0033CC; ---> ???
text-decoration: none;
}
.bblink a:hover {
color: #0033CC; ---> ???
text-decoration: underline;
}
.maintable {
border: 1px solid #0E72A4; --->
Bordure des
cadres principaux
/* background-color: #FFFFFF;*/ --->
Fond du cadre -
à éditer via la page template.html
background-color: #efefef; --->
Bordures à
l'intérieur des cadres principaux.
margin-top: 1px;
margin-bottom: 1px;
}
.tableh1 {
bbackground : #0E72A4 ; --->
Fond des titres de tableaux.
color : #FFFFFF; --->
Couleur de la
police d'écriture des titres de tableaux.
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableh1_compact {
background : #0E72A4 ; --->
Couleur de fond du bas des photos.
color : #FFFFFF; --->
Même chose qu'au dessus mais pour la police d'écriture.
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tableh2 {
background: #D1D7DC ; --->
Fond du titre
des albums.
color : #000000; --->
Titre
apparaissant lors de la modification d'album, de photos.
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableh2_compact {
bbackground: #D1D7DC ; --->
Fond des titres 'commentaires', 'Noter cette image'...
color : #000000; --->
Même chose que ci-dessus mais pour la couleur de l'écriture.
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tableb {
background: #EFEFEF ; --->
Fond en dessous
des photos (également une ligne en dessous des catégories sur la page index)
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableb_compact {
background: #EFEFEF ; --->
Fond de la description des albums
ainsi que du fond des commentaires et des étoiles(notes).
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tablef {
background: #D1D7DC; --->
Bas des tableaux
d'administration ainsi que ceux de connexion/déconnexion.
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.catrow_noalb {
background: #D1D7DC ; --->
Fond des catégories sans album à l'intérieur.
color : #000000; --->
Couleur du texte décrivant la catégorie sans album.
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.catrow {
background: #EFEFEF ; --->
Fond des catégories
avec album à l'intérieur.
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.album_stat {
font-size: 85%;
margin: 5px 0px;
}
.thumb_filename {
font-size: 80%;
display: block;
}
.thumb_title {
font-weight : bold;
font-size: 80%;
padding: 2px;
display : block;
}
.thumb_caption {
font-size: 80%;
padding: 1px;
display : block;
}
.thumb_caption a {
text-decoration: underline;
color: #000000; ---> ???
}
.thumb_num_comments {
font-weight: normal;
font-size: 80%;
padding: 2px;
font-style : italic;
display : block;
}
.user_thumb_infobox {
margin-top: 1px;
margin-bottom: 1px;
}
.user_thumb_infobox th {
font-weight : bold;
font-size: 100%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}
.user_thumb_infobox td {
font-size: 80%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}
.user_thumb_infobox a {
text-decoration: none;
color: #000000; ---> ???
}
.user_thumb_infobox a:hover {
color: #000000; ---> ???
text-decoration: underline;
}
.sortorder_cell {
background : #0E72A4 ; --->
???
color : #FFFFFF; ---> ???
padding: 0px;
margin: 0px;
}
.sortorder_options {
font-family: Verdana, Arial, Helvetica, sans-serif;
background : #0E72A4 ; --->
Fond des options
des miniatures dans un album.
color : #FFFFFF; --->
Même chose qu'au
dessus mais pour le texte.
padding: 0px;
margin: 0px;
font-weight: normal;
font-size: 80%;
white-space: nowrap;
}
.navmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF; --->
Couleur du
positionnement de la photo vue par rapport aux autres du même dossier.
font-size: 100%;
font-weight: bold;
background : #0E72A4 ; --->
Fond des options pour voir une image.
border-style: none;
}
.navmenu img {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 1px;
margin-left: 5px;
}
.navmenu a {
display: block;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
text-decoration: none;
color: #FFFFFF;
}
.navmenu a:hover {
background : #EFEFEF ; --->
Fond -au survol de la souris - des options pour voir une image.
text-decoration: none;
color: #000000; ---> Couleur du lien au survol de la
souris.
}
.admin_menu_thumb {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #005D8C; --->
???
background-image : url(images/button_bg.gif);
background-position : bottom;
color: #000000; ---> ???
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
width: 85px;
}
.admin_menu_thumb a {
color: #000000; ---> ???
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
}
.admin_menu_thumb a:hover {
color: #000000; ---> ???
text-decoration: underline;
}
.admin_menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #005D8C; --->
Bordure des
boutons de l'admin.
background-color:#EFEFEF; --->
Couleur de fond des boutons ci-dessus. (la couleur ne se voit pas, celle-ci
étant recouverte par le bouton)
background-image : url(images/button_bg.gif); --->
Si vous voulez voir la couleur de fond des boutons, supprimer cette ligne.
background-position : bottom;
color: #000000; --->
Couleur du texte
des boutons d'admin.
margin-top: 0px;
margin-bottom: 0px;
padding-top:2px;
padding-bottom:2px;
padding-left:1px;
padding-right:1px;
text-align: center;
}
.admin_menu a {
color: #000000; --->
Couleur des liens
des boutons d'admin.
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.admin_menu a:hover {
color: #000000; --->
Couleur des liens au survol de la souris
des boutons d'admin.
text-decoration: underline;
}
td #admin_menu_anim {
background-image : url(images/button_bg_anim.gif);
}
.comment_date{
color : #5F5F5F; --->
Couleur de la date (jour et heure) d'un commentaire.
font-size : 90%;
vertical-align : middle;
}
.image {
border-style: solid;
border-width:1px;
border-color: #000000; --->
Bordure des photos.
margin: 2px;
}
.imageborder {
border: 1px solid #000000; --->
Bordure des photos. (En vert, il s'agit du point précédent).
background-color: #FFFFFF; --->
Fond des photos. (En vert, il s'agit de
la bordure juste au dessus).
margin-top: 30px;
margin-bottom: 30px;
}
.display_media {
background: #EFEFEF ; --->
Fond de présentation photos.
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.thumbnails {
background: #EFEFEF ; --->
Fond des miniatures des photos.
padding: 5px;
}
.footer {
font-size : 9px;
}
.footer a {
text-decoration: none;
color: #000000; --->
Couleur des liens du bas de page.
}
.footer a:hover {
color: #000000; --->
Couleur des liens du bas de page au survol de la souris.
text-decoration: underline;
}
.statlink {
color: #FFFFFF; --->
Couleur des
statistiques du forum ainsi que
du texte de
présentation des albums.
}
.statlink a {
text-decoration: none;
color: #FFFFFF; --->
Couleur des
liens de navigation de la galerie.
}
.statlink a:hover {
color: #FFFFFF; --->
Couleur des
liens de navigation de la galerie au survol de la souris.
text-decoration: underline;
}
.alblink a {
text-decoration: underline;
color: #000000; --->
Couleur des
liens des albums.
}
.alblink a:hover {
color: #000000; --->
Couleur des
liens des albums au survol de la souris.
text-decoration: underline;
}
.catlink {
display: block;
margin-bottom: 2px;
}
.catlink a {
text-decoration: underline;
color: #000000; --->
Couleur des
liens des carégories.
}
.catlink a:hover {
color: #000000; --->
Couleur des
liens des catégories au survol de la souris.
text-decoration: underline;
}
.topmenu {
line-height : 130%;
font-size: 100%;
}
.topmenu a {
color : #0033CC; ---> ???
text-decoration : none;
}
.topmenu a:hover {
color : #0033CC; ---> ???
text-decoration : underline;
}
.img_caption_table {
border: none;
background-color: #FFFFFF; ---> ???
width : 100%;
margin : 0px;
}
.img_caption_table th {
background: #D1D7DC ; ---> ???
font-size: 100%;
color : #000000; ---> ???
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-top : 1px solid #FFFFFF; ---> ???
}
.img_caption_table td {
background: #EFEFEF ; ---> ???
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
border-top : 1px solid #FFFFFF; ---> ???
white-space: normal;
}
.debug_text {
border: #BDBEBD; ---> ???
background-color: #EFEFEF; ---> ???
width : 100%;
margin : 0px;
}
.clickable_option {
cursor : default;
}
.listbox_lang {
color: #000000; --->
Couleur du texte
dans la liste du choix de la langue.
background-color: #D1D7DC; --->
Couleur du fond
dans la liste du choix de la langue.
border: 1px solid #D1D7DC; --->
Bordure.
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
vertical-align : middle;
}
#vanity a {
display:block;
width:57px;
height:20px;
margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}
|
|
|
HTML Texte Images Divers
|
