Voit mukauttaa sekä upotetun varausmoottorin ulkoasua että tekstiä CSS:llä. Tämä mahdollistaa elementtien piilottamisen, asettelujen säätämisen tai oletusotsikoiden korvaamisen - jopa silloin, kun sisäänrakennettua asetusta ei ole. Tarvitaan jonkin verran CSS-perustietämystä, mutta olemme tehneet rakenteesta helppokäyttöisen.

Kuinka CSS-editoriin pääsee

1. Siirry Verkkotyökalut > Varausmoottorit.
2. Napsauta kolmea pistettä samalla rivillä kuin varausmoottori, jota haluat muokata.
3. Napsauta Muokkaa pudotusvalikosta.
4. Siirry Mukautettu CSS -välilehteen.

CSS-rakenteen ymmärtäminen

Pitääksesi mukautuksesi yksinkertaisina ja luotettavina, Sirvoy käyttää BEM (Block, Element, Modifier) -nimeämiskäytäntöä. Tämä auttaa sinua kirjoittamaan CSS:ää, joka on helpompi lukea ja joka todennäköisemmin ei rikkoonnu tulevissa päivityksissä.

Vältä käyttämästä luokkavalitsimia, jotka alkavat js- tai sirvoy- (paitsi missä on huomautettu alla), ja vältä käyttämästä ID-valitsimia. Nämä voivat muuttua ilman ennakkoilmoitusta, eikä niitä ole suunniteltu tyylittelyyn.

Tekstin muuttaminen CSS:n avulla

Sirvoy ei tarjoa sisäänrakennettua asetusta jokaisen varausmoottorin otsikon muuttamiseen, mutta voit silti muuttaa joitakin kohdistamalla tiettyjä luokkia mukautetussa CSS:ssäsi.

Tällä tavalla muokattavat tekstielementit käyttävät aina luokkaa sirvoy-flexible-text. Nämä tulevat myös seuraavien kanssa:

• käännöksen avainluokka kuten sft-trans-key-shared-button-search
• kieliluokka kuten sft-lang-en (englanniksi), sft-lang-fr (ranskaksi) tai sft-lang-sv (ruotsiksi)

Esimerkki: Vaihda Haku-painikkeen otsikko

Muuta "Haku"-painikkeen teksti sekä englanniksi että ruotsiksi seuraamalla näitä vaiheita.

1. Tunnista kohde-elementti

Tältä alkuperäinen merkintä näyttää varausmoottorissa:

<span class="
  sirvoy-flexible-text 
  sft-lang-en 
  sft-trans-key-shared-button-search 
  sft-initialized" 
  data-translation-key="shared.button.search">
           
  <div class="sft-text">
     Search
  </div>
</span>

Avainluokat tässä ovat:

• sft-lang-en tai sft-lang-sv: Kieli.
• sft-trans-key-shared-button-search Käännöksen avain "Haku"-painikkeelle.
• sft-text: Alkuperäisen tekstin säiliö.

2. Lisää CSS ohittamaan otsikko

Käytä seuraavaa CSS:ää piilottaaksesi alkuperäisen otsikon ja lisätäksesi uuden sen sijaan, että se perustuu kieleen:

.sft-lang-en.sft-trans-key-shared-button-search .sft-text,
.sft-lang-sv.sft-trans-key-shared-button-search .sft-text {
 display: none !important;
}

.sft-lang-en.sft-trans-key-shared-button-search::after {
 content: "My button title";
}

.sft-lang-sv.sft-trans-key-shared-button-search::after {
 content: "Min knapptitel";
}

3. Käytä samaa tekniikkaa muualla

Voit käyttää tätä samaa lähestymistapaa muuttaaksesi mitä tahansa muuta otsikkoa tai tekstielementtiä varausmoottorissa, joka käyttää sirvoy-flexible-text -luokkaa. Tutki vain elementtiä, tunnista sen kieli ja käännöksen avainluokat, ja käytä samanlaista CSS:ää.