WebHelp-pohjan mukauttaminen

Yksi DoX CMS:n julkaisumuodoista on WebHelp. Tällaiset julkaisut ovat HTML-julkaisuja, jotka on asetettu yhden otsikkosisällön kerrallaan esittävään ja sisällysluettelon näkyvissä pitävään kehykseen. Alkuperäinen kehys rakennettiin omaan käyttöömme. Tästä syystä monia seikkoja on syytä muuttaa tyylitiedostojen avulla, kun käytät näitä julkaisuja muihin dokumentteihin. Kerron tässä artikkelissa tavoista tehdä niin. Tulen seuraavaksi sovittamaan tämän tiedon myös käyttöoppaaseemme.

Olemme myös hahmotelleet ratkaisua WebHelp-pohjan laajempaa muokkaamista varten. Tällöin voit itse päättää, mitkä osat tulevat mukaan WebHelp-julkaisuihin. Voit esimerkiksi luultavasti käyttää tätä näkymää varten erikseen valmisteltuja ylä- ja alatunnisteita samalla tavoin kuin PDF-julkaisuissa. Keskityn tässä artikkelissa kuitenkin vain toistaiseksi käytettävissä oleviin keinoihin, jotka perustuvat tyylitiedostoihin.

Tyylitiedostot perustuvat CSS:ään. Tästä artikkelista on eniten hyötyä, jos saatavilla on henkilö, joka osaa kirjoittaa tyylitiedostoja. Tarvittaessa voimme tehdä vaaditut tyylitiedostot uusille asiakkaillemme osana järjestelmän käyttöönottoa tai maksullisena lisäpalveluna nykyisille asiakkaillemme.

Oletuspohja

Kuva yllä näyttää, miltä WebHelp-julkaisujen oletuspohja näyttää. Tämä kuva on DoX CMS:n käyttöoppaasta. Se näyttää osiot, joiden muuttamisen keinoja käsittelen alempana. Nämä osiot ovat

1. valmistunnisteet,
2. sisällysluettelo,
3. pääsisältö,
4. hakukenttä,
5. siirtymäpainikkeet, ja
6. valmistyyli.

WebHelp-julkaisut käyttävät niille tehtyä valmistyylitiedostoa yhdessä julkaisun käyttöön valitsemasi tyylin tyylitiedostojen kanssa. Et voi muokata tätä tyylitiedostoa suoraan, mutta voit vaihtaa voimaan jääviä arvoja muiden tyylitiedostojen avulla. Tämä muutos vaatii ajoittain tunnistetta ’!important’ kuten esimerkit alla näyttävät. WebHelp-kohtaisia asetuksia varten kannattaa tehdä erillinen tyylitiedosto, jonka voit yhdistää käyttämiisi oletustyyleihin omana tyylinään DoX CMS:ssä. Kukin tyyli voi koostua useammasta tyylitiedostosta.

Tarkista-toiminto

Voit tarkastella WebHelp-julkaisujen ja muiden julkaisujen esikatseluiden eri osia selaimen Tarkista-toiminnon avulla. Kun napsautat jotakin näkymän osaa hiiren oikealla painikkeella ja valitset tämän toiminnon, selain näyttää näkymän osat sivupalkissa. Kun valitset jonkin näistä osista, selain näyttää myös kaikki siihen liittyvät säännöt eri tyylitiedostoissa.

Tämä toiminto antaa sinun löytää näkymän eri osien tunnisteet sekä säännöt, jotka vaikuttavat niiden senhetkiseen tilaan. Voit myös tehdä alustavia muutoksia tyyliin selaimen avulla, mutta joudut kirjaamaan tällä tavoin tehdyt muutokset erikseen varsinaisiin tyylitiedostoihin niihin liittyvien muutoksien tekemiseksi julkaisuihin.

Valmistunnisteet

Koska WebHelp-julkaisut lisättiin järjestelmään alkujaan DoX CMS:n omaa opasta varten, niiden oletuspohja sisältää viittauksia DoX Systemsiin. Voit kuitenkin poistaa ne ja korvata ne teille paremmin soveltuvilla teksteillä.

Valmistunnisteita on kahdessa kohdassa: sisällysluettelon pohjalla ja oikeassa yläkulmassa. Sisällysluettelon alakulmassa lukee ’www.dox.fi | © DoX systems’. Oikeassa yläkulmassa lukee ’DoX Content Management System | DOX USER MANUAL’. Et voi muuttaa näitä osuuksia suoraan, mutta voit piilottaa ne ja korvata ne eri kautta syötetyllä muulla sisällöllä.

Alta löytyvät tämän artikkelin kuvissa käytetyt keinot korvata nämä tekstit:

• Saat poistettua sisällysluettelon valmistunnisteen olemalla näyttämättä osion .tocFooter p-elementtiä. Kun .tocFooter-osioon sen sijaan lisää ::before-pseudoelementin, sen sisältö asettuu samaan kohtaan. Tyylitiedosto antaa hallinnoida tämän pseudoelementin sisältöä. Kielitunnisteet antavat tehdä niin myös kielikohtaisesti samalla tavoin kuin huomioelementtien (note) osalta.
• Saat poistettua oikean yläkulman valmistunnisteen olemalla näyttämättä .documentHeaderTitle-osiota. Sen vieressä on tyhjä osio .documentHeaderLogoWrapper. Saat sen asettumaan valmistunnisteen tilalle, ja voit myös lisätä siihen sisältöä ::before-pseudoelementillä.

.tocFooter p {
    display: none;
}

.documentHeaderTitle {
    display: none !important;
}

.tocFooter::before {
    content: "© Aperture Inc 2022";
    position: relative;
    left: 50%;
    color: white;
}

.documentHeaderLogoWrapper::before {
    content: "Aperture Inc | Glimpse the Future";
    padding-left: 80%;
    white-space: nowrap;
    color: white;
    font-size: 1.5em;
}

.documentHeaderLogoWrapper {
    display: flex;
    flex-grow: 1;
    align-self: flex-end;
}

Sisällysluettelo

Sisällysluettelon saa sijoitettua uudelleen näkymän toiselle puolen tai jopa sen ylä- tai alareunaan. Myös sen tyylin kuten väriteeman saa vaihdettua vapaasti. Enemmistö näistä muutoksista perustuu samoihin sääntöihin kuin sisällysluettelon tyyli myös muissa julkaisuissa. Käyn alla läpi WebHelp-julkaisujen kannalta olennaiset erot.

Sisällysluettelon muotoilu

Alta löytyvät sisällysluettelon muotoilun muutokset tämän artikkelin kuvissa:

• Vaihdoin sisällysluettelon ikonin kahdella eri tavalla, joista toinen on piilotettu. Käytin tähän valitsijaa ’.tocTitleWrapper h1 > span:before’. Sisältö koostuu Font Awesome -ikonifontin arvosta. Tämänhetkinen pohja tukee ilmaisversiota 4.3 ja sen ikoneita, mutta tulemme päivittämään ikonifontin version. Toinen vaihtoehto on tyhjentää tämä sisältö tai tehdä siitä läpinäkyvää ja vaihtaa sen taustakuva haluamaasi ikoniin.
• Vaihdoin sisällysluettelon ja sen otsikkorivin taustat kuvaksi ja sen kanssa yhteensopivaksi väriksi. Varsinainen sisällysluettelo on osio .documentTOCWrapper ja sen otsikko on osio .tocTitleWrapper.
• En tehnyt sisällysluettelon alatunnisteeseen muita muutoksia, kuin että vaihdoin valmistunnisteen arvon. Voit kuitenkin hallinnoida sitä osion .tocFooter avulla.
• Vaihdoin sisällysluettelon näkyvyyttä hallinnoivan painikkeen toiseen Font Awesome -ikoniin. Tämän painikkeen hallinnointi perustuu valitsijaan ’.documentHeaderTrigger::before’ yhdessä content-säännön kanssa.

.tocTitleWrapper h1 > span:before {
    content: "\f1ea" !important;
    color: transparent;
    background-image: url(/Content/Images/camera-aperture-icon.png); 
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

.documentTOCWrapper {
    background-image: url("https://static.vecteezy.com/system/resources/previews/002/024/449/original/abstract-black-and-gray-vertical-stripes-geometric-pattern-background-vector.jpg");
}

.tocTitleWrapper {
    background-color: black !important; 
}

.tocFooter {}

.documentHeaderTrigger::before {
    content: "\f0c9" !important;
}

Sisällysluettelon sijainti

Tarvittaessa voit myös sijoittaa sisällysluettelon eri tavoin. Täällä esittämieni sääntöjen käyttämisen lisäksi sinun on syytä sijoittaa uudelleen sisällysluettelon näkyvyyttä hallinnoiva painike ja mahdollisesti muuttaa osioiden kulmien pyöristystä. Voit myös piilottaa sisällysluettelon näkyvyyttä hallinnoivan painikkeen.

Oikea reuna

Yllä näytettyä vastaava sisällysluettelon oikeaan reunaan sijoitus perustuu näihin alla esitettyihin muutoksiin tyylitiedostossa:

• Valitsija ’.documentTOCWrapper, .documentTOCWrapper.open’ vaikuttaa sisällysluetteloon sen ollessa joko näkyvissä tai piilotettuna. Koska WebHelp käyttää flexbox-asettelua, saat siirrettyä sen toiselle puolelle näkymää antamalla sille suuremman arvon order-komennolla kuin .documentBodyWrapper-osiolle.
• Komento ’border-radius’ arvolla 0 .documentBodyWrapper-osiossa poistaa pyöristyksen sisällön ja sisällysluettelon välillä. Sen saa säilymään oikeiden muotoilusääntöjen avulla, mutta tämä on yksinkertaisin keino pitää näkymä ehjänä, kun vaihdat sisällysluettelon puolta.

.documentTOCWrapper, .documentTOCWrapper.open {
    order: 2;
}

.documentBodyWrapper {
    order: 1;
    border-radius: 0 !important;
}

Pystysuuntainen sijoitus

Yllä näytettyä vastaava sisällysluettelon pystysuuntainen sijoitus perustuu näihin alla esitettyihin muutoksiin tyylitiedostossa:

• Saat vaihdettua flexboxin suunnan pystysuuntaiseksi käyttämällä .documentWrapper-osioon komentoa flex-direction arvolla column.
• Sisällysluettelon leveys kannattaa säätää koko näkymän kattavaksi. Voit tehdä niin valitsijan ’.documentTOCWrapper, .documentTOCWrapper.open, .tocWrapper’ avulla. Tämä komento vaatii määritettä ’!important’, koska normaalisti näiden osioiden leveys on kytketty sisällysluettelon piilottamiseen.
• Jotta piilottaminen toimii pystysuunnassa, sinun täytyy kytkeä se sisällysluettelon korkeuteen sen leveyden sijaan. Tältä osin .documentTOCWrapper.open-osio antaa määrittää oletuskorkeuden ja .documentTOCWrapper-osio piilotetun näkymän korkeuden.
• Muutoin pätevät samat säännöt kuin oikeaan reunaan siirtämisen osalta. Oletusarvoisesti sisällysluettelo siirtyy näkymän yläreunaan. Jos nostat sisällysluettelon order-komennon arvon suuremmaksi kuin sisällön arvon tältä osin, se siirtyy näkymän alareunaan. Muutin tämän arvon alla kommentiksi sitä ympäröivillä tunnisteilla ’/*’ ja ’*/’, koska sisällysluettelon näkymän alareunaan siirtäminen on valinnaista.

.documentWrapper {
    flex-direction: column;
}

.documentTOCWrapper, .documentTOCWrapper.open, .tocWrapper {
    width: 100% !important;
}

.documentTOCWrapper.open {
    height: 60%;
}

.documentTOCWrapper {
    height: 2%;
}

.documentBodyWrapper {
    order: 1;
    border-radius: 0 !important;
}

.documentTOCWrapper, .documentTOCWrapper.open {
    /*order: 2;*/
}

Pääsisältö

Varsinaisen sisällön asettelu ja tyyli ovat myös seikkoja, joihin voit vaikuttaa tyylitiedostolla. Tällaisia seikkoja ovat esimerkiksi käytetyt taustat ja sisältöjen leveys.

Alta löytyvät tämän artikkelin kuvissa käytetyt keinot hallinnoida pääsisällön tyyliä:

• Muut osiot kuin sisällysluettelo kuuluvat .documentBodyWrapper-osioon. Muutin sen väriä alla.
• Sisällöt kuuluvat .topicWrapper-osioon. Tässä tapauksessa muutin sen väriä vaaleammaksi suhteessa tummempaan taustaan ja tästä syystä lisäsin siihen myös sivumarginaalit. Tämän osion leveyden säätäminen vaatii komentoa ’max-width’ ja määritettä ’!important’. Muutin tämän arvon alla kommentiksi sitä ympäröivillä tunnisteilla ’/*’ ja ’*/’, koska näytetyissä kuvissa tätä arvoa ei ole muutettu. DoX CMS:n käyttöopas tosin käyttää tällä hetkellä oletusarvoa leveämpää sisältökenttää.

.documentBodyWrapper {
    background-color: #666 !important;
}

.topicWrapper {
    background-color: rgba(255,255,255,0.35);
    padding: 0% 2%;
    height: 100%;
    /*max-width: 50% !important*/
}

Hakukenttä

Voit tarvittaessa muuttaa myös sisällön hakukentän yksityiskohtia.

Alta löytyvät tämän artikkelin kuvissa käytetyt keinot hallinnoida hakukentän tyyliä:

• Hakukentän tausta on vaaleampi tummaa taustaväriä vasten .documentHeaderSearchForm-osion taustavärin vaihtamisen vuoksi.
• Koko hakukentän tyyliä voi vaihtaa lisäämällä sääntöjä .documentHeaderSearchWrapper-osiolle. Voit esimerkiksi siirtää tätä osiota tai lisätä siihen tekstiä pseudoelementeillä.
• Valitsija ’.documentHeaderSearchForm::before’ antaa vaihtaa suurennuslasin eri ikoniin tai poistaa sen. Tämä tapahtuu samalla tavoin kuin muiden ikoneiden vaihtaminen ja osioiden piilottaminen.
• Hakutoiminnon syötekenttä koostuu #search-osiosta.

.documentHeaderSearchForm {
    background-color: rgba(255,255,255,0.35) !important;
}

.documentHeaderSearchWrapper {}

.documentHeaderSearchForm::before {}

#search {}

Siirtymäpainikkeet

DoX CMS:n WebHelp-pohja sisältää erilliset siirtymäpainikkeet edelliseen ja seuraavaan otsikkosisältöön siirtymistä ilman sisällysluettelon käyttämistä varten. Oletusarvoisesti ne ovat varsinaisen sisällön alapuolella. Voit kuitenkin siirtää ne myös muualle ja vaihtaa niiden tyylin halutunlaiseksi.

Alta löytyvät tämän artikkelin kuvissa käytetyt keinot hallinnoida siirtymäpainikkeiden tyyliä:

• Siirsin siirtymäpainikkeet tässä tapauksessa sijoittamalla .paginationWrapper-osio uudelleen suhteessa sen alkuperäiseen sijaintiin. Koska tämä osio ei enää ole muun sisällön alapuolella, poistin sen taustavärin. Voit sijoittaa sen uudelleen myös muilla tavoin kuten tekemällä ympäröivistä osioista flexboxin ja käyttämällä order-komentoa yllä näytetyllä tavoin.
• Siirsin siirtymäpainikkeet varsinaisen sisällön eri puolille tekemällä .pagination-osiosta leveämmän kuin sitä ympäröivästä .paginationWrapper-osiosta. Jos .paginationWrapper-osiosta tekee leveämmän käyttämällä suhteellisia yksiköitä kuten prosentteja, se tekee koko näkymästä haluttua leveämmän.
• Voit hallinnoida siirtymäpainikkeiden tekstiä suoraan valitsijalla ’.pagination a’. Tässä tapauksessa muutin tämän tekstin valkoiseksi.
• Osiot .paginationPrev ja .paginationNext antavat sinun hallinnoida painikkeita erikseen. Tässä tapauksessa erotin ne omiksi palikoikseen, joilla on sijoitteluun sopiva leveys. Lisäksi pakotin kummankin sisällöt kiinni ympäröivän elementin ulkoreunoihin float-komennon avulla.
• Voit muuttaa siirtymäpainikkeiden ikoneita kohdentajalla ’.paginationPrev a:before, .paginationNext a:after’. Tässä tapauksessa tein niiden pallosta mustan. Voit vaihtaa niiden nuoli-ikonit voi samalla tavoin kuin muut WebHelp-pohjan ikonit.

.paginationWrapper {
    background-color: transparent !important;
    position: relative;
    top: -70%;
    left: -35%;
}

.pagination {
    width: 170% !important;
}

.pagination a {
    color: white !important;
}

.paginationPrev, .paginationNext {
    display: inline-block !important;
    width: 13% !important;
}

.paginationPrev {
    float: left !important;
}

.paginationNext {
    float: right !important;
}

.paginationPrev a:before, .paginationNext a:after {
    background-color: black !important;
}

Valmistyyli

Olennaisin varsinaisen sisällön valmistyyli WebHelp-pohjassa liittyy otsikoihin. Voit hallinnoida näitä antamalla niille arvot tavalliseen tapaan ja käyttämällä tarvittaessa ’!important’-määrettä. Lisäsin esimerkkinä alle tason yksi otsikoiden oranssin oletustaustan poistamisen keinon. Jos huomaat muita tyyliseikkoja, joiden lähde selaimen hallinnointipaneelin mukaan on static.css tai doc.css, ne liittyvät WebHelp-pohjan valmistyyliin.

Alta löytyvät tämän artikkelin kuvissa käytetyt keinot hallinnoida oletustyyliä:

• Ensimmäisen tason otsikoilla eli h1-osioilla on oletusarvoisesti oranssi pyöristetty tausta. Voit piilottaa sen vaihtamalla kyseisen taustan läpinäkyväksi.
• Osa otsikoista on oletusarvoisesti oransseja. Alla on yksi esimerkki niiden värin muuttamiseksi. Tämä on kuitenkin osa normaalia tyylitiedoston käyttöä DoX CMS:ssä. WebHelp-julkaisuja varten on yleisesti hyvä ajatus vaihtaa otsikoiden väriä myös esimerkiksi pohjan taustavärin vuoksi.
• Voit muuttaa myös vierityspalkkien tyyliä. Tähän löytyy erilaisia keinoja W3C:ssä ja Mozillan verkkokehitysoppaassa. Näytän alla, kuinka ne saa ainakin toistaiseksi piilotettua kokonaan. Siihen liittyy kuitenkin vaara, että käyttäjiltä jää näkemättä sisältöä, koska he eivät tiedä tarpeesta selata alemmas. On parempi ajatus esimerkiksi vain tehdä vierityspalkeista ohuempia ja vähemmän näkyviä.

h1 {
	background-color: transparent !important;
}

.titleWrapper * {
	color: white;
}

*::-webkit-scrollbar {
	display: none;
}