Modifier skin sunrise pour opale

bonjour,
Je souhaite modifier quelques détails sur le skin sunrise.
J’ai importé l’atelier OpaleSunriseStyler_4.0.3_sources.scwsp dans scenariChain-desktop, mais je ne vois pas comment effectuer des modifications :

Je n’ai que des ressources binaires.
Que dois-je faire ?

Bonjour,

Vous avez récupérer là les sources de l’extension de stylage, c’est pour SCENARIbuilder.

Il faut installer cette extension sur votre entrepot
Ensuite, vous pouvez créer un atelier Styler en sélectionnant dans les options « Styler Opale Sunrise 4 » (cette option n’est visible que si vous avez installé l’extension)
Dans cet atelier vous allez pouvoir créer un habillage par formulaire ou guidée pour Sunrise.

(edit) Je vois que l’extension est déjà installé, vous n’avez donc rien d’autre à importer/installer.

Mickaël

Comme sur mon screen précédent, je l’ai cette extension :

Juste comme ça ?

image

Oui voilà, suivant ce que vous voulez faire, choisissez l’approche par formulaire ou guidé.
En mode formulaire, vous pouvez jouer avec toutes les options.
En mode guidée, vous pouvez éditer l’encart « Styles CSS »

Merci, je commence à comprendre le fonctionnement.
Y-a-t-il possibilité (je ne vois pas où) de modifier la taille des icônes :

image

J’ai regardé dans le fichier OpaleSunriseStyler_4.0.3_sources.scwsp, mais je ne trouve pas les icônes

image et image

Modifier la taille ou supprimer une icône

Pour modifier la taille ou supprimé une icône, il faut tout d’abord être dans un mode d’habillage graphique guidé.
Ensuite dans l’encart « Styles CSS » vous pouvez rajouter des règles pour faire ce que vous voulez. Cela nécessite des connaissances en CSS.

Pour vous aider, je vous invite à ouvrir une publication sur votre navigateur internet et utiliser l’inspecteur d’élément afin de savoir quelle propriété CSS modifier.

Par exemple :

  • Pour la taille, il faut jouer avec la propriété font-size (car ces icones proviennent d’une police d’icone) sur le sélecteur .default #tools .item
  • Pour la supprimer, vous pouvez-ajouter la règle display:none

Mickaël

Merci de votre réponse.
Comment procéder pour indiquer qu’on parle de la police d’icône et non de la taille de la police de caractère qui est déjà précisée. J’ai testé un truc comme ça, mais ça ne marche pas :

Je suis peut-être complètement à côté de la plaque…

Avec mon inspecteur d’élément, j’ai trouvé ça, mais je ne sais pas quoi en faire :

image

--fontStyle est une variable, elle est déclaré dans :root, plus la peine d’y retoucher.

Ajouter la règle font-size par défaut, les icones sont déjà à 2em, baissez donc cette valeur si vous voulez plus petit.

L’inspecteur vous montre la structure HTML de la publication, vous pouvez maintenant posez vos règles CSS en fonction. Pour masquer l’icone de module, vous pouvez ajouter :

.default #tools li.home .item {
display: none;
}
1 « J'aime »

Pour fontsize, c’était une mauvaise copie d’écran.
Je progresse, j’ai bien diminué les icônes, mais en fait, c’est le cadre qu’il faut aussi réduire :

Je vous invite à utiliser l’inspecteur d’élément, d’un côté vous avez la structure HTML et de l’autre, les règles CSS associés, vous pouvez modifier ces règles directement dans le navigateur, quand vous avez trouvé votre bonheur, recopier dans votre atelier styler.

Je vous invite également à consulter des aides sur le web sur le CSS, ça ne manque pas.

Mickaël

bonjour,
Je reviens un an après suite au passage en opale 5.
Je souhaite modifier le skin sunrise 5 et dans scenariChain.
J’ai donc importé styler opale 5.
Je crée un item habillage guidé :

Mais je ne sais plus comment exporter cela en skinpack. Il me semblait qu’il fallait glisser le sunrise-web.skin en bas, mais il ne se passe rien :

Que dois-je faire ?

Bonjour,

Il faut créer un item « Jeu d’habillages graphiques » (.skinset), c’est sur cet item que vous pourrez lier les items .skin et compiler le skinpack.

Mickaël

ça marche, merci !

Y-a-t-il un moyen d’ajouter sur le skin surise une icône permettant comme dans les versions dys d’augmenter la taille des caractères affichés comme ceci :

image

Si par « y a-t-il moyen » tu veux dire « est-il possible que je », oui, tout à fait, il faut :

  • créer un nouveau skin à partir des sources du skin sunrise
  • prendre les sources du skin dys, et y voir le code qui ajoute ces boutons
  • mettre ce code dans le nouveau skin que tu crées
    Pas super trivial, mais possible.

Si par « y a-t-il moyen » tu veux dire « est-il possible que vous », c’est peut-être possible aussi, il faudrait le proposer comme demande d’évolution : Place des évolutions Opale - Forums Communauté Scenari

Après, si tu souhaites avoir ces boutons pour générer ton contenu avec un police plus grosse, le plus simple est de modifier le skin en mode formulaire et de mettre une police plus grosse. :slight_smile:

Merci Loïc de ta réponse.
Je sais déjà modifier le skin pour augmenter la taille la police, mais ponctuellement, ça peut être pratique de l’augmenter avec le zoom qu’on trouve dans le skin dys, pour un élève ayant des problèmes de vue.
J’ai déjà regardé dans dys et dans sunrise en mode habillage graphique guidé, mais je ne vois rien permettant l’ajout de cet icône de zoom. L’an dernier, Sam m’avait transmis une version pour opale 4 Empêcher le zoom du cadre - #19 par sam, je me demandais donc si cette version pouvait être modifée (par moi, donc simplement) pour opale 5.

Bonjour,
Dans Styler, j’importe le skin Dys, sachant que j’ai créé un parcours test (très simple) pour faire une prévisualisation.
Au lieu de faire le test directement dans Styler, je clique sur l’icône terre, ce qui ouvre la prévisualisation dans mon navigateur préféré.
Là, je fais un clic droit => Inspecter l’élément et dans 90% des cas je trouve mon bonheur.
Pour les 10% restant, et bien l’inspecteur m’a mis sur la voie et en fouillant dans les css, je trouve mon bonheur :slight_smile:

Ok je vois @emmanuel_farcy.
Du coup, si c’est pour rendre tout un peu plus gros, la méthode native du navigateur pour zoomer une page (ctrl+roulette en général) n’est pas satisfaisante ?

Si, bien sûr, mais cela zoom également l’encadrement avec les icônes, le bandeau de gauche avec le plan du cours…