Escal + Coloration code

Groupes Escal
1

Bonjour,

Lorsque j'utilise Escal et Coloration Code ensemble, comme par
exemple ici (en bas de l'article) :

https://laurentbloch.net/MySpip3/La-conversion-a-Unix

l'affichage du code est flanqué sur la gauche d'une colonne avec
[code] écrit en gros, qui prend de la place inutilement (à mon
goût). J'ai cherché partout, sans trouver comment la faire
disparaître. Une idée ? Merci !

Bon week-end !

--
Laurent Bloch - https://www.laurentbloch.net - lb@laurentbloch.org
Si vous trouvez que l'éducation coûte cher, essayez l'ignorance !
(A. Lincoln)

2

Le Sat, 21 Oct 2017 21:13:03 +0200,
Laurent Bloch <lb@laurentbloch.org> a écrit :

Bonjour,

Lorsque j'utilise Escal et Coloration Code ensemble, comme par
exemple ici (en bas de l'article) :

La conversion à Unix - [Site WWW de Laurent Bloch]

l'affichage du code est flanqué sur la gauche d'une colonne avec
[code] écrit en gros, qui prend de la place inutilement (à mon
goût). J'ai cherché partout, sans trouver comment la faire
disparaître. Une idée ? Merci !

Il me semble que cela se passe dans config.css.html :

.spip_cadre, .coloration_code {
  background-image: url(#CHEMIN{images/code.png});
}

Je vais essayer de l'enlever, on verra bien...

Bon dimanche !

--
Laurent Bloch - https://www.laurentbloch.net - lb@laurentbloch.org
Si vous trouvez que l'éducation coûte cher, essayez l'ignorance !
(A. Lincoln)

3

salut
c'est dans squelette perso.css qu'il faut faire le changement

extrait du mien

* ========================================
de joli cadre pour le code informatique
=======================================*/
.spip_cadre{
display: inline-block;
background-position: 20px 50% ;
background-repeat: no-repeat;
background-image: url("../images/code.png");
margin: 0 2em 2em 2em;
padding: 15px 20px 15px 80px;
text-align: justify;
vertical-align: middle;
width: 420px;
box-shadow: 10px 10px 5px #333;
border: 1px solid #333;
border-radius: 10px;
height: 100%;
min-height: 40px;
}

visible sur mon site

Le 22/10/2017 à 08:47, Laurent Bloch a écrit :

Le Sat, 21 Oct 2017 21:13:03 +0200,
Laurent Bloch <lb@laurentbloch.org> a écrit :

Bonjour,

Lorsque j'utilise Escal et Coloration Code ensemble, comme par
exemple ici (en bas de l'article) :

La conversion à Unix - [Site WWW de Laurent Bloch]

l'affichage du code est flanqué sur la gauche d'une colonne avec
[code] écrit en gros, qui prend de la place inutilement (à mon
goût). J'ai cherché partout, sans trouver comment la faire
disparaître. Une idée ? Merci !

Il me semble que cela se passe dans config.css.html :

.spip_cadre, .coloration_code {
  background-image: url(#CHEMIN{images/code.png});
}

Je vais essayer de l'enlever, on verra bien...

Bon dimanche !

--

amicalement momo
------------------------------------
http://monnuage.chezlagrenouille.fr/funambule/
----------------------------------
auto-hebergement :Debian/stretch/buster
env: i3-mutt-weechat-w3m-clavier bépo

4

Bonjour, et merci de la réponse, qui m'a permis quelques essais.

C'est la marge à gauche, qui contient :

         background-image: url("../images/code.png");

que je voudrais faire disparaître. Si je supprime cette ligne
je n'ai plus l'image, mais toujours la marge.

Cordialement.

Le Sun, 22 Oct 2017 08:52:09 +0200,
momo <momo@chezlagrenouille.fr> a écrit :

salut
c'est dans squelette perso.css qu'il faut faire le changement

extrait du mien

* ========================================
de joli cadre pour le code informatique
=======================================*/
.spip_cadre{
display: inline-block;
background-position: 20px 50% ;
background-repeat: no-repeat;
background-image: url("../images/code.png");
margin: 0 2em 2em 2em;
padding: 15px 20px 15px 80px;
text-align: justify;
vertical-align: middle;
width: 420px;
box-shadow: 10px 10px 5px #333;
border: 1px solid #333;
border-radius: 10px;
height: 100%;
min-height: 40px;
}

visible sur mon site

Le 22/10/2017 à 08:47, Laurent Bloch a écrit :
> Le Sat, 21 Oct 2017 21:13:03 +0200,
> Laurent Bloch <lb@laurentbloch.org> a écrit :
>
>> Bonjour,
>>
>> Lorsque j'utilise Escal et Coloration Code ensemble, comme par
>> exemple ici (en bas de l'article) :
>>
>> La conversion à Unix - [Site WWW de Laurent Bloch]
>>
>> l'affichage du code est flanqué sur la gauche d'une colonne avec
>> [code] écrit en gros, qui prend de la place inutilement (à mon
>> goût). J'ai cherché partout, sans trouver comment la faire
>> disparaître. Une idée ? Merci !
> Il me semble que cela se passe dans config.css.html :
>
> .spip_cadre, .coloration_code {
> background-image: url(#CHEMIN{images/code.png});
> }
>
> Je vais essayer de l'enlever, on verra bien...
>
> Bon dimanche !
>

--
Laurent Bloch - https://www.laurentbloch.net - lb@laurentbloch.org
Si vous trouvez que l'éducation coûte cher, essayez l'ignorance !
(A. Lincoln)

5

Hello Laurent

Surtout ne pas modifier config.css.html car à la prochaine mise à jour tu perds tout.
Il faut juste rajouter une règle css dans /squelettes/styles/perso.css
On va donc virer l'image de background puis enlever le padding (ce n'est pas une marge) et du coup on peut même élargir le bloc
Voici donc ce que tu peux rajouter dans le perso.css

.spip_cadre, .coloration_code{
  background-image: none;
  padding-left: 0;
  width: 90%;
}

@momo : je ne vois pas trop ce que ton code change par rapport au code d'origine ?
en tout cas beaucoup de code identique donc inutile dans perso.css qui ne doit contenir que les css modifiées, ce qui est plus clair et plus facile à maintenir

Le 22/10/2017 à 10:43, Laurent Bloch a écrit :

Bonjour, et merci de la réponse, qui m'a permis quelques essais.

C'est la marge à gauche, qui contient :

          background-image: url("../images/code.png");

que je voudrais faire disparaître. Si je supprime cette ligne
je n'ai plus l'image, mais toujours la marge.

Cordialement.

Le Sun, 22 Oct 2017 08:52:09 +0200,
momo <momo@chezlagrenouille.fr> a écrit :

salut
c'est dans squelette perso.css qu'il faut faire le changement

extrait du mien

* ========================================
   de joli cadre pour le code informatique
   =======================================*/
.spip_cadre{
   display: inline-block;
   background-position: 20px 50% ;
   background-repeat: no-repeat;
   background-image: url("../images/code.png");
   margin: 0 2em 2em 2em;
   padding: 15px 20px 15px 80px;
   text-align: justify;
   vertical-align: middle;
   width: 420px;
   box-shadow: 10px 10px 5px #333;
   border: 1px solid #333;
   border-radius: 10px;
   height: 100%;
   min-height: 40px;
}

visible sur mon site

Le 22/10/2017 à 08:47, Laurent Bloch a écrit :

Le Sat, 21 Oct 2017 21:13:03 +0200,
Laurent Bloch <lb@laurentbloch.org> a écrit :
  

Bonjour,

Lorsque j'utilise Escal et Coloration Code ensemble, comme par
exemple ici (en bas de l'article) :

La conversion à Unix - [Site WWW de Laurent Bloch]

l'affichage du code est flanqué sur la gauche d'une colonne avec
[code] écrit en gros, qui prend de la place inutilement (à mon
goût). J'ai cherché partout, sans trouver comment la faire
disparaître. Une idée ? Merci !

Il me semble que cela se passe dans config.css.html :

.spip_cadre, .coloration_code {
  background-image: url(#CHEMIN{images/code.png});
}

Je vais essayer de l'enlever, on verra bien...

Bon dimanche !
  

6

Bonjour,

Merci, c'est déjà beaucoup mieux. Il reste encore un bandeau blanc sur
la gauche, je ne sais pas comment il s'appelle et j'aimerais bien le
supprimer également :

Bon appétit (si ce n'est déjà fait...) !

Le Sun, 22 Oct 2017 12:05:20 +0200,
Jean Christophe Villeneuve <jean-chris.villeneuve@ac-lyon.fr> a écrit :

Hello Laurent

Surtout ne pas modifier config.css.html car à la prochaine mise à
jour tu perds tout.
Il faut juste rajouter une règle css dans /squelettes/styles/perso.css
On va donc virer l'image de background puis enlever le padding (ce
n'est pas une marge) et du coup on peut même élargir le bloc
Voici donc ce que tu peux rajouter dans le perso.css

.spip_cadre, .coloration_code{
  background-image: none;
  padding-left: 0;
  width: 90%;
}

--
Laurent Bloch - https://www.laurentbloch.net - lb@laurentbloch.org
Si vous trouvez que l'éducation coûte cher, essayez l'ignorance !
(A. Lincoln)

7

Rajoute ceci dans ton perso.css et hop !

.coloration_code ol {
margin-left:0;
}

Sinon, à mon avis, une partie de ton code css est inutile dans perso.css car identique aux css d'origine

Pas sur que le width à 120% soit une bonne idée ("ça rentre pas dans les cases" disait Zézette ;-)).

Et sais-tu que tu peux avoir une largeur max pour ton site tout en gardant un affichage responsive ? L'intérêt est d'éviter d'avoir un site sur toute la largeur de l'écran, ce qui est intéressant sur les écrans très larges.

Le 22/10/2017 à 12:59, Laurent Bloch a écrit :

Bonjour,

Merci, c'est déjà beaucoup mieux. Il reste encore un bandeau blanc sur
la gauche, je ne sais pas comment il s'appelle et j'aimerais bien le
supprimer également :

La conversion à Unix - [Site WWW de Laurent Bloch]

Bon appétit (si ce n'est déjà fait...) !

Le Sun, 22 Oct 2017 12:05:20 +0200,
Jean Christophe Villeneuve <jean-chris.villeneuve@ac-lyon.fr> a écrit :

Hello Laurent

Surtout ne pas modifier config.css.html car à la prochaine mise à
jour tu perds tout.
Il faut juste rajouter une règle css dans /squelettes/styles/perso.css
On va donc virer l'image de background puis enlever le padding (ce
n'est pas une marge) et du coup on peut même élargir le bloc
Voici donc ce que tu peux rajouter dans le perso.css

.spip_cadre, .coloration_code{
  background-image: none;
  padding-left: 0;
  width: 90%;
}

8

Le Sun, 22 Oct 2017 13:14:30 +0200,
Jean Christophe Villeneuve <jean-chris.villeneuve@ac-lyon.fr> a écrit :

Rajoute ceci dans ton perso.css et hop !

.coloration_code ol {
margin-left:0;
}

Impeccable, merci !

Sinon, à mon avis, une partie de ton code css est inutile dans
perso.css car identique aux css d'origine

Oui, c'est le résultat d'approches par essai-erreur, je devrais mettre
de l'ordre là-dedans.

Pas sur que le width à 120% soit une bonne idée ("ça rentre pas dans
les cases" disait Zézette ;-)).

Et sais-tu que tu peux avoir une largeur max pour ton site tout en
gardant un affichage responsive ? L'intérêt est d'éviter d'avoir un
site sur toute la largeur de l'écran, ce qui est intéressant sur les
écrans très larges.

Alors je pense en priorité aux élèves à qui je soumets du code, en
principe ce n'est pas sur leur téléphone qu'ils programment, et je
préfère qu'ils voient le code correctement indenté, ce qui demande
de la largeur (surtout pour le code qui illustre cet article).

Mais bon, je vais faire des essais.

Bonne fin de week-end !

Le 22/10/2017 à 12:59, Laurent Bloch a écrit :
> Bonjour,
>
> Merci, c'est déjà beaucoup mieux. Il reste encore un bandeau blanc
> sur la gauche, je ne sais pas comment il s'appelle et j'aimerais
> bien le supprimer également :
>
> La conversion à Unix - [Site WWW de Laurent Bloch]
>
> Bon appétit (si ce n'est déjà fait...) !
>
> Le Sun, 22 Oct 2017 12:05:20 +0200,
> Jean Christophe Villeneuve <jean-chris.villeneuve@ac-lyon.fr> a
> écrit :
>> Hello Laurent
>>
>> Surtout ne pas modifier config.css.html car à la prochaine mise à
>> jour tu perds tout.
>> Il faut juste rajouter une règle css
>> dans /squelettes/styles/perso.css On va donc virer l'image de
>> background puis enlever le padding (ce n'est pas une marge) et du
>> coup on peut même élargir le bloc Voici donc ce que tu peux
>> rajouter dans le perso.css
>>
>> .spip_cadre, .coloration_code{
>> background-image: none;
>> padding-left: 0;
>> width: 90%;
>> }
>
>
>

--
Laurent Bloch - https://www.laurentbloch.net - lb@laurentbloch.org
Si vous trouvez que l'éducation coûte cher, essayez l'ignorance !
(A. Lincoln)