Luo, muokkaa ja liitä CSS-tiedostoja

Cascading Stylesheets (CSS) -tyylitiedostot ohjaavat sivustosi sivujen ulkoasua valitsemalla ja muotoilemalla sivun elementtejä. Suunnittelutyökalun avulla voit luoda uusia CSS-tiedostoja, muokata olemassa olevia tiedostoja ja liittää ne malleihin, tiettyihin sivuihin tai koko verkkotunnuksiin.

Jos haluat tehdä yksinkertaisia ulkoasun muutoksia tiettyyn sivuun, lue lisää sivun sisällön muokkaamisesta sisältöeditorissa. Jos käytät teemamallia, lue lisää teeman asetusten muokkaamisesta.

Luo uusi CSS-tiedosto

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta hakutoiminnossa vasemmassa yläkulmassa Tiedosto > Uusi tiedosto.
3. Napsauta valintaikkunassa avattavaa valikkoa ja valitse CSS + HubL. 
4. Napsauta Seuraava.
5. Kirjoita tiedoston nimi Tiedostonimi -kenttään.
6. Voit muuttaa tiedoston sijaintia napsauttamalla Muuta. Valitse ponnahdusikkunassa uusi tiedoston sijainti. 
7. Kun olet valmis, napsauta Luo.

Muokkaa CSS-tiedostoa

Kun olet luonut tai avannut olemassa olevan CSS-tiedoston, tee muokkaukset koodieditorissa. Tavallisen CSS:n lisäksi koodieditori tukee HubL-muuttujia ja makroja, jotka helpottavat CSS:n ylläpitoa.

Voit tarkastella luetteloa HubSpot-mallien tavallisista CSS-selektoreista kohdassa Boilerplate CSS.

1. { local.navDesignManager }}
2. Napsauta Finderissa Tiedosto > Uusi tiedosto tai avaa olemassa oleva CSS-tiedosto.
3. Syötä tai päivitä CSS-koodi k oodieditorissa haluamiesi muutosten tekemiseksi. 

Voit esikatsella HubL-koodin tulostusta napsauttamalla editorin yläosassa olevaa Näytä tulos -kytkintä. Oikealle avautuu paneeli, jossa näkyy esikatselu.

Tarkista virheet

Tarkista koodisi HubL-virheiden varalta ennen julkaisua. Virheet näkyvät alareunan konsolissa, vasemmalla olevassa virhepalkissa ja koodieditorin oikealla puolella olevassa vierityspalkissa.

Julkaisemista estävät virheet näkyvät punaisina, kun taas yleiset varoitukset näkyvät keltaisina. Napsauta koodieditorin alaosassa Näytä tiedot -painiketta, jos haluat nähdä lisätietoja virheistä virhekonsolissa, ja Piilota tiedot -painiketta, jos haluat piilottaa virhekonsolin.

Julkaise CSS-tiedosto

Kun olet muokannut CSS-tiedostoa, napsauta oikeassa yläkulmassa olevaa Julkaise muutokset -painiketta. Jos haluat kutsua tämän tyylitiedoston toisessa koodatussa mallissa, napsauta hakutoiminnon Toiminnot -pudotusvalikkoa ja valitse Kopioi julkinen URL-osoite. 

Liitä tyylitiedostot resursseihin

Liitä tyylitiedostot malleihisi, yksittäisille sivuille tai koko verkkotunnukseen. Tyylitiedostot sovelletaan tietyssä järjestyksessä sen mukaan, mihin ne on liitetty. Alla oleva luettelo kuvaa järjestystä, jossa ne sovelletaan sivustollasi:

1. public_common.css (vaaditaan): tyylitiedosto, jota käytetään pääasiassa HubSpotin sovelluksessa, mutta myös tietyissä sivuston ominaisuuksissa.
2. Otsikon HTML: linkkitunnisteet, jotka on lisätty sivustosi yleiseen <head> -osaan kohdassa Sisältö > Sivun asetukset.
3. Layout.css (vaaditaan vedä ja pudota -asetteluille): oletusarvoinen responsiivinen CSS-tiedosto, joka on liitetty kaikkiin vedä ja pudota -mallien asetteluun.
4. Liitetyt tyylitiedostot (Sivut): koko sivustollesi liitetyt tyylitiedostot kohdassa Sisältö > Sivun asetukset.
5. Liitetyt tyylitiedostot (Blogi): blogiisi liitetyt tyylitiedostot (korvaavat sivuston yleiset tyylitiedostot) kohdassa Sisältö > Blogin asetukset.
6. Linkitetyt tyylitiedostot(suositellaan mallipohjille): mallipohjaan liitetyt tyylitiedostot.
7. Lisämerkinnät <head>-tagissa mallissa: linkkitagit, jotka on lisätty tietyn mallipohjan <head> -tagiin.
8. Sivukohtaiset tyylitiedostot: sivun asetuksissa liitetyt tyylitiedostot.
9. Sivun otsikon HTML:linkkitagit, jotka on lisätty tietyn sivun <head> -osaan sivun asetuksissa.

Tyyliarkkien liittäminen malleihin

Tyyliarkit voidaan liittää vedä ja pudota -malleihin Design Managerin tarkastelutyökalussa. Koodattujen mallien kohdalla tyyliarkit lisätään suoraan koodieditoriin.

Vedä ja pudota -mallit

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta hakukoneessa vedä ja pudota -mallitiedoston nimeä.
3. Napsauta tarkastelutyökalussa Lisää- pudotusvalikkoa Liitetyt tyylitaulukot -osiossa ja valitse tyylitaulukko. Poista tyylitaulukko napsauttamalla X-painiketta.
4. Kun olet valmis, napsauta oikeassa yläkulmassa olevaa Julkaise muutokset -painiketta, jotta muutokset otetaan käyttöönmallia käyttävillä sivuilla.

Koodatut mallit

Koodattujen mallien tyylitiedostot liitetään suoraan koodieditorissa käyttämällä <link>-tunnisteita tai HubL-tunnistetta tiedoston <head> -osassa. Lisätietoja koodatuista malleista on kehittäjien ohjeissa.

Tyylitiedostojen liittäminen tiettyyn sivuun

Huomaa: tämävaihtoehto ei ole käytettävissä teemamalleissa. Lue, miten voit muokata teeman asetuksia.

Voit liittää sivukohtaisen tyylitiedoston sisältöeditorin asetusosiosta seuraavasti:

1. Siirry sisältöösi:

   • Verkkosivut: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Verkkosivuston sivut. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Verkkosivuston sivut.
   • Laskeutumissivut: Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Aloitussivut. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Aloitussivut.
2. Napsauta sivusi nimeä.
3. Napsauta sisältöeditorissaAsetukset-valikkoa ja valitse Lisäasetukset. 
4. Napsauta valintaikkunan Tyylitiedostot-osiossa Liitä tyylitiedosto -pudotusvalikkoa ja valitse tyylitiedosto. Voit poistaa tyylitiedoston napsauttamalla tyylitiedoston vieressä olevaa X-painiketta .
5. Voit poistaa käytöstä mallista tai verkkotunnuksesta perityt tyylitiedostot napsauttamalla tyylitiedoston vieressä olevaa avattavaa valikkoa ja valitsemallaPoista käytöstä.

Liitä verkkotunnuksen tyylitiedostot

Huomaa: teemamallienon sisällettävä merkintä enableDomainStylesheets: true, jotta verkkotason tyylitiedostoja voidaan käyttää. Lue lisää mallimerkinnöistä.

Tyylitiedoston liittäminen koko verkkotunnukseen:

1. Napsauta HubSpot-tilisi ylänavigointipalkin asetuskuvaketta.
2. Napsauta sivupalkin valikossa Sisältö > Sivut.
3. Napsauta avattavaa valikkoa ja valitse verkkotunnus , jonka asetuksia haluat päivittää.
4. Napsauta Mallit-välilehden CSS ja tyylitiedostot -osiossa + Lisää tyylitiedosto. Voit poistaa tyylitiedoston napsauttamalla liitetyn tyylitiedoston vieressä olevaa X-painiketta.
5. Napsauta Tallenna.

Huomaa: kun siirryt HubSpotin Starter-versioon tai ilmaisiin työkaluihin, liitetyt verkkotunnustason tyylitiedostot pysyvät aktiivisina, kunnes poistat ne. Kun kaikki tyylitiedostot on poistettu, et voi enää liittää tyylitiedostoja verkkotunnustasolla. Lue lisää tilauksen alennuksesta.