[ English | English (United Kingdom) | 中文 (简体, 中国) | Indonesia | русский | français | नेपाली | Deutsch | Esperanto | português (Brasil) | español | 한국어 (대한민국) ]

Branding Horizon

Pada rilis Liberty, Horizon telah mulai menyesuaikan lebih ketat dengan standar Bootstrap dalam upaya untuk merangkul desain web yang lebih responsif serta mengurangi kebutuhan masa depan untuk re-brand fungsi baru untuk setiap rilis.

Komponen yang Didukung

Komponen-komponen berikut, yang diatur oleh rilis, adalah satu-satunya yang memanfaatkan arsitektur tema Bootstrap sepenuhnya.

• 8.0.0 (Liberty)

  • Top Navbar

  • Side Nav

  • Pie Charts

• 9.0.0 (Mitaka)

  • Tables

  • Bar Charts

  • Login

  • Tabs

  • Alerts

  • Checkboxes

Step 1

Langkah pertama yang diperlukan untuk membuat tema bermerek khusus untuk Horizon adalah membuat tema Bootstrap khusus. Ada beberapa alat untuk membantu dalam hal ini. Beberapa yang lebih bermanfaat termasuk:

• Bootswatchr

• Paintstrap

• Bootstrap

Catatan

Bootstrap menggunakan LESS secara default, tetapi kami menggunakan SCSS. Semua alat di atas akan menyediakan file variable.less, yang perlu dikonversi ke _variables.scss

Top Navbar

Navbar teratas di Horizon sekarang menggunakan Bootstrap asli (native) navbar. Ada sejumlah variabel yang dapat digunakan untuk menyesuaikan elemen ini. Silakan lihat bagian Navbar dari file variabel Anda untuk spesifik tentang apa yang dapat diatur: variabel apa pun yang menggunakan navbar-default.

Penting juga untuk dicatat bahwa navbar sekarang menggunakan dropdown bawaan Bootstrap, yang dapat disesuaikan dengan variabel. Silakan lihat bagian Dropdowns dari file variabel Anda.

Navbar atas sekarang responsif pada layar yang lebih kecil. Ketika ukuran jendela menyentuh nilai $screen-sm` Anda, bar bagian atas akan memadatkan ke dalam desain yang lebih sesuai untuk layar kecil.

Side Nav

Komponen navigasi samping telah direfaktor menggunakan elemen Stacked Pills dari Bootstrap. Lihat bagian Pills dari file variabel Anda untuk variabel khusus untuk dikustomisasi.

Charts

Pie Charts

Pie Charts adalah elemen SVG. Elemen SVG memungkinkan penyesuaian CSS hanya untuk tampilan dan nuansa elemen dasar (yaitu warna, ukuran).

Karena tidak ada elemen asli di Bootstrap khusus untuk diagram lingkaran, tampilan dan nuansa diagram mewarisi dari elemen lain dari tema. Silakan lihat _pie_charts.scss untuk keterangan spesifik.

Bar Charts

Bar Charts bisa berupa Bootstrap Progress Bar atau elemen SVG. Implementasi akan menggunakan gaya Bootstrap Progress Bar.

Namun, penerapan SVG tidak akan menggunakan tinggi Progress Bar yang disesuaikan, jadi disarankan agar Bootstrap Progress Bars digunakan bilamana memungkinkan.

Silakan lihat _bar_charts.scss untuk spesifik tentang apa yang dapat dikustomisasi untuk SVG. Lihat bagian Progress bars dari file variabel Anda untuk variabel khusus yang akan disesuaikan.

Tables

Tabel Django standar sekarang menggunakan markup tabel Bootstrap asli. Lihat bagian Tabel dari variabel Anda file untuk variabel untuk menyesuaikan.

Tabel Bootstrap standar akan tanpa batas secara default. Jika Anda ingin menambahkan batasan, seperti tema default, lihat openstack_dashboard/themes/default/horizon/components/_tables.scss

Login

Login Splash Page

Halaman splash login sekarang menggunakan panel Bootstrap standar dalam implementasinya. Lihat bagian Panel dalam file variabel Anda ke variabel agar mudah disesuaikan.

Modal Login

Pengalaman login modal, seperti yang digunakan ketika berpindah daerah, menggunakan dialog Bootstrap standar. Lihat bagian Modals dari file variabel Anda untuk variabel khusus untuk dikustomisasi.

Tabs

Tab standar menggunakan markup tab Bootstrap asli.

Lihat bagian Tabs dari variabel Anda file untuk variabel untuk menyesuaikan.

Alerts

Lansiran (alerts) menggunakan warna merek Bootstrap dasar. Lihat bagian Colors* dari file variabel Anda untuk spesifik.

Checkboxes

Horizon menggunakan font ikon untuk mewakili kotak centang. Untuk menyesuaikan ini, Anda hanya perlu mengganti scss standar. Untuk contoh ini, lihat themes/material/static/horizon/components/_checkboxes.scss

Bootswatch dan Material Design

Bootswatch adalah kumpulan tema gratis untuk Bootstrap dan sekarang tersedia untuk digunakan di Horizon.

Untuk memamerkan apa yang dapat dilakukan untuk meningkatkan tema Bootstrap yang ada, Horizon sekarang menyertakan tema sekunder, kira-kira berdasarkan Desain Material Google yang disebut `` materi``. Bootswatch Paper adalah implementasi Bootstrap sederhana dari Material Design dan digunakan oleh materi.

Bootswatch menyediakan sejumlah tema lain, dimana setelah Horizon memenuhi tema sepenuhnya, akan memungkinkan pengalihan dan penyesuaian yang mudah untuk driven experience yang aksesibilitas atau lebih gelap.

Development Tips

Saat mengembangkan tema baru untuk Horizon, diperlukan bahwa direktori static yang dihasilkan secara dinamis akan dihapus setelah setiap perubahan dan server dimulai ulang. Ini tidak selalu ideal. Jika Anda ingin mengembangkan dan tidak perlu me-restart server setiap kali, disarankan agar Anda mengonfigurasi lingkungan pengembangan Anda agar tidak berjalan dalam mode OFFLINE. Cukup verifikasi pengaturan berikut di local_settings.py Anda:

COMPRESS_OFFLINE = False
COMPRESS_ENABLED = False