Bagikan melalui

Tutorial: Menambahkan CSS kustom ke situs Anda

  • Artikel

Ruang kerja Gaya memungkinkan Anda mengedit beberapa fitur tema di situs, seperti font dan warna; namun, Anda dapat menerapkan tema CSS kustom Anda sendiri.

Anda dapat membuat tema sendiri dengan mendefinisikan file kustom CSS dan mengunggahnya ke situs Anda.

Dalam tutorial ini, Anda akan mempelajari cara:

  • Unggah file CSS kustom
  • Edit CSS di Visual Studio Code untuk Web

Prasyarat

Catatan

Setiap tema kustom yang Anda buat harus kompatibel dengan Bootstrap v3.

Tambahkan CSS kustom ke situs Anda

Video berikut menunjukkan cara menerapkan kode CSS kustom ke situs Anda.

Di contoh ini, kami akan menambahkan beberapa file CSS kustom yang akan memungkinkan kita menambahkan efek bayang-bayang ke tombol di situs web kami. Anda dapat menggunakan file CSS kustom Anda sendiri atau menggunakan sampel yang diberikan.

  1. Untuk membuat sampel, di editor CSS favorit Anda, buat file tema kustom button_shadow.css dan simpan.

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

  2. Tuju Power Pages.

  3. Pilih situs yang akan ditambahkan tema kustom, lalu pilih Edit.

  4. Buka ruang kerja Gaya.

  5. Pilih tema dan pilih ... elipsis, lalu pilih Kelola CSS.

    Buka panel kelola CSS dari ruang kerja gaya.

  6. Di bagian Kustom CSS , pilih Unggah dan pilih file CSSkustom Anda. Anda hanya dapat mengunggah satu file CSS sekaligus, namun beberapa file dapat diunggah. Jika beberapa file CSS memperbarui atribut yang sama, atribut di file CSS di bagian bawah daftar akan diterapkan. Anda dapat menyesuaikan urutan file CSS kustom Anda.

  7. Anda harus segera melihat hasil pembaruan pada kanvas halaman.

    Efek bayang tombol dari file CSS yang diunggah.

  8. Anda dapat menonaktifkan atau memindahkan urutan file CSS kustom Anda. File yang terdaftar terakhir akan lebih didahulukan dari yang lain.

    Nonaktifkan atau pindahkan urutan file CSS.

  9. Anda dapat mengedit file CSS secara langsung dengan memilih elipsis (...) dan kemudian memilih Edit kode. Langkah ini akan membuka editor Visual Code for the Web. Pilih CTRL-S untuk menyimpan perubahan.

    Edit di CSS di Visual Studio Code for the Web.

  10. Pilih Sinkronisasi di studio desain untuk memperbarui CSS dan melihat perubahan.

  11. Pilih Pratinjau untuk melihat tema kustom di situs Anda.

Catatan

Untuk benar-benar menghilangkan tema kustom, hapus rekaman file web dalam aplikasi Manajemen Portal.