Modifier les images devant les blocks

Modèles documentaires Dokiel
1

Bonjour,

Je cherche à savoir s’il est possible de modifier les icônes qui sont affichés juste devant les blocks (attention, remarque, réglementaire, etc.).

J’ai bien vu comment les changer de couleur, mais je ne vois pas comment les modifier (peut-être que ce n’est pas possible).
En regardant avec l’inspecteur de données, l’icône en question, je vois un « :before » mais je ne sais pas comment intéragir avec. J’ai juste réussi à le masquer avec un :
.legal.block:before{
display:none
}

J’ai suivi le min-webinaire sur la création de skin sous Styler6 (j’ai appris pas mal de choses intéressantes, même si je suis plutôt un débutant sur tout ce qui concerne les css :slight_smile: ). Mais là, même en skin avancé, je ne vois pas :no_mouth:

Merci d’avance !

Corentin

2

Salut,

en effet cette modif n’est pas faisable en mode formulaire.
Il faudra que tu le fasses en mode guidé.

Tu y étais presque. Ces icones sont définis par la règle css suivante :

.cBk_ti i.type, .pBk_ti i.type {
	background: url("../img/content/blocks.svg") no-repeat scroll transparent;
	color: var(--pb-color);
	flex: 0 0 auto;
	height: 40px;
	margin-right: 20px;
	order: 2;
	padding-left: 40px;
	line-height: 40px;
}

Tous les icones sont dans un seul svg. Donc le plus simple c’est juste de modifier ce svg dans ton skin.

Voilà ce que je te conseille de faire :

  1. génère un contenu Opale quelconque
  2. télécharge-le sur ton disque dur
  3. décompresse le zip
  4. ouvre le fichier svg blocks.svg qui est dans skin > img > content
  5. modifie-le avec Inkscape ou Ilustrator ou tout autre éditeur svg graphique.
  6. fais-toi un skin guidé dans styler
  7. clique sur « styles CSS » pour que les variables CSS soient bien créées
  8. en bas, dans la partie « Ajouter ici : » tu mets « /img/content/blocks.svg » à la place de « [racine] », et juste en-dessous tu glisses ton svg modifié. Ceci aura pour effet de remplacer le fichier pointé dans le chemin par le fichier que tu as glissé.
  9. et voilà !

image
image778×237 7.83 KB

3

Salut @lalejand !

Merci pour ta réponse !
Mais je n’ai pas tout à fait ce que tu m’indiques. Peut-être parce que je suis sur Dokiel et non Opale (désolé, je ne l’avais pas reprécisé dans ma demande).

Du coup, quand je génère un contenu Dokiel, je n’ai pas l’arborescence avec le svg.
Dans skin > img, voici ce que j’ai :

svg img
svg img963×421 4.34 KB

pas de trace de block.svg dans aucun des sous-dossiers ici :frowning:

Sinon, oui je suis déjà dans un skin guidé, j’y ai fait quelques petits ajustements pour mon besoin :slight_smile:

Aussi, dans le main.css, je viens de voir ça :

main css
main css474×631 20.5 KB

Est-ce que ça ne serait pas ça les images ? Mais je ne vois pas où se trouve ces éléments, l’arborescence ne me parle pas :thinking:

4

Bon j’ai avancé !
Finalement, je suis passé en skin avancé, ça laisse plus de marge de manoeuvre quand on commence à faire un peu tout et n’importe quoi (surtout dans mon cas :sweat_smile: ) !

Du coup, dans mon skin avancé, j’ai fait un « ajouter ici » de mon image (créée dans mon styler). Elle s’ajoute bien dans mon dossier de contenus une fois publié.

J’ai donc rajouté dans mon skin.css :
.legal.block::before {
content: url(‹ img/icones/ampoule.png ›);
}

Bon, il ne me reste plus qu’une chose à gérer : le redimensionnement de l’image, parce que là elle prend tout l’écran :sweat_smile:

EDIT : bon, finalement, comme il n’y a pas 50 icones, j’ai redimensionné mes images (c’est plus rapide :smiley: ).

5

Bonjour,

Vous cherchez à modifier des icônes présentes dans une police d’icône, ce tuto devrait vous aider :

https://doc.scenari.software/SCENARIstyler@6/tips/modifierIconeFontello/fr/

Mais votre solution d’importer une image fonctionne aussi, et vous pouvez tout de même rester en mode guidé.

Mickaël

6

Ok, content que tu aies pu t’en sortir. C’est moi qui suis parti sur la mauvaise piste tout seul en fait. On est dans la catégorie Dokiel et pas Opale :wink:

En mode guidé on peut faire tout ce qu’on veut, il faut juste procéder par surcharge des CSS originales. Là comme tu as travaillé en mode avancé, si le skin par défaut Dokiel change pour corriger des choses ou bien parce que Dokiel évolue, tu ne bénéficieras pas des modifications.

7

Ou alors il faudra tout recommencer, d’où l’importance de commenter les modifications :slight_smile:

8

Bonjour !

Finalement, en voyant les derniers messages d’hier, j’ai réimporté le contenu de mes skin.css (web et pdf) dans un modèle guidé !
Et j’ai tout commenté !

Parce que finalement, je n’ai fait que de la surcharge de CSS, donc pas besoin de passer par le mode avancé (je me suis un peu emballé sur ce coup :sweat_smile: ).

C’est bien plus propre maintenant, et je suis content de voir que ce n’est pas si compliqué de changer les icônes, modifier la position et les tailles, la couleur de fond (même en pdf), etc.

Si ça peut servir si qqn a la même question un jour, j’ai géré la taille de mes icônes avec la propriété « transform » finalement. La propriété « zoom » n’était pas gérée sous firefox alors que « transform » l’est sur tous les navigateurs apparemment.

Ce qui donne :
transform: scale(0.2) translate(-50%, -100%);
(pour diminuer à 20% de la taille d’origine et décaler de 50% vers la gauche, et 100% vers le haut).

Merci encore pour vos réponses rapides, et à la prochaine (désolé, je suis en plein apprentissage, je risque de revenir prochainement :sweat_smile: ).

Bonne journée.

Corentin

1 « J'aime »