Escal V3

Slogan du site

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon.

Accueil

Formation

Module 3

Personnaliser son site

ou comment facilement modifier l’apparence de son site ?

Article mis en ligne le 4 mars 2010
par François Lacour

Imprimer cet article logo imprimer

Personnaliser son site est une des première forte volonté des nouveaux webmestres, voici de quoi les satisfaire dans un premier temps.

Mise en page

1, 2, 3 colonnes, à droite, à gauche ... c’est là que ça se passe Mise en page générale

Il existe aussi maintenant des variantes à cette mise en page et c’est là article 134

Pour supprimer le logo du site, il suffit ... de ne pas en avoir. En effet, il ne s’affiche que s’il existe. Si vous voulez avoir un logo et ne pas l’afficher (bizarre, mais sait-on jamais ...) il suffit d’aller dans le fichier inc-bandeau.html et de supprimer les lignes

  [(#REM) affichage du logo du site s'il existe avec un lien vers la page d'accueil]

  [<a href="#URL_SITE_SPIP">(#LOGO_SITE_SPIP)</a>]

L’image du bandeau

Elle peut évidemment être remplacée par celle que vous avez amoureusement concoctée. Pour cela, il faut mettre votre fichier image dans le dossier /squelettes/images et indiquer son nom dans ce même fichier inc-bandeau.html à la place de bandacad.jpg

  [(#REM) affichage de l'image du bandeau]

  <img src="#CHEMIN{images/bandacad.jpg}" alt="bandeau" />

On peut aussi rajouter un lien vers la page d’accueil sur cette image en modifiant ce même code ainsi :

  [(#REM) affichage de l'image du bandeau]

  <a href="#URL_SITE_SPIP"><img src="#CHEMIN{images/bandacad.jpg}" alt="bandeau" /></a>

Le titre du site

On peut également modifier la police de caractères du titre du site. Pour cela, il faut récupèrer une police libre de droits qui vous convient sous la forme d’un fichier .ttf et copier ce fichier dans le dossier /squelettes/polices puis de modifier le fichier inc-titre_page.html du répertoire /squelettes/inclusions.

<div id="titrepage">[(#NOM_SITE_SPIP|image_typo{police=magnetob.ttf, taille=20,couleur=000000})]

en remplaçant le nom de la police. On peut aussi jouer avec la taille et la couleur, comme on peut le voir.

Pour supprimer ce titre s’il ne convient pas à votre charte graphique, ben ... virez cette ligne des fichiers en question. Ou encore plus simple, on rajoute la propriété display : none ; dans le style #titrepage. Autrement dit, on écrit ce code dans le fichier perso.css que l’on met dans le dossier /squelettes.

#titrepage {

        display: none;

}

Logos

Vous avez vu les petits logos dans le coins des cadres et les logos des rubriques. Là aussi, vous préfèreriez les vôtres.

Les logos de rubriques

Pour associer un logo à une rubrique, c’est du SPIP pur. On joint le logo à la rubrique dans l’espace privé et il sera affiché.

Les logos des cadres

Pour changer ou rajouter un logo de cadre, il faut aller dans le code et repérer ou rajouter à l’intérieur de la noisette correspondante une ligne de ce genre juste avant la balise fermante </h1>

<img src="#CHEMIN{images/acces-direct.png}" width="36" height="36" alt="accès direct" />

en remplaçant acces-direct.png par le nom de votre fichier-logo que vous aurez placé dans le dossier /squelettes/images, en adaptant les valeurs pour la largeur et la hauteur et en remplaçant le texte de la balise alt par celui que vous voulez.

Si vous voulez que ce logo soit à droite, rajouter la class "a-droite" à la balise h1 comme sur cet exemple

<h1 class="cadre a-droite">

#TITRE

<img src="#CHEMIN{images/acces-direct.png}"  width="36" height="36" alt="accès direct" />

</h1>

Haut de page

Répondre à cet article

Personnaliser son site

Afev Nantes - Guillaume - le 30 novembre 2010

Bonjour,

en charge de la communication d’une association au niveau local, nous avons créer en fin d’année dernière (juin 2010) un tout nouveau site en s’appuyant sur escal V2.

Nos connaissances en informatique restant limitées, nous avons mis plusieurs semaines à le travailler, mais les possibilités qu’il offrait nous laissait entrevoir toutes les possibilités en terme d’information que nous allions pouvoir y mettre.

Aujourd’hui, se pose le problème de la réception de ce site. notre association s’adresse à un public jeune (18-2( ans) qui a l’habitude de naviguer, mais qui vient aussi picorer l’information.

Au delà de son caractère exhaustif, qui semble être apprécié, on nous renvoit aussi l’image d’un site complet mais pas "fun", peu illustré, difficile de navigation...

J’en viens à mes questions, qui sont nombreuses et elles, pour le coup, surement incomplètes.

est -il possible de mettre des images pour illustrer les articles

est -il possible de personnaliser chaque article en terme de police / couleur de police / taille de police ( un openoffice intégré presque...sik)

pouvons nous organiser les "news" de la plus récente à la plus ancienne, pour faciliter les passages courts mais fréquents ?

Peut-on mettre des "encarts" illustrés sur la gauche, afin de rendre la navigation très simple sur les infos principales ?

Voilà, je sais que ma demande est vaste, merci tout de même pour votre travail et la réponse que vous m’apporterez.

Pour infos, je vous laisse notre site :
http://www.afev.fr/nantes/

Répondre à ce message

Personnaliser son site

Jean Christophe Villeneuve - le 30 novembre 2010

Bonsoir

Bon déjà, pour des néophytes, moi je dis bravo, beau boulot ! Vous avez déjà pas mal personnalisé votre site.

Ensuite, tes questions :
Bien sur que l’on peut mettre des images dans les articles, c’est une fonction de base de spip. Dans l’espace privé, en mode de saisie d’article, tu peux télécharger une image et l’insérer dans ton texte.
Personnaliser chaque article ? Je te le déconseille car tu vas faire exploser ta charte graphique si chacun y va d sapolice, de sa couleur ou de sa taille de caractères. Il faut garder une cohérence.
Qu’appelle-tu les "news" ? les articles au centre de la page d’accueil ?
Qu’appelle-tu des "encarts" ? Un bloc de plus ? Facile ! Et illustrés de quelle façon ? On peut quasiment tout faire mais il me faut plus de précisions.

Sinon, une petite remarque : bizarre ces rubriques qui ne contiennent qu’un article avec le même nom que la rubrique ...

Répondre à ce message

Personnaliser son site

guillaume - le 18 mai 2011

Bonjour,

Vous allez croire que je réponds tous les 6 mois...et il y au n peu de ça !
Plus sérieusement, je n’avais jamais fait attention à la réponse, et une partie de mes questions avaient déjà trouver leurs solutions.
En tout cas merci de votre réponse.

reste encore quelques interogations :
les fameuses "news" : en effet, nous aimerions "hiérarchiser les articles publiés, pour que d’un coup d’oeil, nos bénévoles puissent voir si une nouvelle actu est en ligne.
Concernant l’encart, ou le blog de plus, nous aimerions pouvoir en effet en remettre un, qui ressemblerait en tout point à l’édito (c’est à dire avec une image et un line hypertexte dessus).
j’ai aussi vu sur un article de votre site qu’il est possible de mettre une photo sur la page d’accueil, pour illustrer l’article... Je n’arrive pas à trouver comment vous faites celà. C’est ici : Diapo (+Thickbox)

Enfin, c’est vrai que nos rubriques avec un seul article c’est un peu bizarre, mais on ne voulait pas exclure le fait que ce nombre d’article allait évoluer...

Répondre à ce message