Edit CSS untuk tema

2023-08-04

Catatan

Mulai Oktober 2022, portal Power Apps menjadi Power Pages.
Mulai 26 Februari 2024, Studio portal Power Apps lama akan dihentikan. Anda dapat menggunakan Power Pages studio desain untuk mengedit situs web Anda. Informasi selengkapnya: Studio portal Power Apps akan dihentikan
Topik ini berlaku untuk kemampuan lama. Untuk informasi terbaru, buka Dokumentasi Microsoft Power Pages.

Lembar gaya kaskade (CSS) memungkinkan Anda mengontrol pemformatan situs web Anda. Per default, bootstrap.min.css dan theme.css files tersedia. Anda dapat mengedit file CSS yang ada dan mengunggah file CSS baru. Bila Anda mengunggah file CSS baru, file tersebut akan tersedia sebagai file web di aplikasi manajemen portal.

Penting

Portal Power Apps didasarkan pada bootstrap 3.3. x dengan pengecualian portal aktivitas. Pengembang Portal tidak boleh mengganti bootstrap 3 dengan pustaka CSS lain karena beberapa skenario di portal Power Apps tergantung pada bootstrap. 3.3.x. Untuk informasi lebih lanjut, lihat memahami kerangka kerja Bootstrap dan bagian menyesuaikan Bootstrap pada artikel ini.

Buka editor CSS kode di

Untuk membuka editor CSS kode,edit portal untuk membukanya di Studio portal Power Apps .

Pilih Tema dari sisi kiri layar. Tema yang tersedia ditampilkan.
Pilih CSS yang diinginkan untuk membukanya di editor kode.
Edit kode dan simpan perubahan.

Unggah file baru CSS

Untuk mengunggah file baru,edit CSS portal untuk membukanya di Studio portal Power Apps .

Pilih Tema dari sisi kiri layar. Tema yang tersedia ditampilkan.
Pilih Unggah CSS kustom.
Telusuri lalu pilih file CSS untuk diunggah.

Menghapus file kustom CSS

File CSS disimpan sebagai file web.

Untuk menghilangkan file CSS, buka aplikasi Portal Management, lalu pilih File Web.
Cari rekaman file CSS. Anda harus memfilter nilai Nama dan Situs Web untuk menemukan rekaman yang benar.
Setelah rekaman file web dipilih, pilih Hapus.
Di Studio portal, pilih Sinkronisasi konfigurasi untuk menghapus perubahan gaya dari CSS kustom.

Memahami kerangka bootstrap

Bootstrap adalah kerangka front-end yang termasuk komponen CSS dan JavaScript untuk elemen antarmuka aplikasi web umum. Ini termasuk gaya untuk elemen-elemen navigasi, formulir, tombol, dan sistem tata letak grid responsif, yang memungkinkan layout situs untuk secara dinamis menyesuaikan perangkat dengan ukuran layar yang berbeda, seperti ponsel dan tablet. Dengan menggunakan sistem tata letak Bootstrap, Anda dapat mengembangkan satu situs yang menyajikan antarmuka yang sesuai untuk semua perangkat yang pelanggan Anda mungkin gunakan.

Template yang disertakan dengan portal diimplementasikan menggunakan komponen Bootstrap standar, dengan sedikit gaya kustom tambahan. Jadi bila Anda menerapkan template, Anda dapat mengambil keuntungan dari pilihan penyesuaian Bootstrap. Anda dapat dengan cepat menyesuaikan tema (font, warna, dan sebagainya), dan dengan cara yang diterapkan secara konsisten di seluruh portal.

Sesuaikan Bootstrap

Bootstrap mendukung kustomisasi, melalui serangkaian variabel. Anda dapat mengatur salah satu atau semua variabel ini ke nilai-nilai kustom, dan kemudian men-download versi kustom dari Bootstrap yang disusun berdasarkan nilai-nilai ini.

Kekuatan variabel Bootstrap adalah bahwa mereka tidak mendikte gaya satu elemen. Semua gaya dalam kerangka ini didasarkan pada dan berasal dari nilai-nilai ini. Contohnya, pertimbangkan variabel @font-size-base. Ini menentukan ukuran yang ditetapkan Bootstrap ke teks tubuh normal. Namun, Bootstrap juga menggunakan variabel ini untuk menunjukkan ukuran font untuk judul dan elemen lainnya. Ukuran untuk elemen H1 dapat didefinisikan sebagai 300 persen ukuran @font-size-base. Dengan menetapkan satu variabel ini, Anda mengontrol skala tipografi seluruh portal Anda dengan cara yang konsisten. Demikian pula, variabel @link-color mengontrol warna hyperlink. Warna yang Anda tetapkan ke nilai ini, Bootstrap akan menentukan warna kursor untuk link sebagai 15 persen gelap daripada nilai kustom Anda.

Cara standar untuk menciptakan versi lain dari Bootstrap adalah melalui situs resmi Bootstrap. Namun, karena popularitas Bootstrap, banyak situs pihak ketiga juga telah diciptakan untuk tujuan ini. Situs ini mungkin menyediakan antarmuka yang mudah digunakan untuk kustomisasi Bootstrap, atau versi pra-desain Bootstrap untuk Anda download. Situs penyesuai Bootstrap resmi memiliki informasi lebih lanjut tentang penyesuaian Bootstrap.

Bila Anda men-download versi yang disesuaikan dari Bootstrap, versi itu berisi struktur direktori berikut.

css/
    |-- bootstrap.min.css 
img/
    |-- glyphicons-halflings-white.png 
    |-- glyphicons-halflings.png 
js/ 
    |-- bootstrap.min.js

Atau, tergantung pada aplikasi customizer yang digunakan, itu mungkin hanya berisi bootstrap.min.css. Terlepas dari itu, bootstrap.min.css adalah file yang berisi penyesuaian. Berkas yang lain adalah sama untuk semua versi kustom Bootstrap, dan sudah termasuk dalam portal Anda.

Bagikan melalui