Flex-kortin tyyli

Määritä Flexcard-kortin ulkoasu muuttamalla yksittäisten elementtien tyyliä, elementtien kenttiä ja kokonaisia tiloja. Määritä taustat, teksti ja reunat, säädä ulottuvuuksia ja elementtien välilyöntejä, käytä luokkia ja upotettuja tyylejä, tee elementistäsi interaktiivisia ja paljon muuta.

1. Etsi ja avaa sovelluskäynnistimestä Flex-kortit.
2. Laajenna Flexcard ja valitse versio.
3. Deaktivoi Flexcard tarvittaessa Flexcard-kortin muokkaamista varten.
4. Valitse Tallentamasi mukautettu tyyli Tyyli-välilehdestä tai määritä tyyliasetukset tarvittaessa.
5. Tallenna asetuksesi uudelleenkäyttöä varten napsauttamalla Mukautettu tyyli -osiosta ja valitsemalla sitten Tallenna nimellä.

• Ehdollisten tyylien lisääminen Flexcard-elementtiin
  Näytä käyttäjillesi tärkeimmät tiedot käyttämällä Flexcard-elementtiin ehdollisesti tyylejä. Muuta tyyliominaisuuksia, kuten tekstin väriä, taustakuvaa ja interaktiivisuutta, kun datakentän arvon perusteella määritetty ehto täyttyy. Lisää esimerkiksi punainen reuna laskutuksen Flex-kortin ympärille, kun laskun tila on erääntynyt.
• Flexcard-elementtien ulottuvuuksien määrittäminen
  Määritä Flexcard-kortin mitat yrityksesi tai laitoksesi tyylin mukaan. Määritä Flexcard-elementtien korkeusominaisuudet käyttämällä CSS-arvoja. Ota reagointi käyttöön, jotta leveys säätyy dynaamisesti sivun näkyvään alueeseen. Laajenna esimerkiksi yhteyshenkilön etu- ja sukunimien kenttien leveyttä koko sivun leveydelle pienemmillä laitteilla. Voit myös parantaa käyttökokemusta rajoittamalla leveyden 50 %:iin suuremmilla laitteilla, kuten kannettavilla tietokoneilla ja pöytätietokoneilla.
• Mukautettujen CSS-luokkien luominen Flexcardille
  Laajenna esimääritettyjä tyylivaihtoehtoja luomalla mukautettuja CSS-luokkia koodieditorissa, kun määrität Flexcard-korttisi. Omnistudio tallentaa CSS-luokat Salesforce-liitteeseen joka kerta, kun tallennat Flexcard-kortin. Kun olet aktivoinut Flexcardin, Omnistudio lisää luotuun Lightning CSS-tiedoston. CSS-tiedosto on käytettävissä muille Flexcard-elementeille tai elementtien tukemille kentille.
• Mukautetun CSS:n soveltaminen Flexcard-kortille
  Käytä CSS-luokkia tyylisivuista, kuten globaali Salesforce Lightning Design System (SLDS) ja Newport. Voit myös käyttää luokkia, joita luot, kun rakennat Flexcard-korttiasi.
• Globaalien SLDS- tai Newport-tyylien korvaaminen
  Käytä omaa brändäystäsi korvaamalla Flexcardin globaalit SLDS. Jos Flexcard vaatii esimerkiksi tietyn ulkoasun useille komponenteille, luo mukautettuja SLDS ja lataa ne Flexcard-korttiisi staattisena resurssina. Suosittelemme käyttämään Tyyli-välilehdessä olevia asetuksia elementtien pienille tyylimuutoksille.

Flexcard-elementtien ulottuvuuksien määrittäminen

Määritä Flexcard-kortin mitat yrityksesi tai laitoksesi tyylin mukaan. Määritä Flexcard-elementtien korkeusominaisuudet käyttämällä CSS-arvoja. Ota reagointi käyttöön, jotta leveys säätyy dynaamisesti sivun näkyvään alueeseen. Laajenna esimerkiksi yhteyshenkilön etu- ja sukunimien kenttien leveyttä koko sivun leveydelle pienemmillä laitteilla. Voit myös parantaa käyttökokemusta rajoittamalla leveyden 50 %:iin suuremmilla laitteilla, kuten kannettavilla tietokoneilla ja pöytätietokoneilla.

1. Valitse elementti Flexcard-kortista.
2. Jos haluat määrittää oletusarvoisen kiinteän leveyden näkymäporttiin Tyyli-välilehdestä, säädä liukuohjainta tai vedä elementin reunaa esitysalueella.

   Elementin leveys on yksi tai 12 osaa 12-sarakkeisesta ruudukosta. Jos valitset esimerkiksi 6, elementti vie 50 % käytettävissä olevasta vaakasuorasta tilasta.

   

   Huomautus

   Voit säätää osavaltio-elementin ulottuvuuksia vain alitason kortissa ja käyttämällä liukuohjainta.

3. Ota tarvittaessa käyttöön Reagoi ja syötä kunkin näkymäportin leveys.

   Kun teet elementistä interaktiivisen, Omnistudio säätää elementin leveyttä pienimpään näkymän keskeytyskohtaan mobiililaitteilla käytettäväksi uutena oletusasetuksena.

4. Testaa tarvittaessa elementin interaktiivisuutta valitsemalla eri laitteet esitysalueen viewport-valintaluettelosta.
   

   

   Vihje

   Tunnista interaktiiviset elementit helposti siirtämällä kursorisi elementin ylle tai valitsemalla elementin. Reagoivat elementit näyttävät nimiensa vieressä esitysalueella.

Reagoiva aihe- ja CaseId-kenttäelementit

Jos käytät tiettyä tiliä, haluat näyttää Subject- ja CaseId-kenttäelementit vierekkäin keskisuurissa ja suurissa näkymäportaaleissa sekä pienissä ja pienissä näkymäportaaleissa.

Määritä Aihe-elementin ulottuvuudet näihin asetuksiin:

• Reagoiva: Käytössä

• Suuri ja keskikokoinen liukuohjain: 10

• Pienet ja pienet liukuohjaimet: 12

Määritä CaseId-elementin ulottuvuudet näihin asetuksiin:

• Reagoiva: Käytössä

• Suuri ja keskikokoinen liukuohjain: 2

• Pienet ja pienet liukuohjaimet: 12

Mukautettujen CSS-luokkien luominen Flexcardille

Laajenna esimääritettyjä tyylivaihtoehtoja luomalla mukautettuja CSS-luokkia koodieditorissa, kun määrität Flexcard-korttisi. Omnistudio tallentaa CSS-luokat Salesforce-liitteeseen joka kerta, kun tallennat Flexcard-kortin. Kun olet aktivoinut Flexcardin, Omnistudio lisää luotuun Lightning CSS-tiedoston. CSS-tiedosto on käytettävissä muille Flexcard-elementeille tai elementtien tukemille kentille.

Varoitus

Käytä mukautettua CSS-koodia varoen ja vältä kohdistamasta DOM-elementtejä komponentteihin, joita et omista. Komponentin sisäiseen rakenteeseen tehdyt muutokset saattavat rikkoa CSS-tyylisi. Salesforce saattaa päivittää komponenttien toteutuksia milloin tahansa eikä Salesforce-tuki voi auttaa mukautettujen CSS-ongelmien ratkaisemisessa.

1. Napsauta Flexcard-otsikosta ja valitse sitten Lisää mukautettu CSS.
2. Syötä mukautetut luokkasi.
3. Jos haluat ladata nämä tyylit tyylisivuna sivun yläpalkkiin, ota käyttöön Lataa globaaliksi CSS:ksi.

   Jos et tee niin, Omnistudio lataa tyylin vain Flexcard-kortin yläpalkissa.

4. Tallenna muutokset.

Mukautetun CSS:n soveltaminen Flexcard-kortille

Käytä CSS-luokkia tyylisivuista, kuten globaali Salesforce Lightning Design System (SLDS) ja Newport. Voit myös käyttää luokkia, joita luot, kun rakennat Flexcard-korttiasi.

1. Valitse elementti Flexcard-kortista.
2. Syötä Tyyli-välilehden Mukautettu CSS -osioon CSS-luokkien nimet tarvittaessa.
   

   Huomautus

   Upotetut CSS-tyylit korvaavat säiliöiden ja elementtien luokat.

3. Jos haluat soveltaa elementille mukautettua luokkaa, syötä CSS-luokka Ominaisuudet-paneeliin lisäluokaksi tai lisäluokaksi.

   Omnistudio tukee mukautettuja luokkia kuvakkeille, datataulukoille, kuville ja vaihtokytkimille.

Ryhmitetty datataulukkoelementti vaihtuvilla taustaväreillä

Datataulukko näyttää tilitapaukset ryhmitettynä tapauksen tyypin mukaan.

• Tekstiosan rivien taustavärien vaihtaminen ja toisen taustavärin määrittäminen ryhmän otsikolle:
  1. Luo nämä mukautetut CSS-luokat:

     • Päivättävä-elementin alt-table-rows

     • Ryhmän otsikon alt-bg-group-wrapper

     .alt-table-rows .tableRow:nth-child(even) {
         background:#cccccc;
     }
     
     .alt-table-rows .tableRow:nth-child(odd) {
         background:#ebebeb;
     }
     
     .alt-table-rows .alt-bg-group-wrapper.tableRow {
         background-color: #000000;
         color: #ffffff;
     }
     
     .branded-header {
         font-variant: small-caps;
         border-top: 1px dotted #8d1818;
         border-bottom: 1 px dotted #8d1818;
         padding: 1rem;
         color: #999999;
     }
     

  2. Kirjoita Tyyli-välilehden Mukautettu luokka -kenttään alt-table-rows.
  3. Syötä Ominaisuudet-kenttään alt-bg-group-wrapper lisäluokaksi tai lisäluokaksi.

Globaalien SLDS- tai Newport-tyylien korvaaminen

Käytä omaa brändäystäsi korvaamalla Flexcardin globaalit SLDS. Jos Flexcard vaatii esimerkiksi tietyn ulkoasun useille komponenteille, luo mukautettuja SLDS ja lataa ne Flexcard-korttiisi staattisena resurssina. Suosittelemme käyttämään Tyyli-välilehdessä olevia asetuksia elementtien pienille tyylimuutoksille.

Tärkeää

Mukautettujen Newport-tyylien lataaminen suoraan Flexcardille korvaa mukautetut globaalit Newport-tyylit.

1. Hae globaaleja tyylejä Flexcard-teemallesi:
   • SLDS: Lisätietoja on kohdassa Lightning Design -järjestelmän lataukset.
   • Newport (Uusi portti): Lisätietoja on kohdassa Globaalin brändäyksen soveltaminen Omniscripteihin.
2. Mukauta tyylejä tarvittaessa.

   Lisätietoja on kohdassa Lightning-sovellukset ja -komponentit.

3. Lataa mukautetut tyylit pakatusta tiedostosta staattisena resurssina.

   Lisätietoja on kohdassa Staattisen resurssin luominen.

4. Laajenna Määritykset-valikon Tyyliasetukset-osio ja syötä staattisen resurssin nimi.
   Lisätietoja on kohdassa Flexcard-asetusten määrittäminen.