Par défaut, un spip sans habillage se présente de la façon ci-dessous :

Activer les plugins :

Depuis le menu : Configuration -> Gestion des Plugins

 Activer les plugins Habillage d’EVA-web, Accès Restreint, EVA-web Bonus, EVA-webMini calendrier mensuel, etc...

 Activer également le plugin Palette. ( Ce plugin associe aux champs « input » de formulaire html un sélecteur de couleur associé. )

 Puis voir le site public et recalculer cette page

Un peu d’habillage :

Dans le menu Squelettes - Habillages EVA-web :

 menu gauche : ’Structure des pages’ -> ’Structure de base’ :

 Choisir un des modèles d’habillage de base d’EVA-web, par exemple : eva4_basic_3colonnes.css

 menu gauche : ’Structure des pages’ ->’Sommaire’, ’Rubriques’, ’Articles’, etc... :

 Disposez les blocs en fonction du modèle (2 ou 3 colonnes) et des blocs que vous voulez voir apparaître (Sites partenaires, Editorial, Articles, Sites référencés, etc...)

Exemple : Rajouter le mini-calendrier d’Eva
Le plugin Eva-bonus est activé

 dans Squelettes -> Noisettes bonus pour Eva-Web, repérer le nom de la noisettes ; Ici ’eva_mini_calendrier’ qui s’applique pour les domaines rubrique, article, brève, site, auteur.
 retour dans Squelettes -> Habillages d’Eva-Web, Onglet ’sommaire’

 dans le bloc Insérer un squelette personnel de type bloc dans le sommaire ?, insérer le nom du squelette : ’eva_mini_calendrier’, choisir la colonne et l’ordre, puis Insérer.

Et toujours Voir site -> recalculer la page

Modifier le ’Menu de navigation’ en menu horizontal

Pour chaque bloc, le squelette Menu de navigation à été désactivé et remplacé par un menu horizontal.

 Dans ’Entête’, rajouter le nom du squelette : menu_depliable_horizontal

 Dans ’Headers’, rajouter le nom du squelette : headers_menu_depliable_horiz

On obtient un onglet supplémentaire : Menu horizontal dans lequel vous pouvez modifier les couleurs, styles...

 menu gauche : ’Graphismes des pages’ - ’Police’ : Saisir d’une police, par exemple ’arial’

 menu gauche : ’Graphismes des pages’ - ’Couleurs et détails graphiques’ :

Sélectionner les couleurs des différents éléments, couleurs des fonds, couleurs des textes, couleurs des liens, bordures, tailles des secteurs.

Insérer des règles CSS’

 Dans le menu Squelettes - Habillages EVA-web :

 menu gauche : Insérer des règles CSS -> Bloc : Injection directe de règles CSS prédéfinies

Par défaut, des règles prédéfinies peuvent être ’Ajouter’ puis ’Modifier’, par exemple :

 Clic sur Ajouter Diminuer de 20% la taille de la police de caractères

On retrouve la valeur dans le bloc ’Vos règles CSS déjà définies’ : body font-size : 80% ;

Vous pouvez ensuite modifier les valeurs, exemple : body font-size : 75% ; , body font-size : 14px ;, etc..

Un peu plus loin avec les règles CSS’

 Depuis la page du site, clic droit puis ’Examiner l’élément’. La console javascript s’ouvre.
 Repérer le tag en passant la souris sur les différents attributs.

 Sur la partie droite, onglet ’Règles’, on retrouve les styles appliqués. Ajouter, modifier les styles. une fois le style défini pour les tags, reporter les dans les règles CSS -> Définir vos propres règles.

exemple : Modifier la taille du logo du site

 Clic droit sur le logo du site, Inspecter l’élément.

 Dans la console, l’inspecteur se positionne sur le tag ’ Dans la partie droite, Règles, double clic sur la valeur de l’attribut. Les changements sont visibles directement sur la page.

 Une fois la taille désirée obtenu , reporter la règle, ici div#entete h1 imgwidth:100px ;height:88px dans la définition de vos propres règles.

Penser à définir la hauteur du secteur d’entête dans Graphisme des pages

renseigner le site

On renseigne le nom du site, l’url du site, l’email du webmestre et ajoute un logo :

 menu ’Configuration’ -> ’Identité du site’