Terima kasih kerana mengimport Siaran 🙂
Siaran dibina terutamanya menggunakan ciri terbina dalam hebat GP dengan beberapa CSS untuk menyediakan gaya tersuai.
Bahagian di bawah memberikan gambaran ringkas tentang cara tapak dibina dan beberapa pengubahsuaian yang berpotensi. Semua CSS yang dinyatakan di bawah boleh didapati dalam medan CSS Tambahan dalam penyesuai.
Pengepala/Navigasi
Pengepala/navigasi hanya dibuat menggunakan pilihan penyesuai. Anda boleh mengubah suainya dalam bahagian Identiti Tapak , Navigasi Utama dan Navigasi Melekit dalam penyesuai.
Elemen Pengepala/Wira Halaman
Bahagian di bawah navigasi utama dibuat menggunakan modul Elemen Pengepala . Anda boleh menemui 4 elemen pengepala dalam
Penampilan> Elemen: Wira halaman , Wira Arkib , Wira siaran dan wira Home .
CSS digunakan untuk menyediakan lebar bekas yang unik, latar belakang kecerunan dan gaya untuk<h2> dan<p> elemen:
/* Page hero styles */
.page-hero.gradient {
background-image: linear-gradient( 145deg, transparent 0%, rgba(255,255,255, 0.5) 100%);
max-width: 1440px;
margin: auto;
}
.inside-page-hero h2 {
font-size: 40px;
}
.inside-page-hero p {
font-size: 20px;
}Tapak ini merupakan sumber yang sangat baik untuk mengubah suai kecerunan mengikut keinginan anda: https://cssgradient.io/ .
Bekas Am
CSS berikut digunakan untuk menggayakan bekas utama, termasuk penggabungan dengan elemen pengepala di atas.
/* Main container styles */
.separate-containers .page-hero + #page .site-main {
margin-top: -80px !important;
}
@media (max-width: 768px) {
body .site.grid-container {
margin-left: 20px;
margin-right: 20px;
}
}
.site-content .inside-article, .sidebar .widget, .comments-area {
box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
}Senarai Catatan
Senarai siaran halaman utama boleh diubah suai menggunakan modul Blog kami.
Berikut ialah CSS yang digunakan untuk menggayakannya:
/* Posts grid styles */
@media (min-width: 769px) {
.generate-columns .inside-article {
transition: all 0.2s ease-in;
transform: scale(1);
}
.generate-columns .inside-article:hover {
transform: scale(1.01);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
p.read-more-container {
opacity: 0;
transition: all 0.3s ease-in-out;
}
.generate-columns .inside-article:hover p.read-more-container {
opacity: 1;
}
}
.generate-columns .inside-article {
display: flex;
flex-direction: column;
border-radius: 3px;
}
.generate-columns .inside-article .entry-summary {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.entry-summary p:not(.read-more-container) {
display: none;
}
.read-more-container {
margin-top: auto;
text-align: center;
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
border-width: 1px;
border-style: solid;
border-color: inherit;
border-radius: 3px;
}
.blog footer.entry-meta, .archive footer.entry-meta {
margin-top: 0;
}Bar sisi
Pemalam Widget Catatan Terkini Dengan Imej Kecil digunakan dalam kawasan widget bar sisi kiri untuk menunjukkan catatan terkini dalam catatan tunggal .
Widget bar sisi pertama diwarnakan dengan CSS ini di bawah:
/* Sidebar styles */
.sidebar .widget:first-child {
background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}