Promena tema interfejsa u ONLYOFFICE Docs

Uvod

Pored dostupnih svetlih, klasičnih svetlih i tamnih tema interfejsa, ONLYOFFICE urednici sada mogu biti prilagođeni vašom sopstvenom temom boja. Molimo vas da pratite korake iz ovog vodiča kako biste naučili kako to da uradite.

note

Mogućnost dodavanja prilagođenih tema interfejsa dostupna je počevši od ONLYOFFICE Docs v7.0.

1. Kreirajte .json fajl koji će izgledati ovako:

   {
       "name": "Amazing theme",
       "l10n": {
           "fr": "Thème incroyable",
           "de": "Geweldig thema"
         },
       "id" : "theme-amazing",
       "type" : "light",
       "colors" : {
           "toolbar-header-document" :  "#446995",
           "toolbar-header-spreadsheet" : "#40865c",
           "toolbar-header-presentation" : "#aa5252",
           "border-color-shading" : "rgba(0, 0, 0, 0.15)"
           ...
       }
   }

   gde treba da navedete sledeće parametre:

   • name: Definiše naziv teme koji će biti prikazan u biraču tema naprednih podešavanja.
   • l10n: Definiše lokalizovani naziv teme. Ključevi objekta su dvoslovni kodovi jezika (ru, de, it, itd.) a vrednosti su prevodi naziva teme za svaki jezik.
   • id: Definiše jedinstveni identifikator teme, koji mora početi sa prefiksom theme-. Može sadržati znakove a-Z, 1-9, -, _.
   • type: Definiše tip teme, koji može biti tamna ili svetla.
   • colors: Definiše skup boja teme. Boje mogu biti predstavljene u heksadecimalnom ili RGBA formatu. Pogledajte boje za detalje o promenljivama boja koje ovaj objekat može sadržati.

2. Postavite kreirani fajl u sledeći direktorijum:

   • Windows: %ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes
   • Linux: /var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
   • Docker: Kopirajte fajl u Docs kontejner: sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes

3. Keš na serveru za ovaj zahtev ima trajanje od 5 minuta, tako da će tema biti dostupna nakon 5 minuta. Potrebno je da osvežite stranicu urednika.

   note

   U nekim slučajevima, možda ćete morati da restartujete servise i očistite keš.

4. Sada će tema biti prikazana na listi Tema interfejsa u Naprednim podešavanjima i možete je primeniti na interfejs urednika.

Boje

Boje alatne trake zaglavlja

toolbar-header-document

Boja zaglavlja alatne trake za tekstualne dokumente.

Podrazumevano: #446995

toolbar-header-spreadsheet

Boja zaglavlja alatne trake za tabele.

Podrazumevano: #40865c

toolbar-header-presentation

Boja zaglavlja alatne trake za prezentacije.

Podrazumevano: #BE664F

toolbar-header-pdf

Boja zaglavlja alatne trake za PDF dokumente.

Podrazumevano: #AA5252

text-toolbar-header-on-background-document

Boja teksta inicijala korisnika iz zaglavlja alatne trake tekstualnih dokumenata.

Podrazumevano: #38567A

text-toolbar-header-on-background-spreadsheet

Boja teksta inicijala korisnika iz zaglavlja alatne trake tabela.

Podrazumevano: #336B49

text-toolbar-header-on-background-presentation

Boja teksta inicijala korisnika iz zaglavlja alatne trake prezentacija.

Podrazumevano: #854535

text-toolbar-header-on-background-pdf

Boja teksta inicijala korisnika iz zaglavlja alatne trake PDF dokumenata.

Podrazumevano: #8D4444

Boje pozadine

background-normal

Boja pozadine prozora, padajućih panela, regularnih kontrola.

Podrazumevano: #fff

background-toolbar

Boja pozadine alatne trake, svih panela, zaglavlja dijaloga, panela sa dugmetom u platnu (zaglavlja kontrola sadržaja, dugmad za umetanje ili opcije automatske korekcije).

Podrazumevano: #f7f7f7

background-toolbar-additional

Dodatna boja pozadine alatne trake. Koristi se za neaktivne listove u tabelama.

Podrazumevano: #efefef

background-primary-dialog-button

Boja pozadine primarnog dugmeta dijaloga.

Podrazumevano: #444

background-accent-button

Boja pozadine akcentnog dugmeta u uredniku tekstualnih dokumenata.

Podrazumevano: #446995

background-tab-underline

Boja pozadine podvlačenja kartice za sivu alatnu traku.

Podrazumevano: #444

background-notification-popover

Boja pozadine iskačućeg obaveštenja (na primer, o režimu pregleda, popunjavanju obrazaca, itd.).

Podrazumevano: #fcfed7

background-notification-badge

Boja pozadine ikona obaveštenja iz zaglavlja alatne trake ili sa leve strane panela.

Podrazumevano: #ffd112

background-scrim

Boja zaslona koja smanjuje intenzitet pozadine modalnih prozora.

Podrazumevano: rgba(0, 0, 0, 0.2)

background-loader

Boja pozadine učitavača.

Podrazumevano: rgba(24, 24, 24, 0.9)

background-alt-key-hint

Boja pozadine za prečice tastera kada je pritisnut Alt taster.

Podrazumevano: #FFD938

background-contrast-popover

Boja pozadine informativnih saveta.

Podrazumevano: #fff

background-fill-button

Boja pozadine dugmeta iz zaglavlja obrasca.

Podrazumevano: #FFD112

shadow-contrast-popover

Boja pozadine senke informativnog saveta.

Podrazumevano: rgba(0, 0, 0, 0.3)

Boje isticanja

highlight-button-hover

Boja isticanja dugmadi, stavki padajućeg menija i drugih interaktivnih lista kada se prelazi mišem.

Podrazumevano: #e0e0e0

highlight-button-pressed

Boja isticanja pritisnutog dugmeta.

Podrazumevano: #cbcbcb

highlight-button-pressed-hover

Boja isticanja pritisnutog dugmeta kada se prelazi mišem.

Podrazumevano: #bababa

highlight-primary-dialog-button-hover

Boja isticanja glavnog dugmeta dijaloga kada se prelazi mišem.

Podrazumevano: #1c1c1c

highlight-accent-button-hover

Boja isticanja akcentnog dugmeta kada se prelazi mišem.

Podrazumevano: #375478

highlight-accent-button-pressed

Boja isticanja pritisnutog akcentnog dugmeta.

Podrazumevano: #293f59

highlight-header-button-hover

Boja isticanja dugmeta zaglavlja kada se prelazi mišem.

Podrazumevano: rgba(255, 255, 255, 0.15)

highlight-header-button-pressed

Boja isticanja pritisnutog dugmeta zaglavlja.

Podrazumevano: rgba(255, 255, 255, 0.25)

highlight-toolbar-tab-underline

Boja isticanja podvlačenja aktivne kartice za sivu alatnu traku.

Podrazumevano: #444

highlight-text-select

Boja isticanja izabranog teksta u regularnim kontrolama.

Podrazumevano: #3494fb

highlight-fill-button-hover

Boja isticanja dugmeta zaglavlja obrasca kada se prelazi mišem.

Podrazumevano: #FFE165

highlight-fill-button-pressed

Boja pozadine pritisnutog dugmeta iz zaglavlja obrasca.

Podrazumevano: #DFB500

Boje ivica

border-toolbar

Boja ivice alatne trake, panela i modalnih prozora.

Podrazumevano: #cbcbcb

border-toolbar-active-panel-top

Boja ivice aktivnog panela gornje alatne trake.

Podrazumevano: #f7f7f7

border-divider

Boja ivica koje razdvajaju elemente alatne trake i panela.

Podrazumevano: #dfdfdf

border-regular-control

Boja ivice regularnih kontrola.

Podrazumevano: #c0c0c0

border-toolbar-button-hover

Opšta boja ivice za dugmad na alatnoj traci kada su zajedno na prelazu miša.

Podrazumevano: #e0e0e0

border-preview-hover

Boja ivice elementa iz kontrolne prikaze na prelazu miša (pregled slajda, stilovi alatne trake).

Podrazumevano: #bababa

border-preview-select

Boja ivice pritisnutog elementa iz kontrolne prikaze (pregled slajda, stilovi alatne trake).

Podrazumevano: #888

border-control-focus

Boja ivice fokusirane regularne kontrole.

Podrazumevano: #848484

border-color-shading

Boja ivice palete boja.

Podrazumevano: rgba(0, 0, 0, 0.15)

border-error

Boja ivice polja za unos kada se unese nevažeća vrednost.

Podrazumevano: #f62211

border-contrast-popover

Boja ivice informativnog saveta.

Podrazumevano: #fff

border-button-pressed-focus

Boja ivice fokusiranog pritisnutog dugmeta.

Podrazumevano: #848484

Boje teksta

text-normal

Podrazumevana boja teksta.

Podrazumevano: rgba(0, 0, 0, 0.8)

text-normal-pressed

Boja teksta aktivnog elementa (izabrana kartica, pritisnuto dugme, itd.).

Podrazumevano: rgba(0, 0, 0, 0.8)

text-secondary

Sekundarna boja teksta (napomene, objašnjenja, itd.).

Podrazumevano: rgba(0, 0, 0, 0.6)

text-tertiary

Tercijarna boja teksta (placeholderi).

Podrazumevano: rgba(0, 0, 0, 0.4)

text-link

Boja teksta linkova i dugmadi za linkove u obaveštenjima.

Podrazumevano: #445799

text-link-hover

Boja teksta linkova i dugmadi za linkove u obaveštenjima na prelazu miša.

Podrazumevano: #445799

text-link-active

Boja teksta pritisnutih linkova i dugmadi za linkove u obaveštenjima.

Podrazumevano: #445799

text-link-visited

Boja teksta posećenih linkova i dugmadi za linkove u obaveštenjima.

Podrazumevano: #445799

text-inverse

Boja teksta na invertovanoj pozadini alatne trake.

Podrazumevano: #fff

text-toolbar-header

Boja teksta zaglavlja alatne trake.

Podrazumevano: #fff

text-contrast-background

Boja teksta za kontrastnu pozadinu (učitavanje, naslovi ćelija u prikazu listova).

Podrazumevano: #fff

text-alt-key-hint

Boja teksta za skraćenice dugmadi kada je pritisnut taster Alt.

Podrazumevano: rgba(0, 0, 0, 0.8)

Boje ikona

icon-normal

Boja ikone.

Podrazumevano: #444

icon-normal-pressed

Boja ikone za aktivne elemente (izabrana kartica, pritisnuto dugme, itd.).

Podrazumevano: #444

icon-inverse

Invertovana boja ikone (trenutno se ne koristi u interfejsu).

Podrazumevano: #fff

icon-toolbar-header

Boja ikone iz zaglavlja alatne trake (na primer, ikona sa inicijalima korisnika).

Podrazumevano: #fff

icon-notification-badge

Boja ikone za oznake obaveštenja iz zaglavlja alatne trake ili sa leve strane panela.

Podrazumevano: #000

icon-contrast-popover

Boja ikone za kontrastne informativne savete (trenutno se ne koristi u interfejsu).

Podrazumevano: #fff

icon-success

Boja za čekboksove komentara koji su rešeni ili druge indikacije uspeha.

Podrazumevano: #090

Boja platna

canvas-background

Boja pozadine radnog prostora iza stranice dokumenta, lista ili slajda, pozadina naslova kolone i pozadina interfejsa za grupisanje kolona u tabelama.

Podrazumevano: #eee

canvas-content-background

Boja pozadine stranice dokumenta, ćelija ili slajda.

Podrazumevano: #fff

canvas-page-border

Boja ivice stranice dokumenta.

Podrazumevano: #ccc

canvas-ruler-background

Boja pozadine lenjira.

Podrazumevano: #fff

canvas-ruler-border

Boja ivice lenjira.

Podrazumevano: #cbcbcb

canvas-ruler-margins-background

Boja pozadine margina lenjira.

Podrazumevano: #d9d9d9

canvas-ruler-mark

Boja oznaka na lenjiru (cilj i tekst).

Podrazumevano: #555

canvas-ruler-handle-border

Boja ivice ručke lenjira.

Podrazumevano: #555

canvas-ruler-handle-border-disabled

Boja ivice onemogućene ručke lenjira.

Podrazumevano: #aaa

canvas-high-contrast

Boja elemenata visokog kontrasta (oznake kartica na lenjiru, simboli grupisanih ćelija).

Podrazumevano: #000

canvas-high-contrast-disabled

Boja onemogućenih elemenata visokog kontrasta (oznake kartica na lenjiru, simboli grupisanih ćelija).

Podrazumevano: #666

canvas-cell-border

Boja ivice ćelije.

Podrazumevano: rgba(0, 0, 0, 0.1)

canvas-cell-title-text

Boja teksta naslova ćelije.

Podrazumevano: #444

canvas-cell-title-background

Boja pozadine naslova ćelije.

Podrazumevano: #f7f7f7

canvas-cell-title-background-hover

Boja pozadine naslova ćelije pri prelasku mišem.

Podrazumevano: #dfdfdf

canvas-cell-title-background-selected

Boja pozadine izabranog naslova ćelije.

Podrazumevano: #cfcfcf

canvas-cell-title-border

Boja ivice naslova ćelije.

Podrazumevano: #d8d8d8

canvas-cell-title-border-hover

Boja ivice naslova ćelije prilikom prelaska mišem.

Podrazumevano: #c9c9c9

canvas-cell-title-border-selected

Boja ivice izabranog naslova ćelije.

Podrazumevano: #bbb

canvas-scroll-thumb

Boja klizača.

Podrazumevano: #f1f1f1

canvas-scroll-thumb-hover

Boja klizača prilikom prelaska mišem.

Podrazumevano: #cfcfcf

canvas-scroll-thumb-pressed

Boja pritisnutog klizača.

Podrazumevano: #adadad

canvas-scroll-thumb-border

Boja ivice klizača.

Podrazumevano: #cfcfcf

canvas-scroll-thumb-border-hover

Boja ivice klizača prilikom prelaska mišem.

Podrazumevano: #cfcfcf

canvas-scroll-thumb-border-pressed

Boja ivice pritisnutog klizača.

Podrazumevano: #adadad

canvas-scroll-arrow

Boja strelice za skrolovanje.

Podrazumevano: #adadad

canvas-scroll-arrow-hover

Boja strelice za skrolovanje prilikom prelaska mišem.

Podrazumevano: #f1f1f1

canvas-scroll-arrow-pressed

Boja pritisnute strelice za skrolovanje.

Podrazumevano: #f1f1f1

canvas-scroll-thumb-target

Boja cilja klizača.

Podrazumevano: #cfcfcf

canvas-scroll-thumb-target-hover

Boja cilja klizača prilikom prelaska mišem.

Podrazumevano: #f1f1f1

canvas-scroll-thumb-target-pressed

Boja cilja pritisnutog klizača.

Podrazumevano: #f1f1f1

canvas-sheet-view-cell-background

Boja pozadine ćelije u Sheet View režimu.

Podrazumevano: #73bf91

canvas-sheet-view-cell-background-hover

Boja pozadine ćelije u Sheet View režimu prilikom prelaska mišem.

Podrazumevano: #97e3b6

canvas-sheet-view-cell-background-pressed

Boja pozadine pritisnute ćelije u Sheet View režimu.

Podrazumevano: #aaffcc

canvas-sheet-view-cell-title-label

Boja teksta ćelije u Sheet View režimu.

Podrazumevano: #121212

canvas-sheet-view-select-all-icon

Boja ikone Izaberi sve ćelije u Sheet View režimu.

Podrazumevano: #3d664e

canvas-freeze-line-1px

Boja linije zamrzavanja sa senkom.

Podrazumevano: #818181

canvas-freeze-line-2px

Boja linije zamrzavanja bez senke.

Podrazumevano: #aaaaaa

canvas-select-all-icon

Boja ikone Izaberi sve ćelije.

Podrazumevano: #82878f