Modifier le style des éléments de l'éditeur de message (sceditor)
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Modifier le style des éléments de l'éditeur de message (sceditor)
Détails techniques
Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Internet Explorer, Opera, Safari, Autre
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : http://dev-guildemono.forumactif.com/
Description du problème
Bonjour,Je souhaitais modifier la taille des émoticônes affichés par l'iframe sceditor, afin de pouvoir rendre ces émoticônes adaptées en 4K/Retina (sans transformation flou). Ils sont d'origine en 64x64 et je voulais les passer en 16x16 sur l'interface.
J'ai essayé toute une ribambelle de sélecteur dans mon CSS, vidé mon cache des tonnes de fois, mais rien y fait. J'ai donc décidé de suivre ce tutoriel qui proposait des classes différentes (qui n'apparaissent pas dans l'inspecteur sur le navigateur étrangement) : https://forum.forumactif.com/t352754-modifier-l-apparence-de-l-editeur
Il semblerait impossible d'appliquer une règle à l'intérieur de l'iframe de sceditor en passant par le CSS. Voici une liste des tentatives :
- Code:
.sceditor-emoticons {
width: 16px !important;
height: 16px !important;
overflow: auto !important;
}
img.smiley {
width: 16px !important;
height: 16px !important;
}
Une manière plus brutale :
- Code:
.sceditor-container img[data-sceditor-emoticon] {
width: 16px !important;
height: 16px !important;
}
- Code:
.sceditor-container iframe img { /* Même ça ne modifie rien */
width: 16px !important;
height: 16px !important;
}
Je précise que ma feuille de CSS fonctionne, car j'ai modifié la toolbar sans soucis grâce à lui (::before de font-awesome pour les icones) ainsi que d'autres éléments.
Y aurait-il eu des changement depuis 2013 sur ce module ?
Y a-t-il aujourd'hui une autre manière de procéder ?
D'autant plus, cela est problématique du fait que je ne puisse pas non plus modifier la police de l'éditeur, sa couleur, ou tout autres éléments saisis...
D'après le site officiel : https://www.sceditor.com/documentation/options/#style il existe des options permettant de modifier le format du contenu saisi, mais nous n'avons malheureusement accès à aucun fichier de ce module sur Forumactif...
Merci pour votre aide.
Dernière édition par NoXoN le Mar 3 Oct 2017 - 21:18, édité 1 fois
Re: Modifier le style des éléments de l'éditeur de message (sceditor)
Bonjour,
ce code me parait fonctionner :
ce code me parait fonctionner :
- Code:
#sce_smilies_body img, #sceditor_smilies body img {
min-width: 16px;
min-height: 16px;
}
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Modifier le style des éléments de l'éditeur de message (sceditor)
Salut,
Merci pour l'aide que tu essayes de m'apporter. Néanmoins ce que j'essayais de faire, c'est justement de fixer le smilie à 16px dans le champ de saisie. Donc disons que je place mon code ainsi :
Rien ne change malheureusement. Il reste en 64x64 dans l'éditeur en question.
Je ne sais pas si cela vient du fait que je sois sur ModernBB, ou de interprétation du CSS avant la génération de l'éditeur (surtout via iframe, pratique désuète en 2017), en tout cas aucun changement ne semble opérer. Je remet fortement l'utilisation de scediror en question. Je peux choisir le plus bas sélecteur avec un règle la plus basique qu'il soit, quand il s'agit d'appliquer une règle dans le champ de saisie, rien ne marche...
Merci pour l'aide que tu essayes de m'apporter. Néanmoins ce que j'essayais de faire, c'est justement de fixer le smilie à 16px dans le champ de saisie. Donc disons que je place mon code ainsi :
- Code:
#sce_smilies_body img, #sceditor_smilies body img {
width: 16px !important;
height: 16px !important;
}
Rien ne change malheureusement. Il reste en 64x64 dans l'éditeur en question.
Je ne sais pas si cela vient du fait que je sois sur ModernBB, ou de interprétation du CSS avant la génération de l'éditeur (surtout via iframe, pratique désuète en 2017), en tout cas aucun changement ne semble opérer. Je remet fortement l'utilisation de scediror en question. Je peux choisir le plus bas sélecteur avec un règle la plus basique qu'il soit, quand il s'agit d'appliquer une règle dans le champ de saisie, rien ne marche...
Re: Modifier le style des éléments de l'éditeur de message (sceditor)
oh pardon j'avais mal compris. Le code donné fonctionne pour l'affichage des smileys à côté de l'éditeur ou dans la pop up qui s'ouvre pour l'éditeur rapide, mais pas dans la zone de saisie de l'éditeur.
Je passe la main.
Je passe la main.
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Modifier le style des éléments de l'éditeur de message (sceditor)
Hello NoXoN,
ceci peut être pour l'affichage sur les messages:
Ensuite si c'est proprement dit dans l'éditeur (mais ce sera qu'en visuel) , ce script devrait fonctionner.
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposes ceci:
Penses à cliquer sur le bouton VALIDER
a++
ceci peut être pour l'affichage sur les messages:
- Code:
img[longdesc]{width:16px!important;height:16px!important;}
Ensuite si c'est proprement dit dans l'éditeur (mais ce sera qu'en visuel) , ce script devrait fonctionner.
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposes ceci:
- Code:
$(function(){
$(function() {
$("#text_editor_textarea ").sceditor('instance')
.css
(' img[data-sceditor-emoticon]
{
width:16px;height:16px;
}')
})});
Penses à cliquer sur le bouton VALIDER
a++
Invité- Invité
Re: Modifier le style des éléments de l'éditeur de message (sceditor)
Salut,
EDIT : Apparemment la librairie en question n'opère que sur les pages où le champ de saisie est appelé. Il faut donc appliquer une condition au script (un test sur un sélecteur du sceditor par exemple) avant de lancer la procédure. Je vais essayer ça et j'éditerai par la suite mon message.
EDIT2 : voilà un exemple de code fonctionnel qui ne risque pas d'altérer les autres scripts comme ce fut mon cas :
Merci bien pour cette méthode !
OLD :
Merci pour ta réponse. Malheureusement et sans trop de surprise, la console m'accorde que "sceditor" n'est pas une fonction, et ce même quand on englobe le tout dans un document ready :
Je ne sais pas si ou quand la librairie de sceditor est appelée, en tout cas je ne peux visiblement pas récupérer cette méthode.
EDIT : Apparemment la librairie en question n'opère que sur les pages où le champ de saisie est appelé. Il faut donc appliquer une condition au script (un test sur un sélecteur du sceditor par exemple) avant de lancer la procédure. Je vais essayer ça et j'éditerai par la suite mon message.
EDIT2 : voilà un exemple de code fonctionnel qui ne risque pas d'altérer les autres scripts comme ce fut mon cas :
- Code:
$(function(){
$(function() {
$(document).ready( function(){
if ($('.sceditor-container').length > 0)
$("#text_editor_textarea ").sceditor('instance').css(' img[data-sceditor-emoticon]{width:16px;height:16px;} ');
});
});
});
Merci bien pour cette méthode !
OLD :
Merci pour ta réponse. Malheureusement et sans trop de surprise, la console m'accorde que "sceditor" n'est pas une fonction, et ce même quand on englobe le tout dans un document ready :
- Code:
TypeError: $(...).sceditor is not a function
Je ne sais pas si ou quand la librairie de sceditor est appelée, en tout cas je ne peux visiblement pas récupérer cette méthode.
Sujets similaires
» Comment modifier le style des bbcode ?
» Modifier Taille, Style d'Ecriture et Couleur titre de "Message"
» Des éléments de style d'une "fiche" en HTML non pris en compte
» Modifier plusieurs éléments d'un {} du QEEL
» Modifier le style du "Dernière édition par..."
» Modifier Taille, Style d'Ecriture et Couleur titre de "Message"
» Des éléments de style d'une "fiche" en HTML non pris en compte
» Modifier plusieurs éléments d'un {} du QEEL
» Modifier le style du "Dernière édition par..."
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum