Kongsi melalui

Tutorial: Tambahkan CSS tersuai pada tapak anda

  • Artikel

Ruang kerja penggayaan membolehkan anda mengedit beberapa ciri tema pada tapak anda, seperti fon dan warna; namun, anda boleh menggunakan tema CSS tersuai anda sendiri.

Anda boleh mencipta tema anda sendiri dengan mentakrifkan fail CSS tersuai dan memuat naik pada tapak anda.

Dalam tutorial ini, anda akan mengetahui cara:

  • Muat naik fail CSS tersuai
  • Edit CSS dalam Visual Studio Code untuk Web

Prasyarat

Nota

Sebarang tema tersuai yang anda cipta mesti serasi dengan Bootstrap v3.

Tambahkan CSS tersuai ke tapak anda

Video berikut menunjukkan cara untuk menggunakan kod CSS tersuai pada tapak anda.

Dalam contoh ini, kami akan menambah beberapa fail CSS tersuai yang akan membolehkan kami menambah kesan bayang pada butang pada tapak web kami. Anda boleh menggunakan fail CSS tersuai anda sendiri atau gunakan sampel yang disediakan.

  1. Untuk mencipta sampel, dalam editor CSS kegemaran anda, cipta fail tema tersuai button_shadow.css dan simpan.

    .button1 {
box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333;
 }

  2. Pergi ke Power Pages.

  3. Pilih tapak yang anda mahu tambah tema tersuai dan pilih Edit.

  4. Buka ruang kerja Penggayaan.

  5. Pilih tema dan pilih ... (elipsis), dan kemudian pilih Urus CSS.

    Buka panel urus CSS daripada ruang kerja Penggayaan.

  6. Dalam bahagian Sesuaikan CSS, pilih Muat naik dan pilih fail CSS tersuai anda. Anda hanya boleh memuat naik satu fail CSS pada satu masa, tetapi fail yang berbilang boleh dimuat naik. Jika berbilang fail CSS mengemas kini atribut yang sama, atribut dalam fail CSS di bahagian bawah senarai akan diguna pakai. Anda boleh melaraskan urutan fail CSS tersuai anda.

  7. Anda dapat melihat dengan serta-merta keputusan kemas kini pada kanvas halaman.

    Butang kesan bayang daripada fail CSS yang dimuat naik.

  8. Anda boleh menyahdayakan atau alihkan urutan fail CSS tersuai anda. Fail yang disenarai terakhir akan diutamakan daripada yang lain.

    Nyahdayakan atau alihkan urutan fail CSS.

  9. Anda boleh mengedit fail CSS secara langsung dengan memilih elipsis (...) dan kemudian memilih Edit kod. Langkah ini akan membuka editor Kod Visual untuk Web. Pilih CTRL-S untuk menyimpan perubahan anda.

    Edit fail CSS dalam Visual Studio Code untuk Web.

  10. Pilih Segerak dalam studio reka bentuk untuk mengemas kini CSS dan melihat perubahan.

  11. Pilih Pratonton untuk melihat tema tersuai pada tapak anda.

Nota

Untuk menghapuskan sepenuhnya tema tersuai, padamkan rekod fail web dalam aplikasi Pengurusan Portal.