Geef ONLYOFFICE Docs een eigen merkuitstraling met uw logo en themakleuren.

Om een ​​ingebedde ONLYOFFICE Docs-editor aan te passen, geeft u de editor een kleurenthema met uw huisstijl en voegt u de URL's van uw logo toe aan de initialisatieconfiguratie. Het thema is een JSON-bestand dat op de Docs-server wordt geïnstalleerd; het logo wordt geconfigureerd door de applicatie die de editor insluit. De gedocumenteerde optie voor een logo in de header is alleen beschikbaar in ONLYOFFICE Docs Developer, dus controleer uw versie voordat u de benodigde bestanden voorbereidt.

Dit geldt voor een zelfgehoste Docs-integratie, niet voor de DocSpace-branding of de lokale themakiezer van Desktop Editors. ONLYOFFICE documenteert aangepaste thema's vanaf Docs v7.0. Deze instellingen beïnvloeden de interface van de ingebedde editor, niet de documentinhoud of de navigatie van uw website.

Wat moet je als eerste voorbereiden?

Verzamel twee bestanden voor het logo: een versie die duidelijk leesbaar is tegen een lichte achtergrond en een omgekeerde versie voor een donkere of gekleurde achtergrond. De Docs API schrijft een afbeelding van 300 × 20 pixels voor als logo voor de editor. Gebruik een transparante PNG als dat beter bij uw ontwerp past en kies voor een contrastrijk logo met weinig details, omdat de afbeelding in een smalle strook wordt weergegeven. Host beide bestanden op stabiele HTTPS-adressen die de browser van de editorgebruiker kan laden.

Je hebt ook schrijftoegang tot de server nodig, de code waarmee de editorconfiguratie wordt opgebouwd en een testdocument. Voor Docker heb je de naam of ID van de actieve container nodig. Test de wijziging eerst in een niet-productieomgeving.

1. Maak een JSON-bestand aan voor je kleurenthema.

Een thema-JSON-bestand is een instellingenbestand dat benoemde interfacekleurtokens koppelt aan kleurwaarden. De tokens idmoeten uniek zijn en beginnen met een puntkomma theme-(;). Dit nameis wat gebruikers zien in de themakiezer. Kies een lichte of donkere basiskleur die past bij de gewenste interface en vervang vervolgens de kleuren van de kopteksten en geselecteerde accentkleuren. In het onderstaande voorbeeld blijft de achtergrond van de editor licht, wordt indigo gebruikt voor elke koptekst in de editor en koraal voor de accentknop van de documenteditor.

{
  "name": "Acme Brand Light",
  "id": "theme-acme-brand-light",
  "type": "light",
  "colors": {
    "toolbar-header-document": "#263B67",
    "toolbar-header-spreadsheet": "#263B67",
    "toolbar-header-presentation": "#263B67",
    "toolbar-header-pdf": "#263B67",
    "text-toolbar-header": "#fff",
    "background-accent-button": "#D8613C"
  }
}

Sla het op als acme-brand-light.json. De kleurcodes voor de koptekst zijn apart voor documenten, spreadsheets, presentaties en pdf's; stel ze voor elk afzonderlijk in als u een consistente huisstijl wilt voor alle bestandstypen. De hier getoonde accentkleurcode is van invloed op de accentknop in de teksteditor, niet op elk gekleurd element in Docs. ONLYOFFICE documenteert extra kleurcodes voor achtergronden, randen, hover-effecten, pictogrammen, tekst en het bewerkingscanvas, dus breid het kleurenpalet alleen uit wanneer u die gebieden nodig hebt. Controleer het contrast van tekst en pictogrammen ten opzichte van de gekozen achtergronden voordat u de publicatie start; een huisstijlkleur alleen garandeert geen leesbare besturingselementen.

Voor de volledige lijst met ondersteunde tokens en de vereiste JSON-velden kunt u de officiële ONLYOFFICE-referentie voor aangepaste thema's raadplegen .

2. Installeer het thema op de Docs-server.

Kopieer het JSON-bestand naar de themamap van de server. De officiële Linux- en Docker-documentatie geeft dit pad aan:

/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes

Voor een Docker-implementatie plaatst u het bestand in de map van waaruit u de opdracht uitvoert en vervangt u dit CONTAINER_IDdoor de naam of ID van de actieve Docs-container:

docker cp ./acme-brand-light.json CONTAINER_ID:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes/

Op Linux kopieert u het bestand naar dat pad met een account dat schrijfrechten heeft. Op Windows gebruikt u de themamap onder %ProgramFiles%\ONLYOFFICE\DocumentServer; raadpleeg de installatiehandleiding voor het volledige pad. Een aangepast thema is een toegevoegd JSON-bestand, geen wijziging van de meegeleverde applicatiebestanden.

ONLYOFFICE geeft aan dat de themacache elke vijf minuten wordt vernieuwd. Vernieuw de editor nadat u het bestand hebt gekopieerd; als het nog steeds ontbreekt, volg dan de instructies voor het oplossen van cacheproblemen in Docker of Linux en herstart de services alleen indien nodig. Voor productiecontainers kunt u het bestand in uw image of implementatieautomatisering opnemen, zodat het bestand niet wordt verwijderd wanneer u een container vervangt.

3. Pas het thema toe en stel het editorlogo in.

Nadat het thema is gevonden, kunnen gebruikers het selecteren via Weergave > Interfacethema . Om ervoor te zorgen dat uw ingebedde editor met dat thema start, voegt u de ID ervan toe aan het configuratieobject dat uw applicatie doorgeeft aan de Docs API. Stel het logo in binnen hetzelfde editorConfig.customizationobject:

editorConfig: {
  customization: {
    uiTheme: "theme-acme-brand-light",
    logo: {
      image: "https://assets.example.com/logo-light.png",
      imageDark: "https://assets.example.com/logo-dark.png",
      imageLight: "https://assets.example.com/logo-light.png",
      url: "https://www.example.com"
    }
  }
}

Vervang de voorbeeld-URL's door uw daadwerkelijke openbare URL's en bestemmings-URL's. logo.imageis het standaard logo-pad voor gangbare editor-modi; met de aparte velden voor donker en licht kunt u een afbeelding kiezen voor een donkere of lichte header. De URL is de pagina waarnaar een klik op het logo moet leiden. De API vermeldt deze header-logo-instelling als een functie voor Docs-ontwikkelaars en specificeert de afmeting 300 × 20. Verwar dit niet met customer.logo, wat een grotere afbeelding is die wordt gebruikt in de 'Over'-informatie van de editor.

Als uw integratie editorconfiguraties ondertekent met JWT, moet u de handtekening opnieuw genereren na het toevoegen of wijzigen van deze ondertekende velden en het ondertekeningsgeheim op de server bewaren. Het officiële ONLYOFFICE-integratievoorbeeld legt uit dat het token moet overeenkomen met de configuratie en opnieuw moet worden gegenereerd wanneer ondertekende parameters wijzigen. Houd er ook rekening mee dat een eerder geselecteerd thema van de gebruiker voorrang kan hebben uiTheme; test dit met een nieuw browserprofiel of reset de opgeslagen thema-voorkeur van die gebruiker als het door u gevraagde standaardthema niet wordt weergegeven.

Voor informatie over de afmetingen en beschikbare edities van het logo, raadpleeg de officiële referentie voor de standaard huisstijlconfiguratie .

Controleer het resultaat vóór de uitrol.

Open de bestandstypen die uw gebruikers nodig hebben. Controleer de kleuren van de kopteksten, de leesbare tekst en pictogrammen, het juiste logo in lichte en donkere kopteksten en de klikbestemming van het logo. Controleer de bewerkings- en weergavemodi in de daadwerkelijke ingesloten lay-out.

Als het thema ontbreekt, valideer dan de JSON en ID, controleer de themamap van de actieve server en wacht tot de cache is vernieuwd. Als het logo ontbreekt, controleer dan de vereisten van de Developer-editie, de toegang van de browser tot de afbeeldings-URL en of de initialisatieconfiguratie de juiste instellingen bevat logo. Genereer de JWT opnieuw op de backend als u ondertekende velden hebt gewijzigd.