Je vous encourage à découvrir tous les liens, mais sachez qu’ il est possible d’insérer du CSS via le dernier onglet, et donc…

de changer l’image de fond:

avec une image stockée dans votre bibliothèque de médias, par exemple, et cette ligne

body{background-image:url('http://la_ou/je-range/monImage.gif'); }

de modifier le titre du blog

ici un lien dans un div#title

div#title, div#title a{
color:#FF06c9;
font-family: Courier New, Courier, monospace;
}

Je ne met pas d’image dans la têtière du blog par ici car il existe une boite spéciale pour cela dans le lien « Header & Footer » des options du thème.

évidemment, vous pouvez styler par cette boîte tous les éléments de votre blog!

+ Dans le même genre sur cette install je propose le thème Mandigo pour une présentation paramètrable sur une structure de blog plus classique.

Le code à copier là, par exemple:

<style type="text/css" >

body{background-image:url('http://la_ou/je-range/monImage.gif'); }

h1 #blogname, h1 #blogname a{color:#2489c3; /* le bleu de ce site */}

</style>

Et pour changer l’image du header?

Ben pareil, au même endroit on peut changer le style du div en question: div #headerimg

<style type="text/css" >

div#headerimg{
background-image:url('http://la_ou/je-range/monImage.gif');
background-repeat: repeat-x; /* ou repeat-all si c un tout petit gif */
}

</style>

Changer de thème

Le fichier README contient une note où Vaska nous rappelle que pour pouvoir modifier le thème du site, on doit d’abord choisir le « mode Avancé » dans les règlages de l’admin, puis sélectionner le thème voulu avec la boîte juste dessous:

Pour utiliser un autre thème existant il suffit de placer son dossier sur votre serveur (par ftp) dans le dossier /ndxz-studio/site/ ,  pour que son nom apparaisse dans la liste de choix. (Pas d’espaces, pas d’accents, pas de smileys et que des minuscules…dans le nom du répertoire-thème °!)

Pour modifier soi-même le thème par défaut  et créer ainsi un habillage original il vaut mieux enregistrer une copie du thème [sample] renommée ([my_sample]),  dans laquelle on pourra faire des bêtises.

Modifier le menu.

Par défaut le menu s’affiche selon ces critères, définis et modifiables dans le fichier style.css:

/* pour tout le texte*/
body {  font-size: 10px;
font-family: Verdana, sans-serif; }

/* pour les liens*/
a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }

/* le div du menu et sa liste de lien */
#menu { width: 215px;  overflow: auto; top: 0; bottom: 0;  left: 0;  position: fixed;  height: 100%;
background-color: #fff; }
#menu ul { list-style: none;  margin: 0 0 12px 0; }
#menu ul li.section-title { text-transform: uppercase;  }

En modifiant les valeurs spécifiées pour ces selecteurs vous pourrez déjà personnaliser l’apparence du menu: sa largeur ou sa position ligne 12 , sa couleur de fond ligne 13 …
Si on modifie les 9 premières lignes, c’est l’aspect de tout le texte et tous les liens du site qui sera altéré.
Pour modifier les liens du menu sans changer l’aspect du texte affiché dans les expos, il faut se servir du selecteur de la liste ligne 14 ou bien créer le sélecteur

 #menu li a {} 

dans la feuille de style…

Mettre un logo au-dessus des liens

La première manip’ qu’on a envie de faire pour personnaliser son site, et c’est prévu par les balises panier du moteur, puisque le « menu » se structure en fait en 2 div imbriqués: div#menu  > div.container > ul
Il est assez facile alors de mettre votre logo au fond du div#menu, et de décaler le container de la liste en fonction de sa hauteur:

#menu{
background-color: transparent;
background-image: url('../img/logo.gif'); /* url de l'image */
background-repeat: no-repeat;
background-attachment: fixed top left;}

#menu div.container{
margin-top: 150px; /* un peu plus de la hauteur du logo ?*/}

Ligne 3: placer votre logo dans le dossier ndxz-studio/site/img/ plutôt que dans votre thème vous permettra de le rappeler avec des thèmes différents.

Se présenter à Google comme un grand

Pour que votre galerie soit référencée selon vos préférences, il faut ajuster certaines  balises dans le header de la page générée… Allons voir ce qu’il se passe à ce niveau dans le fichier sample/index.php:

<!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' xml:lang='en' lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title><%title%> : <%obj_name%></title>

Pour mieux parler de vous aux robots du net, vous pouvez ajouter et compléter les balises suivantes entre la ligne 5  et la ligne 6:

<!-- balises meta pour Google et ses copains -->
<meta name="Description"  content="une description courte de votre site" />
<meta name="Author"  content="le nom de l'Artiste Exposant" />
<meta name="Keywords"  content="plusieurs, mots, clés" />
<meta http-equiv="Content-Language"  content="fr" />

+ Tant qu’à modifier ce fichier, profitez-en pour traduire les quelques mots « en dur » comme l’expression « Built with… » à la ligne 41 du fichier index.php du thème sample.

Head & Meta

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta name="Description" content="le blog de mon chat" />
<title>Lady Marmelade</title>
<meta name="Author" content="Laure J">
<meta http-equiv="Content-Language" content="fr">
<meta name="Keywords" content="images, chats, fleurs" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
</head>

Bon, il n’y a que deux lignes compliquées: la première et la dernière.

Dans la première ligne, on déclare le type de document avec une balise DOCTYPE  qui permettra au logiciel lecteur d’interpréter et de présenter correctement les lignes suivantes. Pour en savoir plus sur ces déclarations, il y a toujours le site du Zéro, Wikipédia et Comment ça marche.net.

Ligne 2, on ouvre la tête du document. Tout ce qui est déclaré dans cette balise ne s’affiche pas directement dans le navigateur mais est utile au référencement et à l’accessibilité de votre site.

Ligne 3, facile, une description en quelques mots du contenu de votre doc. Ligne 4, son titre, qui s’affichera dans la partie haute du navigateur. Ces deux balises sont importantes et doivent devenir un réflexe pour les créateurs web que nous sommes.

Lignes suivantes, d’autres informations qu’il est possible d’intégrer à une page de façon transparente: l’auteur du contenu, sa langue, et les mots-clés utiles aux moteurs de recherche pour classer vos informations. Attention, ces derniers ne tiennent compte que des mots-clés que l’on retrouve aussi dans le contenu. Il existe d’autres balises meta, qui servent à s’adresser aux robots et aux navigateurs: la liste ici.

Ligne 8, l’autre hic: le jeu de caractères utilisé. Comme vous savez il n’y a pas d’accents en anglais, les asiatiques sont aussi connectés à notre terrain de jeux où sont mêmes apparues de nouvelles lettres: @ pour commencer, mais aussi ?, ?, ?… Les machines ont à leur disposition plusieurs sets de caractères pour lire et afficher les données d’une page, mais elles n’en utilisent qu’un à la fois. Il faut préciser celui que vous désirer utiliser, en fonction du nb de langues employées dans votre contenu. Dans mon exemple iso-8859-15 correspond à l’alphabet latin utile aux francophones contemporains. Pour mieux comprendre et choisir en toute connaissance, un article chez Alsacréations.com.

On sait que toutes les images web sont en 72 dpi. À chaque pixel de l’image correspond une teinte, obtenue par la luminosité plus ou moins intense des loupiotes de nos écrans sur 3 couleurs primaires bien connues: RVB.

Les couleurs web sont codées en fonction de ces canaux Rouge, Vert ou Bleu. Chacun dispose de 255 niveaux de luminosité.
Pour obtenir du blanc, on allume tout à fond, ce qui donne une première façon de coder cette couleur: blanc = 255,255,255.

Pour l’écrire plus rapidement, on utilise un autre système de notation, et des couples de chiffres de 00 à FF.
Plus le chiffre est proche de FF et plus la couleur sera allumée, le blanc se code alors : FFFFFF. Dans un style css, on verra des trucs de ce genre:

/* dans une feuille de style .css */

body{
background-color:#ffffff; /* le fond de la page en blanc */
color: #060606; /* le texte presque noir */
}

h1{ /* les gros titres */
color:#ff0000; /* en rouge */
}

Gardez en tête que plus ces 3 valeurs sont proches et moins la teinte est forte, si la même valeur se répète 3 fois il s’agit d’un gris (une nuance entre le noir 000000 et le blanc ffffff).

Voili voiloù, il existe plein de sites qui permettent d’obtenir les codes web  des couleurs à partir d’images ou de palettes interactives, je vous renvoie gentiment à un article précédent parce que j’ai pas le temps d’en relister d’autres, là.

72 dpi, donc.

Tous les pixels du monde ont la même taille, par contre les écrans de vos visiteurs ne sont pas tous identiques. Exemple en images et  avec les stat de ce site.

L’image figurée dans mon illustration équivaut à un format classique de 600 x 400px. Attention à ne pas afficher d’images trop grandes, sous peine de déborder certains visiteurs…

Formats d’images

Le poids des images exposées sur des sites est aussi un critère important. Basiquement, plus une image utilise de couleurs et plus elle sera lente à afficher pour les visiteurs. Un peu moins basiquement, de savants calculateurs nous ont concocté des formules permettant de compresser plus finement les images en fonction de leur aspect. 3 standards de compression sont reconnus sur le web: JPG, Gif et PNG.

Jpg –> Tout le monde connaît, ça sort des appareils photos donc c’est bon pour les photos. Pas de transparence, flou de compression.

Gif –> Pour gérer finement le nombre de couleurs et le poids des images contrastées. Gère un niveau de transparence sur plusieurs trames au choix, existe en version animée.

Png –> Gère la transparence sur 255 niveaux, comme une quatrième couleur primaire. La classe, mais pour de petites images parce que du coup c’est un peu lourd. En plus, on ne peut pas vraiment les utiliser pour l’habillage des sites, certains navigateurs ne les digérant pas très bien…

Intégration

Pour mettre une image dans une page web, on a d’abord besoin qu’elle soit stockée à un endroit accessible, qu’elle possède une adresse url. Cela peut être sur un serveur perso ou via un service comme flickr ou picasa. La plupart des blogs et autres proposent  directement de charger les  images depuis votre ordinateur et se chargent de leur classement.

Une fois cette condition remplie, le code html pour insérer l’image ressemble à cela:

une balise image doit ressembler à cela:

<img src="mon_image_rangee.jpg" width="50" height="50" title="titre image" alt="texte alternatif en cas de pb de chargement" />

où src correspond à l’adresse de l’image, height et width donnent ses dimensions en pixels, alt contient le texte qui s’affichera en cas de problème et title titre l’image pour les moteurs de recherche.

Selon le dictionnaire ont devrait la réserver aux sigles qu’on peut lire comme de vrais mots, mais on s’en sert pour tous. Cela permet surtout d’en mettre plus en prenant moins de place, et d ‘apprendre des mots de geeks.

<acronym title="Light Amplification by Stimulated Emission of Radiation">LASER</acronym>

Avec ce code, le titre du sigle sera lu au survol de la souris:

Radar – HTML – PHP -W3C – CSS – ADSL – SQL – AJAX – HADOPI – DADVSI – LOPPSI –

Balises.

HT pour HyperTexte et ML pour Markup Language, en français on dit langage balisé. Les balises html correspondent chacune à un élément de page: paragraphe, titres, lien, tableau, listes, images…etc. Combinées dans un document .html, elles structurent le contenu et sa présentation.  Tout le contenu d’une page web est décrit de cette façon aux navigateurs, qui lisent bêtement de haut en bas.

<html>
<h1> Le plus gros titre </h1>
<h6> Le plus petit titre </h6>

<p> Une balise pour  ouvrir un paragraphe,
dans lequel je peux mettre <a> un lien </a>,
par exemple.
<cit>Il existe une balise dédiée aux citations.</cit>
</p><!-- fin du paragraphe -->

</html>

On voit que les balises sont des containers d’informations et fonctionnent un peu comme des poupées gigognes, qui peuvent en contenir d’autres plus petites mais doivent être refermées pour trouver leur bonne place dans l’ensemble.
C’est vrai pour la plupart des balises html, et si vous voyez <qqchse> dans le code, vous trouverez </qqchse> un peu plus loin.
Cependant certaines balises spéciales n’ont pas besoin d’être ainsi doublées, et celles-ci se terminent par 1 autre signe de fermeture: />

C’est le cas des images, décrites ainsi:

<p> un paragraphe où insérer mon image:
<img src="mon_image_rangee.jpg"/>
et voilà!

Mais img n'est pas la seule balise qui se dédouble pas:

<embed src="mon_film_youtube"/> est aussi répandue pour partager sur les réseaux sociaux du web 2.0...

</p>

Contrairement au contenu d’un paragraphe, l »information des images n’est pas écrite dans la page, il faut aller la chercher ailleurs.
On donne donc l’adresse où est stockée l’image à la balise en utilisant son attribut source : src="adresse_source_image".

Attributs

Donc voilà, faut pas casser les balises quand on copie -colle du html. Et certaines ont besoin d’attributs pour fonctionner correctement. Entre ce qui fonctionne et ce qu’il est poli de faire, il y a quelques arguments supplémentaires  à ajouter aux éléments courants. Notamment:

Pour les Images

<img src="mon_image_rangee.jpg" /> ne suffit pas.

<img src="mon_image_rangee.jpg" width="50" height="50" alt="texte alternatif en cas de pb de chargement" title="nom de mon image"/> convient bien mieux

alt, c’est ce qui s’affiche si l’image ne se charge pas. Les dimensions des images s’expriment en pixels dans les attributs height et width.
+ Voir mes notes sur les images?

Pour les Liens

<a href="www.monsite.com"> Mon Site </a>

href est l’attribut essentiel d’un lien puisqu’il indique la destination du clic. Mais là encore ça ne suffit pas à faire un « beau » lien:

<a
href="www.monsite.com" target="_blank" title="Titre visible au survol"> Mon Site </a>

où target précise que l’on ouvre une nouvelle fenêtre / un nouvel onglet. Si on souhaite rester dans la même  fenêtre de navigation, target="self".
L’attribut title des balises est important pour les robots comme celui de Google.
+ Voir mes notes sur les liens sociaux?

Et avec ceci?

Ben normalement avec tout ça vous devriez pouvoir  proposer des tas de liens et de citations en commentaires, il existe des tas de tuto pour mettre les mains dedans, j’en donne un parce qu’il est bien et un autre sur Comment ça marche.net.

En gros

Je pose la carte complète ici, j’essaierai de la mettre à jour quand j’en saurai plus. ( + télécharger le fichier .mm).

En détail

Zoom dans les Templates.

admin-bar

Certains des éléments listés sont ajoutés par des plug-ins ou changent fonction de si l’utilisateur est connecté ou non…

Home

La page d’accueil contient tous les éléments de base et range son contenu (des widgets) dans 3 div #first-section, #second-section, #third-section .

Home vs Blog

Avec les pages du blog principal, le div #container accueille sa structure générale, avec un #content et une #sidebar.

Pages Annuaires

Chaque page annuaire Membres, Groupes et Blogs reprennent la même construction. 

Pages Internes

Dans ces pages, #container contient 2 modules de navigation en plus du #content. Le contenu de #userbar dépend un peu de si l’utilisateur est connecté, celui de #options-bar change en fonction de l’item consulté ( un groupe, un  membre ou un forum…).