Attention !
Ce blog a déménagé et n'est plus mis à jour. Rendez vous sur le nouveau blog :
http://www.blogtuto.org/
lundi 28 avril
Question du jour! Lire le script et la feuille de style d'un blog qu'on visite
"Comment fait on pour lire les script et les feuilles de style des blogs qu'on visite ????"
Quand on est sur la page du site ou blog on clique sur "affichage" dans le menu à côté de la barre de navigation et on choisit "code source" ou "affichage du code source" (selon les navigateurs, ça peut être formulé différemment). Dans l'exemple sur le dernière ligne :
La page va s'afficher avec tout le script.
Pour lire la feuille de style il faut chercher dans ce script dans les 10/15 première ligne une adresse finissant pas style.css :
Dans l'exemple ci dessus la l'adresse est
http://blogtuto.canalblog.com/style/2/7/700072/style.css
En la mettant dans la barre de navigation on accède à la lecture de la feuille de style.
Bonne semaine ;-)
Tags : FAQ, feuille de style, script
lundi 07 avril
Voir le script et la feuille d'un style d'un blog ou d'un site
Pirate !
Ben oui quand je trouve quelque chose qui me plait c'est comme ça que je fais...
Dans votre menu de navigation sélectionner "Affichage" puis "code source" en bas...
Premier miracle : le script de la page apparait, youpi!
Pour la feuille de style, vous verrez dans les première ligne cette adresse ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BlogTuto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="fr" />
<meta name="Description" content="
BlogTuto...les tutos qu'il vous faut !" />
<meta name="Keywords" content="tuto, canalblog, assistance, blog, photofiltre, aide, bénévole, bannière, help, sos, tutoriel," />
<meta name="generator" content="CanalBlog - http://www.canalblog.com" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://blogtuto.canalblog.com/rss.xml" />
Il vous reste à copier ce lien dans votre barre de navigation et allez vous promener chez votre hôte...
Tags : feuille de style, script
Comprendre la feuille de style
body { <-- fond de la page tout entière
margin: 0px 0px 0px 0px;
text-align: center;
background-color: #ADA59D; <-- Couleur du fond
}
#container { <-- page centrale du blog = titre + colonne + espace texte
width: 1000px; <-- largeur du tableau au complet colonne(s) + espace texte
padding: 0px;
background-color: #FDF7FB;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-right: auto;
margin-left: auto;
}
#content { <-- Espace texte
float: left;
width: 800px; <-- largeur de la colonne espace texte
background-color: #FFFFFF; <-- couleur fond espace texte
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#rightbar { <-- Colonne de droite
float: left;
width: 0px; <-- largeur colonne
heigth: 0px; <-- longueur colonne, ne figure pas toujours par défaut
background-color: #999999; <-- couleur arrière plan colonne
border-top-style: none; <-- couleur du cadre haut
border-right-style: none; <-- couleur du cadre droit
border-bottom-style: none; <-- couleur boutons
border-left-style: none; <-- couleur du cadre gauche
border-width: 1px; <-- largeur des bords
border-color: #; <-- couleur des bords
overflow: hidden;
}
#leftbar { <-- Colonne de gauche idem ensuite que pour la colonne de droite
float: left;
width: 200px;
background-color: #FDF7FB;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#topbar-logo { <-- Bannière
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
background: url(" http://storage.canalblog.com/37/09/446950/24117946.jpg") no-repeat 0% 0%; <-- le code de la bannière vient ici
height: 200px; <-- hauteur de la bannière à renseigner
display: block;
}
div .logolink a { <-- lien de la bannière vers la page d'accueil
display: block;
text-decoration: none;
width: 100%;
height: 200px; <-- hauteur de la bannière à renseigner
}
#topbar { <-- Entête
background-color: #F4EFF7;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 10px;
display: none;
}
a {
text-decoration: none;
}
a:link { <-- liens
color: #6C2A4B;
text-decoration: none;
}
a:visited { <-- liens visités
color: #6C2A4B;
text-decoration: none;
}
a:active { <-- liens actifs
color: #6C2A4B;
text-decoration: underline;
}
a:hover {
color: #6C2A4B;
text-decoration: none;
}
h1 { <-- Titres des rubriques et des billets
margin: 0px;
padding: 0px;
}
h2 { <-- dates
margin: 0px;
padding: 0px;
}
h3 { <-- texte bas de page "commentaires"
margin: 0px;
padding: 0px;
}
#topbar h1 { <---- texte de la bannière
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #7F1B58;
font-size: xx-large;
font-weight: bold;
font-style: normal;
text-align: left;
}
#topbar a {
text-decoration: none;
color: #7F1B58;
}
#topbar h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: small;
font-weight: normal;
font-style: normal;
text-align: left;
}
.blogbody { <---------- texte
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
padding: 10px;
text-align: left;
line-height: 150%;
}
.blogbody h2 { <------- date
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #591B3A;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-bottom: 10px;
padding: 0px;
}
.blogbody h3 { <-- Eléments relatifs au titre d'un billet
font-family: Verdana, Arial, Helvetica, sans-serif; <------- police
color: #000000; <-- Couleur du titre
font-size: small;<-- taille police
font-weight: bold;<-- gras '"bold" ou "normal"
font-style: normal;<-- "italic" ou "normal"
text-transform: none;<-- majuscule = UPPERCASE sinon laisser tel quel
text-align: left;<-- alignement du texte left, center ou right
border-top-style: none;<-- cadre
border-right-style: none;<-- cadre droit
border-bottom-style: none;<-- bord cadre bas
border-left-style: none;
border-width: 1px; <-- largeur de la bordure
border-color: #;
margin-bottom: 10px; <-- Espace entre titre et texte
padding: 0px;
}
.blogbody p { <-- texte des billets
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%;
margin-bottom: 10px;
}
.blogbody .itemfooter {<-- pied de page
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: x-small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
margin-bottom: 25px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 2px;
border-color: #;
padding: 0px;
clear: both;
}
.navlinks {
padding: 10px;
}
.navlinks .title {<-- Titres des catégories
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #591B3A;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 0px;
}
.navlinks ul { <------- liens dans les colonnes introduit par l'attribut <ul>
padding: 0px;
margin: 0px 0px 20px 0px;
list-style-type: none;
margin: 0px 0px 20px 0px;
}
.navlinks li { <------- liens dans les colonnes introduit par la puce <li>
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: x-small;
font-weight: normal;
font-style: normal;
text-align: left;
line-height: 150%;
margin-top: 10px;
}
.navlinks .item { <------- liens dans les colonnes introduit par <item> ex : contactez l'auteur
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: x-small;
font-weight: normal;
font-style: normal;
text-align: left;
line-height: 150%;
margin-top: 10px;
margin-bottom: 10px;
}
#calendar {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: x-small;
line-height: 150%;
padding: 2px;
margin-bottom: 20px;
}
#calendar table {
width: 100%;
padding: 2px;
border-collapse: collapse;
border: 0px;
}
#calendar caption {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: x-small;
font-weight: bold;
text-align: center;
text-transform: uppercase;
padding: 3px;
}
#calendar th {
font-weight: normal;
text-align: center;
}
#calendar td {
text-align: center;
}
.image {
text-align: left;
margin-bottom: 20px;
}
.navlinks img { <------ image dans les colonnes
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 0px;
border-color: #000000;
}
#album-container {
width: 800px;
padding: 0px;
background-color: #FDF7FB;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-right: auto;
margin-left: auto;
}
#album-content {
float: left;
width: 550px;
background-color: #FDF7FB;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#album-nav {
float: left;
width: 250px;
background-color: #FDF7FB;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
.albumcol table {
padding: 2px;
border-collapse: collapse;
border: 0px;
font-size: x-small;
}
.albumcol td {
text-align: center;
}
.albumbody {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
padding: 10px;
text-align: left;
line-height: 150%;
}
.albumcol {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
padding: 10px;
text-align: left;
line-height: 150%;
}
.albumcol h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-bottom: 10px;
padding: 0px;
}
.albumbody h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #591B3A;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-bottom: 10px;
padding: 0px;
}
.albumbody img {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #000000;
}
.albumcol img {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #000000;
margin: 2px;
}
.albumbody p {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%;
margin-bottom: 10px;
}
.albumcol p {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%;
margin-bottom: 10px;
}
.clear {
clear: both;
height: 0px;
line-height: 0px;
}
Ce Tuto indispensable vous est offert par SILO - Merci à elle
Si vous souhaitez participer et contribuer à Blogtuto en parrainant un tuto, faites un don dès maintenant!
N'oubliez pas en commentaire de laisser l'adresse de votre blog pour que je puisse vous mettre en parrain ou marraine sur le tuto à venir. Merci d'avance!
Tags : feuille de style