Trucs et astuces avec le fichier css


Didacticiels - Modes d'emplois - Apprentissage
Tout ce qui concerne l'apparence des thèmes : modifier les couleurs, les images, céer un thème à partir d'une base existante, utilisation des fichiers CSS ...

Modérateurs: support, audax, scoreboard

Trucs et astuces avec le fichier css

Messagepar audax » Mer 04 Jan 2006 13:49

truc et astuces avec le fichier css

Un curseur avec le fichier css, mais visible sur toute les pages


Dans le fichier css, il y a l'emplacement du code pour l'image de fond qui se trouve en première partie..
exemple avec le fichier css de MylPotter..

le code est celui ci

Code: Tout sélectionner
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
   background-color: #000000;
   scrollbar-face-color: #000000;
   scrollbar-highlight-color: #FDD35F;
   scrollbar-shadow-color: #B5906B;
   scrollbar-3dlight-color: #FDD5AB;
   scrollbar-arrow-color: #FDD35F;
   scrollbar-track-color: #000000;
   scrollbar-darkshadow-color: #FDD35F;
   background-image : url(images/background1.jpg);
   background-repeat : no-repeat;
   background-attachment : fixed;

}


et pour placer un curseur vous rajouter ce code

cursor: url(ADRESSE URL DU CURSEUR);


ici;

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #FDD35F;
scrollbar-shadow-color: #B5906B;
scrollbar-3dlight-color: #FDD5AB;
scrollbar-arrow-color: #FDD35F;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #FDD35F;
background-image : url(images/background1.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
cursor: url(ADRESSE URL DU CURSEUR);

}


je l'ai rentré comme ceci avec l'adresse url du curseur

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #FDD35F;
scrollbar-shadow-color: #B5906B;
scrollbar-3dlight-color: #FDD5AB;
scrollbar-arrow-color: #FDD35F;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #FDD35F;
background-image : url(images/background1.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
cursor: url(http://www.boomspeed.com/starlight/curaim1.cur) !important;
}


et voilà ce que cela donne
Dernière édition par audax le Mer 04 Jan 2006 21:52, édité 1 fois.
Audax, modérateur

Image Image Image Image
Avatar de l’utilisateur
audax
Modérateur
Modérateur
 
Messages: 1619
Inscription: Ven 19 Nov 2004 21:28

Messagepar audax » Mer 04 Jan 2006 14:03

:arrow: Une autre petite astuce que vous pouvez faire avec le css.
vous avez surement déjà remarquez sur des sites, qd on passe la souris sur le lien, au passage de la souris, le lien grossi..
L'astuce en fait consiste a éditer qu'un seul fichier qui est le css.. un site ou un forum qui comprend d'innombrables pages, ces pages, font appel à un seul fichier qui comprend toutes les couleurs et principales images des pages qui est le fichier css.. de ce fait, le webmaster n'aura en fait, pour ces innombrables pages, à éditer qu'un seul fichier.. c'est beaucoup plus facile pour lui..

pour cette astuce.

il suffit de prendre ce code qui se prouve dans le css
soit celui ci..


/* General font families for common tags */
font,th,td,p {
font-family: Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited { color : #7B5B3B; }
a:hover { text-decoration: underline; color : #7B5B3B; }
hr { height: 0px; border: solid #7B5B3B 0px; border-top-width: 1px;}



et vous placez la petite taille de lettre font-size: 12px; dans la phrase qui commence a:link
et la grande taille de lettre dans la phrase qui commence par font-size: 14px; dans la phrase qui commence par a:hover

soit comme ceci..

/* General font families for common tags */
font,th,td,p {
font-family: Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited { font-size: 12px !important; color : #FB5B3B; }
a:hover { text-decoration: underline; font-size: 14px !important; color : #FB5B3B; }
hr { height: 0px; border: solid #7B5B3B 0px; border-top-width: 1px;}



voir l'effet sur ce forum en passant la souris sur les liens

sur ce forum test, j'ai placé les liens d'une autre couleur, alors de ce fait, le code devient comme ceci

/* General font families for common tags */
font,th,td,p {
font-family: Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited { font-size: 12px; color : #996600 !important; }
a:hover { text-decoration: underline; font-size: 14px; color : #FF4500 !important; }
hr { height: 0px; border: solid #7B5B3B 0px; border-top-width: 1px;}
Audax, modérateur

Image Image Image Image
Avatar de l’utilisateur
audax
Modérateur
Modérateur
 
Messages: 1619
Inscription: Ven 19 Nov 2004 21:28


Revenir vers TUTORIELS

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité

cron