Membuat tema untuk portal

Ketika Anda membangun portal dengan kemampuan portal untuk dengan Microsoft Dynamics 365, Bootstrap Anda akan menggunakan Kerangka front-end. Dengan mengambil keuntungan dari ekosistem Bootstrap, Anda dapat dengan cepat dan mudah mencitrakan portal untuk organisasi Anda.

Menerapkan template portal dengan menggunakan 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 Dynamics 365 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 menyesuaikan tema (font, warna, dan sebagainya) dengan cepat, 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. Sebagai contoh, 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-colormengontrol 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 dapat menyediakan versi pra-desain Bootstrap untuk Anda download. Situs penyesuai Bootstrap resmi menyediakan informasi lebih lanjut tentang penyesuaian Bootstrap. Situs ini akan selalu yang paling up-to-date, tetapi saat ini tidak mencakup beberapa fitur UI seperti pemilih warna dan pratinjau langsung.

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 Dynamics 365 Anda.

Menerapkan tema Bootstrap kustom untuk website Anda

Setelah Anda memiliki bootstrap.min.css kustom, Anda dapat menerapkannya pada portal Anda dalam dua cara. Jika Anda seorang pengembang dan lebih memilih untuk bekerja secara langsung dengan kode sumber aplikasi Anda, Anda dapat menimpa versi bootstrap.min.css yang termasuk dalam sumber aplikasi Anda dengan versi kustom. Namun, dalam kebanyakan kasus, dianjurkan untuk menerapkan kustom tema Bootstrap Anda tanpa memodifikasi kode situs dengan meng-uploadnya sebagai file web di portal Dynamics 365 di sistem manajemen konten portal .

  1. Masuk ke aplikasi Anda sebagai pengguna dengan izin manajemen konten. Selengkapnya: Mengkonfigurasi web peran untuk PRM portal.
  2. Buka halaman Beranda aplikasi Anda.
  3. Pilih anak >Edit file ini (tombol pensil dan kertas) untuk bootstrap.min.css dari toolbar mengedit konten (ditemukan di sudut kanan atas jendela browser Anda).
  4. Pilih file bootstrap.min.css kustom Anda, menggunakan bidang Upload File di kotak dialog Edit File ini yang muncul.
  5. Pastikan bahwa bidang URL parsial diatur ke bootstrap.min.css. Nilai ini menunjukkan kepada kerangka portal Dynamics 365 bahwa ia seharusnya menggunakan versi kustom Bootstrap, bukan versi standar yang disertakan.
  6. Anda juga mungkin perlu memilih kotak centang tersembunyi dari Sitemap (dipilih secara default), sehingga file ini tidak muncul untuk pengguna di setiap elemen navigasi di situs.
  7. Simpan file.
  8. Refresh halaman Anda, dan gaya yang Anda disesuaikan akan segera muncul.

Gambar di bawah ini adalah contoh dari versi yang disesuaikan Bootstrap yang diterapkan ke portal Komunitas:

Terapkan sebuah tema bootstrap kustom ke situs web Anda

Pilihan tema portal tambahan

Selain versi kustom dari Bootstrap, portal Dynamics 365 mendukung meng-upload file CSS kustom Anda sendiri ke dalam sistem manajemen konten. Hal ini memungkinkan Anda menerapkan styling tambahan untuk portal Anda, tanpa harus menyebarkan versi baru dari kodenya. Untuk melakukannya, ikuti prosedur yang dijelaskan sebelumnya untuk meng-upload CSS Bootstrap kustom, dengan menggunakan file yang mengandung CSS Anda sendiri, lalu pilih URL parsial baru untuk file web ini. Selama URL parsial berakhir di .css, portal Dynamics 365 akan mengenalinya dan menerapkannya pada situs Anda.

Bersama dengan versi Bootstrap yang disesuaikan , Anda dapat menggunakan sistem mengedit konten untuk menambahkan logo dan merek kustom ke header portal Anda. Dengan pilihan sederhana namun kuat ini, Anda hanya beberapa menit dari memiliki aplikasi portal Dynamics 365 yang mencerminkan merek Anda.

Lihat juga

Terlibat dengan masyarakat dengan menggunakan portal komunitas
Konfigurasikan portal Dynamics 365