Si vous souhaitez que l'éditeur ONLYOFFICE Docs s'intègre parfaitement à votre produit, la solution la plus simple consiste en une personnalisation à deux niveaux : configurez editorConfig.customization.logod'abord l'intégration de l'API Docs pour le logo d'en-tête, puis ajoutez un fichier JSON de thème personnalisé sur le serveur de documents pour les couleurs de l'éditeur. Ces deux mécanismes sont distincts et leurs règles de disponibilité diffèrent.
D'après la documentation ONLYOFFICE du 7 octobre 2026, le logoparamètre `editor-header` est uniquement disponible pour ONLYOFFICE Docs Developer. L'API officielle spécifie des images de 300 × 20 pixels pour les éléments `<input>` image, `<title> imageDark` et imageLight`<title>`, avec une hauteur de logo recommandée de 20 pixels. Les thèmes d'interface personnalisés sont pris en charge depuis ONLYOFFICE Docs v7.0 et sont installés sous forme de fichiers de thème JSON sur le serveur de documents. La documentation officielle actuelle est celle relative à l'identité visuelle standard d'ONLYOFFICE Docs , et le processus de création de fichiers de thème est décrit dans la section « Changer de thème d'interface dans ONLYOFFICE Docs » .
Cette approche convient aux équipes qui intègrent ONLYOFFICE Docs à leur application web et gèrent le serveur de documents. Elle est différente de la modification du thème d'un portail DocSpace ou Workspace. Si votre objectif est de modifier le portail plutôt que l'éditeur lui-même, utilisez les paramètres de personnalisation de ce produit.
Avant de modifier les fichiers, définissez l'interface de votre marque en fonction de trois critères : avez-vous uniquement besoin d'un logo dans l'en-tête de l'éditeur ? Souhaitez-vous également que les couleurs de votre marque soient présentes dans les barres d'outils, les boutons, le texte, les bordures et les panneaux ? Ou avez-vous besoin d'une personnalisation plus poussée, avec des modifications supplémentaires de l'interface ?
editorConfig.customization.logo. ONLYOFFICE indique que ce paramètre est réservé aux développeurs.Cette distinction est importante car la modification d'un fichier de thème ne remplacera pas automatiquement le logo d'en-tête, et la définition de l'objet logo ne recolorera pas le reste de l'éditeur.
Préparez un logo large et simple qui reste lisible avec une hauteur d'en-tête de 20 pixels. La documentation de l'API spécifie une taille d'image de 300 × 20 pixels pour les variantes d'image d'en-tête standard. Utilisez des visuels différents pour les fonds clairs et foncés afin d'éviter une perte de contraste de votre logo. Par exemple, un logo bleu marine foncé peut convenir à un en-tête clair, mais être invisible sur un thème sombre ; une version blanche ou claire résout ce problème.
Hébergez les images sur des URL HTTPS stables que l'éditeur peut charger. Évitez les URL signées éphémères si le logo doit être accessible en permanence. Testez également les ressources via le même chemin réseau et la même politique de sécurité du navigateur que ceux utilisés par les utilisateurs.
const config = {
editorConfig: {
customization: {
logo: {
image: "https://app.example.com/branding/logo.png",
imageDark: "https://app.example.com/branding/logo-dark.png",
imageLight: "https://app.example.com/branding/logo-light.png",
url: "https://www.example.com",
visible: true
}
}
}
};
const docEditor = new DocsAPI.DocEditor("placeholder", config);imageest le logo du mode de travail standard. imageDarkest destiné à un en-tête sombre ou coloré, et imageLightà un en-tête clair comme le thème Gris. urldétermine l'action qui est déclenchée par un clic sur le logo ; définissez-le sur une chaîne vide ou nullsi le logo ne doit pas être cliquable. visibledétermine si le logo est affiché.
Ouvrez un document réel via votre intégration et vérifiez l'en-tête avec un zoom normal. Un résultat satisfaisant ne se limite pas au simple chargement du fichier. Le logo doit être net, centré verticalement, lisible malgré la hauteur réduite de l'en-tête et exempt de zones d'arrière-plan indésirables. Vérifiez également que le clic fonctionne comme prévu.
Passez ensuite en mode sombre et répétez la vérification. Si le logo présente un faible contraste, utilisez une imageDarkressource dédiée plutôt que d'essayer de forcer un seul élément graphique à s'afficher correctement partout.
Pour les couleurs de l'interface, créez un fichier de thème idcommençant par theme-`.sh`. Ce fichier JSON est compatible uniquement avec les documents Office lightet darkprend en charge les couleurs en notation hexadécimale ou RGBA. Attention : il ne s'agit pas d'un schéma de couleurs de document. Ce fichier JSON modifie l'apparence de l'éditeur, et non les couleurs du thème stockées dans un fichier DOCX, XLSX ou PPTX.
{
"name": "Northstar Light",
"id": "theme-northstar-light",
"type": "light",
"colors": {
"toolbar-header-document": "#1E3A8A",
"toolbar-header-spreadsheet": "#166534",
"toolbar-header-presentation": "#B45309",
"background-normal": "#FFFFFF",
"background-accent-button": "#1E3A8A",
"text-normal": "#1F2937",
"icon-normal": "#374151"
}
}Les valeurs ci-dessus constituent une palette d'exemple et non un thème ONLYOFFICE prédéfini. Les noms des paramètres correspondent à des variables de thème documentées. En production, commencez par un petit ensemble de valeurs à fort impact, prévisualisez le résultat, puis étendez-les uniquement si nécessaire. Cela permet de repérer plus facilement les contrastes insuffisants ou les incohérences.
ONLYOFFICE documente ces emplacements pour les fichiers de thème personnalisés :
/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes%ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themessudo docker cp northstar-theme.json onlyoffice:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes/Remplacez onlyofficepar le nom ou l'ID réel de votre conteneur. Si votre déploiement est fréquemment reconstruit, ne vous fiez pas à une copie unique comme unique source de référence. Intégrez le thème à votre processus de déploiement, à la personnalisation de vos images ou à un autre mécanisme persistant adapté à votre environnement afin que les mises à jour et les remplacements de conteneurs ne le suppriment pas silencieusement.
Le guide officiel indique que le cache serveur pour la requête de thème a une durée de vie de cinq minutes. Après avoir placé le fichier, veuillez patienter pendant ce délai et actualiser l'éditeur. Dans certains cas, ONLYOFFICE recommande également de redémarrer les services et de vider le cache si le thème ne s'affiche pas.
Une fois chargé, le thème devrait apparaître dans la liste des thèmes d'interface des paramètres avancés. Sélectionnez-le et examinez-le en détail. Vérifiez les menus, les boîtes de dialogue, les onglets sélectionnés, les états au survol, les commandes désactivées, les icônes, les badges de notification et le contraste du texte.
Une marque personnalisée de qualité doit résister à une utilisation normale dans un éditeur de texte. Ouvrez un document, une feuille de calcul, une présentation et un PDF si ces éditeurs font partie du périmètre de l'étude. Testez les boîtes de dialogue et les outils de collaboration courants. Vérifiez le comportement en mode clair et en mode sombre si vous proposez les deux. Testez la gestion du focus clavier, les états désactivés, le contraste au survol de la souris et les noms de fichiers longs. Une couleur attrayante dans l'en-tête peut rendre difficile la lecture d'un onglet sélectionné ou d'un texte secondaire.
Vous pouvez considérer l'implémentation comme réussie lorsque le logo configuré apparaît de manière cohérente, que la variante de logo correcte reste lisible dans l'en-tête actif, que le thème personnalisé apparaît dans le sélecteur de thèmes, que les couleurs de la marque s'affichent sans rompre le contraste du texte ou des icônes, et que l'expérience reste utilisable sur tous les types d'éditeurs que vos utilisateurs ouvrent réellement.
Si le logo ne change jamais malgré la transmission correcte de l'objet de configuration, vérifiez d'abord l'édition et la licence, car la documentation de l'API indique que le paramètre « logo » est réservé aux développeurs. Si le thème de couleurs ne s'affiche jamais, vérifiez l'identifiant et la syntaxe JSON, l'emplacement du fichier, la persistance dans le conteneur, le délai de mise en cache et l'état du service. Si un thème se charge mais s'affiche incorrectement, limitez la personnalisation à un ensemble plus restreint de variables documentées et ajoutez les couleurs progressivement.
ONLYOFFICE propose différentes interfaces de personnalisation. Ce guide concerne spécifiquement la personnalisation de l'éditeur ONLYOFFICE Docs. Les éléments de personnalisation du portail, les noms de locataires, les icônes du portail et la navigation environnante relèvent des paramètres de DocSpace ou de Workspace, et non de l'objet logo de l'en-tête de l'API Docs.
Les schémas de couleurs des documents affectent leur contenu, comme le texte, les tableaux, les graphiques et les formes. Un thème d'interface personnalisé contrôle les éléments de l'interface utilisateur de l'éditeur, tels que les barres d'outils, les panneaux, les boutons, les icônes, les bordures et les étiquettes. Choisissez le mécanisme qui correspond à l'aspect que vous souhaitez modifier.
ONLYOFFICE distingue la marque standard des paramètres de marque blanche étendus. Si vous souhaitez un contrôle plus précis d'éléments tels que les polices d'interface, la visibilité de la mise en page ou les éléments liés à la section « À propos », veuillez consulter les conditions de licence en vigueur dans la documentation officielle de marque blanche avant de planifier la mise en œuvre.
editorConfig.customization.logodans la couche d'intégration.theme-.En dissociant clairement le logo, le thème de l'interface et les options de personnalisation avancées, ONLYOFFICE Docs devient beaucoup plus facile à personnaliser de manière prévisible. Commencez par la plus petite modification permettant d'obtenir l'identité visuelle souhaitée, testez-la en conditions réelles d'utilisation, puis étendez le thème seulement ensuite.
Connectez les éditeurs de bureau ONLYOFFICE à votre serveur ownCloud, connectez-vous, ouvrez des fichiers cloud, gérez la connexion et résolvez les problèmes de configuration courants.
Résolvez les problèmes d'utilisation élevée du processeur de Collabora Online en identifiant les processus du kit occupés, en vérifiant les indicateurs et les journaux, en ajustant la concurrence et le nettoyage, et en vérifiant les correctifs en toute sécurité.
Découvrez comment personnaliser ONLYOFFICE Docs avec un logo d'en-tête et des couleurs d'interface, y compris les limites de licence, la configuration JSON du thème, les chemins Docker et les tests.
Corrigez les textes difficiles à lire dans LibreOffice Calc en vérifiant le thème de l'application, la police et les couleurs de remplissage des cellules, les styles et la mise en forme conditionnelle, puis vérifiez le résultat d'impression.
Débloquez en toute sécurité l'avertissement de verrouillage par utilisateur inconnu de LibreOffice. Vérifiez les sessions actives, protégez une copie, supprimez uniquement un verrouillage obsolète vérifié et testez le document.
Corrigez les problèmes de mise en page du texte arabe ou hébreu avec l'anglais dans LibreOffice Writer. Activez la mise en page complexe, définissez le sens des paragraphes et vérifiez le résultat.
Learn VLOOKUP and XLOOKUP in LibreOffice Calc, including exact matches, left lookups, not-found results, reverse search, INDEX/MATCH alternatives, and common errors.
Résolvez les problèmes de validation des preuves WOPI de Collabora Online en vérifiant les clés de découverte, la rotation des clés, les URL proxy, les horodatages et les listes d'autorisation des hôtes.
Activez le suivi des modifications pour tous les utilisateurs dans un document ONLYOFFICE, maintenez-le actif après la réouverture et comprenez les limites d'une option par défaut globale.
Comparez les délais d'expiration par vue, hors focus, d'inactivité des documents, de sauvegarde automatique et de proxy de Collabora Online, puis choisissez et vérifiez les paramètres pour votre déploiement.
