logo site
SpipFactory.fr
Slogan du site

C’est une plateforme d’hébergement autogéré en association de loi 1901.
Propulsée par la mutualisation de Spip. Habillage Escal .

logo article ou rubrique
Personnalisation poussée d’ESCAL

Malgré un “"clicodrome"” qui permet d’avoir un squelette hautement paramétrable

On peut parfois vouloir aller encore plus loin…

Article mis en ligne le 25 juin 2019
dernière modification le 13 novembre 2019

Ci dessous les questions qui on été posé sur la liste escal et la solution apporté

CSS

si tu vois

  • <div class="truc" ... ; il faut utiliser .truc dans les css
  • <div id="truc" ...; il faut utiliser #truc dans les css

Un id doit être unique dans une page alors qu’un div class peut être utilisé plusieurs fois

Mise en page

la noisette video sans contour ni fond,

div h1.cadre.video {
    background-color: #fff;
    color:  #fff;
   }
div.texte.video {
    background-color: #fff;
    border-color: #fff;
    color:  #fff;
   }
div.cadre-couleur h1.cadre .video{
    display: none;
}
div.cadre-couleur .video-accueil{
   color:  #fff;
}

Supprimer le bouton ’aujourd’hui’ du mini calendrier

.calendriermini .ui-datepicker-buttonpane  {display:none;}

Changer la couleur des textes de retour de la page contact

.valeur2, .valeur3{
 color: #000000;
}

De jolis cadres pour le code

Éliminer l’icône « flèche » (...)

Éliminer l’icône « flèche » qui accompagne chaque lien (hypertexte) externe

a.spip_out {
background: url("");
padding-right: 0;
}

Les liens admin sur le côté

.spip-admin-bloc, .spip-admin-float {
right: 0 !important;
}
a.spip-admin-boutons, .spip-admin-boutons a {
 display: block;
}

Mettre une image de fond dans son bandeau pour pouvoir rajouter par-dessus un logo et/ou du texte

Tu peux le faire en mettant ton image de fond dans /squelettes/images/bandeau par exemple et en mettant dans un fichier perso.css (placé dans /squelettes/styles) le code suivant :

#bandeau {
background-image : url(../images/bandeau/monimage.jpg) ;
height: 100px;
}

si ton image s’appelle monimage.jpg et fait 100px de hauteur

Imposer 2 colonnes pour tout, sauf le sommaire

body.page-article #contenu,
body.page-rubrique #contenu,
body.page-404 #contenu,
body.page-annuaire #contenu,
body.page-mentions #contenu,
body.page-recherche #contenu{
width: 720px;
}

régler l’Espace entre les onglets

ul.onglets li {
 margin-left: 10px;
}

Virer le fil d’ariane

Modifier le style du texte

Escal utilise des tailles en rem et que cette unité est définie par rapport à une valeur déclarée pour la balise html.

Par défaut, cette valeur est définie à 62.5% qui permet d’avoir la correspondance 1rem=10px

On peux donc jouer sur cette valeur avec dans ton perso.css

une guirlande clignotante en dessous du menu horizontal

Avec clignotant-fin.gif dans /squelettes/images

Une #PUCE dans votre site ?

#PUCE affiche une puce (symbole typographique) sous la forme d’une image puce.gif présente par défaut à la racine de squelettes-dist.

Lorsque vous commencez une nouvelle ligne par un tiret, SPIP le remplace par une petite « puce » graphique.

vous pouvez modifier ce fichier selon vos besoins.

  • Vous pouvez personnaliser cette puce-image en créant un fichier "puce.gif" et le placer dans un dossier /squelettes.
  • Vous pouvez aussi décider de fixer vous-même le choix de la puce, au travers de la variable

Par exemple pour indiquer un autre fichier graphique :

$GLOBALS['puce'] = "<img src='ma-puce.png' alt='-' />";

ou par un élément HTML non graphique, comme un caractère unicode :

$GLOBALS['puce'] = "→";

Toutefois ce n’est pas Escal mais Spip qui colle ce triangle car on utilise des tirets simples au lieu d’utiliser les raccourcis de listes de Spip

  • item 1
  • item 2
    • sous-item 1
    • sous-item 2
  • item 3

Avantages d’utiliser ces raccourcis : tu as de vraies listes html (ul li) que tu peux donc styler à souhait avec une règle css dans perso.css avec par exemple

Et bien sûr, tes puce1, puce2 et puce3 (ou le nom que tu leur donneras) doivent se trouver dans /squelettes/images. Avec ce système on pourrait ainsi imaginer une dizaine de puces différentes selon les endroits et rubriques d’un site.

exemple pour l’article XX

Éviter que le sommaire automatique soit caché par un cadre

Changer une couleur des icônes Escal avec un éditeur de texte

Le format svg étant basé sur le XML, on peut aussi modifier en une fois une couleur de toutes les icônes avec un éditeur de texte.

Les copier, en local, dans un dossier différent de celui du plugin (par exemple dans le dossier squelettes/images) et d’utiliser les fonctions Rechercher et remplacer de l’éditeur de texte.

Remplacer toutes les occurrences du bleu Escal #336699 par le code hexadécimal de votre couleur. Refaire éventuellement l’opération pour les autres couleurs. Le fichier 1-icones-escal.svg où vous retrouverez l’ensemble des icônes, vous permet de voir ce qui est à faire et, bien entendu, celui avec la liste des icônes et les spécifications vous donne le nom des fichiers concernés et le code des couleurs.

Bandeau & Menu

  • copier le fichier **inc-menuart.html** de **/escal/inclusions** vers /squelettes/inclusions
  • dans le fichier copié, rajouter le critère `0,10` dans chaque boucle ARTICLES (il y en a 13)

Bien sur, tu peux mettre une autre que valeur que 10

un espace au dessus du bandeau

Changer la couleur de la boite deroulante du menu horizontal

ul#menu ul {
background-color : #189E5F;
}

Enlever le border des items « menu horizontal »

code>ul#menu li a
border : none ;

Page d’accueil

Changer la couleur du titre de l’article annonce défilante et celui en exergue

Rubriques

un calendrier dans une rubrique

Pour l’afficher dans une seule rubrique, c’est un peu plus compliqué :

  • on copie le fichier rubrique.html de /escal vers /squelettes
  • on copie une nouvelle fois ce fichier en le nommant rubrique=XX.html (où XX correspond au numéro de la rubrique)
  • dans le fichier rubrique=XX.html, on ajoute

à l’endroit où on veut afficher le calendrier

exemple :

        [(#CONFIG{escal/config/blocnavrub2}|=={rien}|non)
          <div class="cadre-couleur"><INCLURE {fond=inclusions/inc-#CONFIG{escal/config/blocnavrub2,choixmenuV2}}{env}{ajax}></div>
        ]

       <div class="cadre-couleur"><INCLURE {fond=inclusions/inc-calendrier}{env}{ajax}></div>

        [(#CONFIG{escal/config/blocnavrub3}|=={rien}|non)
          <div class="cadre-couleur"><INCLURE {fond=inclusions/inc-#CONFIG{escal/config/blocnavrub3,acces_direct}}{env}{ajax}></div>
        ]

Remarques :

Dans cet exemple, le calendrier n’est affiché que dans la page rubriqueXX

Si on veut que les sous rubriques de rubrique XX affichent aussi le minicalendrier, il faut appeler le ficher modifié rubrique-XX.html au lieu de rubrique=XX.html

Et si on veut l’afficher aussi dans les articles de cette ou ces rubriques, il faut sur le même principe

- faire aussi une copie de article.html en double

- renommer l’un des 2 en article=XX.html ou en article-XX.html

- rajouter le même code où on veut dans ce fichier

Modifie la taille d’écriture du descriptif d’une rubrique

#descriptif-rubrique {
   font-size: 12px;
}

une couleur sur tous les articles d’une rubrique

pour un article précis de la rubrique

et ça marche aussi pour tous les articles d’une rubrique X avec

et on peut mixer

Articles

couleur de fond pour les encadrements d’articles

une image de fond pour un article spécifique

exemple pour l’article 12 on souhaite avoir l’image titi.png en fond

.article12 #cadre-article {
   background-image: url("../images/titi.png");
}

ps/ pour vous y retrouver plus facilement nommé votre image de fond avec le numero de l’article ("../images/article467.png"

ne plus voir le mot [code] à gauche du cadre

.spip_cadre {
        background-image: none;
        padding-left: 20px;
}

Pour souligner les titres de paragraphe dans les articles, on peut jouer avec la couleur et le style de ligne.

modifier la couleur de fond du chapeau d’un article

Colorier le fond entre balise <quote></quote>

Html - Modeles - Boucles

Afficher les articles Mois précédent, Mois en cours, Mois suivant dans une rubrique

Méthodologie

On décide d’avoir une rubrique spécifique et un article par Mois

création du mot clé "mois" dans type_rubrique
Escal permettant de jouer avec Le groupe type_rubrique qui permet d’appeler inc-rubrique_votre_mot (à créer) à la place de inc-rubrique_normal dans la partie principale de la page rubrique

Création du fichier inc_rubrique_mois

Création des articles ayant pour titre le nom du mois
(janvier,février,etc…)

les mots clés apparaissant sous le titre article dans le back-office (privé)

(intégré a Escal]

l’équivalent des tags et autres catégories comme on les nomme aussi sur Internet.

  • Comment faire ?
    • Création du répertoire /squelettes/prive/objet/liste
    • Copier le fichier ci-dessous "articles.html" dans /liste
[(#SET{defaut_tri,#ARRAY{
        date,#ENV{date_sens,-1},
        num titre,1,
        id_article,1,
        points,-1
}})
]<B_liste_art>
#ANCRE_PAGINATION
<div class="liste-objets articles">
<table class='spip liste'>
[<caption><strong class="caption">(#ENV*{titre,#GRAND_TOTAL|singulier_ou_pluriel{info_1_article,info_nb_articles}})</strong></caption>]
        <thead>
                <tr class='first_row'>
                        <th class='statut' scope='col'>[(#TRI{statut,<span title="<:lien_trier_statut|attribut_html:>">#</span>,ajax})]</th>
                        <th class='titre principale' scope='col'>[(#TRI{num titre,<:info_titre:>,ajax})]</th>
                        <th class='auteur' scope='col'><:auteur:></th>
                        <th class='date secondaire' scope='col'>[(#TRI{date,<:date:>,ajax})]</th>
                        <th class='id' scope='col'>[(#TRI{id_article,<:info_numero_abbreviation:>,ajax})]</th>
                </tr>
        </thead>
        <tbody>
        <BOUCLE_liste_art(ARTICLES){id_article?}{id_rubrique?}{id_mot?}{id_auteur?}{where?}{statut?}{recherche?}{tri #ENV{par,date},#GET{defaut_tri}}{par titre}{pagination #ENV{nb,10}}{!lang_select}>
                [(#LANG|changer_typo)]
                <tr class="[(#COMPTEUR_BOUCLE|alterner{row_odd,row_even})]">
                        <td class='statut'>[(#STATUT|puce_statut{article,#ID_ARTICLE,#ID_RUBRIQUE})]</td>
                        <td class='titre principale'>
                                [(#LOGO_ARTICLE|image_reduire{20,26})]
                                <a href="[(#ID_ARTICLE|generer_url_entite{article})]" title="<:info_numero_abbreviation|attribut_html:> #ID_ARTICLE">
                                        [(#RANG). ]#TITRE [(#ENV{lang}|=={#LANG}|non) &#40;#LANG&#41;]
                                        <B_mots>
                                        <small><br><img src="#CHEMIN_IMAGE{mot-16.png}" class="icone icone-inline" />
                                        <BOUCLE_mots(MOTS){id_article}{par id_groupe}{', '}>#TITRE</BOUCLE_mots>
                                        </small>
                                        </B_mots>
                                </a>
                        </td>
                        <td class='auteur'><div class="inner"><BOUCLE_auteurs(AUTEURS){id_article}{', '}><a href="[(#ID_AUTEUR|generer_url_entite{auteur})]">#NOM</a></BOUCLE_auteurs></div></td>
                        <td class='date secondaire'>[(#DATE|affdate_jourcourt)]</td>
                        <td class='id'>[(#AUTORISER{modifier,article,#ID_ARTICLE}|?{
                                <a href="[(#URL_ECRIRE{article_edit,id_article=#ID_ARTICLE})]">#ID_ARTICLE</a>,
                                #ID_ARTICLE
                        })]</td>
                </tr>
        </BOUCLE_liste_art>
        [(#REM|changer_typo)]
        </tbody>
</table>
[<p class='pagination'>(#PAGINATION{#ENV{pagination,prive}})</p>]
</div>
</B_liste_art>[
<div class="liste-objets articles caption-wrap"><strong class="caption">(#ENV*{sinon,''})</strong></div>
]<//B_liste_art>

Masquer une partie de l’article si pas connecté

On va créer un modèle qui coupera l’article à l’endroit où la balise |contenu_adherent sera insérée et effacera le reste de l’article.

on l’appelle <contenu_adherent|>,

on crée un fichier contenu_adherent.html dans le répertoire /squelettes/modeles, avec le code ci-dessous.

Lorsque SPIP tombe sur la balise, il la remplace par le contenu du fichier contenu_adherent.html.

On ajoute donc dans le fichier mes_options.php, la fonction contenu_adherent() qui filtre le contenu du texte avec une expression régulière.

Le squelette Escal affiche les articles avec (inc-article.html) qui contient la balise

#TEXTE

a la ligne 154 et 172 et 192

etc ......

Copier ce fichier dans /squelettes/inclusions/inc-article.html, puis modifier la ligne 145 et 163 avec |contenu_adherent : [(#TEXTE|contenu_adherent)].

etc ......

un système simple, qui permet de restreindre la lecture de certains articles, encourageant des lecteurs à faire une demande d’adhésion.

supprimer l’affichage des auteurs dans le flux RSS

PlCopier le fichier inc-rss-item.html de spip dans le dossier /squelettes (à créer à la racine du site si pas existant)

Supprimer la ligne 9 de ce fichier :

[(#LESAUTEURS|supprimer_tags|texte_backend)]

mes_options.php

Cacher les emails des rédacteurs si on n’est pas webmestre

On autorise, via le plugin accès restreint, aux rédacteurs d’accéder à la partie privée du site.

Hors ceux-ci peuvent, via la page auteurs, récupérer les infos courriels et éventuellement les adresses postales et le numéro de téléphone si le plugin coordonnées a été activé.

Cela me sembler un grave manquement au respect de la vie privé

L’astuce suivante permet de cacher le menu principal et l’accès aux fiches membres aux rédacteurs

placer le code suivant dans mes_options.php

/****
Masquer des entrée du menu de l'expace privé a des Admins NON webmestre
https://contrib.spip.net/Autorisations-Dans-Spip#nh2
API autoriser : https://www.spip.net/fr_article5528.html
Autorisation des items de premier niveau du bandeau
https://code.spip.net/autodoc/tree/ecrire/inc/autoriser.php.html#function_autoriser_menugrandeentree_dist
*****/
function autoriser_menugrandeentree($faire, $type, $id, $qui, $opt) {
       // var_dump('faire: ' .$faire . ' - type: ' .$type.' - QUI ? '.print_r($qui,1));
       if (isset($type)) {
               if($type == 'menupublication'
                       || $type == 'menuactivite'
                       || $type == 'menuconfiguration'
                       ){
                               return $qui['statut'] == '0minirezo' AND $qui['webmestre'] == 'oui';
               }

       }
       return $qui['statut'] == '0minirezo';
}

function autoriser_auteurs_menu($faire, $type, $id, $qui, $opt) {
       return $qui['statut'] == '0minirezo' AND $qui['webmestre'] == 'oui';
}

function autoriser_compositions_menu($faire, $type, $id, $qui, $opt) {
       return $qui['statut'] == '0minirezo' AND $qui['webmestre'] == 'oui';
}

function autoriser_mediabox_menu($faire, $type, $id, $qui, $opt) {
       return $qui['statut'] == '0minirezo' AND $qui['webmestre'] == 'oui';
}

// voir une fiche auteur : être admin ou bien il s'agit de sa propre fiche
function autoriser_auteur_voir($faire, $type, $id, $qui, $opt) {      
      if (
              ($qui['statut'] == '0minirezo')
              or ($qui['id_auteur'] == $id)
      ) {
              return true;
      }
      else return false;
}

// masquer un email si on est pas autorisé
function camoufler_email($email,$id) {
      include_spip('inc/autoriser');
      // on camoufle sauf autorisation
      if (!autoriser('voir','auteur', $id)) {
              $email = spip_substr($email,0,3) . "*****";
      }
  return $email;
}

Des statistique sur les liens

le modèle :

Bloquer la publication d’un Article

il suffit d’indiquer l’article concerné dans : define(’_ART_BLOCK’, ’1:42:99999’) ;
dans notre exemple les articles 1, 42, 99999 ne peuvent pas être publiés)]

Ne pas référencer ou syndiquer deux fois le même site

qrcode:https://spipfactory.fr/personnalisation-poussee-d-escal

« Il n’y a pas de problème qu’une absence de solution ne finisse à la longue par se résoudre sur SpipFactory »

puceMentions légales puce

2017-2019 © SpipFactory.fr - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.3.20
Hébergeur : SpipFactory
Soutenir par un don