Broadcast’i ithal ettiğiniz için teşekkürler 🙂
Yayın, özel stiller sağlamak için bazı CSS’lerle birlikte öncelikle GP’nin harika yerleşik özellikleri kullanılarak oluşturulmuştur.
Aşağıdaki bölümler, sitenin nasıl oluşturulduğuna ve bazı potansiyel değişikliklere ilişkin hızlı bir genel bakış sunmaktadır. Aşağıda belirtilen tüm CSS, özelleştiricideki Ek CSS alanında bulunabilir.
Üstbilgi/Navigasyon
Başlık/navigasyon, özelleştirici seçenekleri kullanılarak basitçe oluşturulur. Bunları özelleştiricideki Site Kimliği, Birincil Navigasyon ve Yapışkan Navig asyon bölümlerinde değiştirebilirsiniz.
Başlık Öğesi/Sayfa Kahramanı
Birincil navigasyonun altındaki bölüm Header Element modülü kullanılarak oluşturulur. 4 başlık öğesini şurada bulabilirsiniz
Görünüm > Elemanları: Sayfa kahramanı, Arşiv kahramanı, Yazılar kahramanı ve Ana Sayfa kahramanı.
CSS, <h2> ve <p> öğeleri için benzersiz bir kap genişliği, degrade arka plan ve stiller sağlamak için kullanılır:
/* 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;
}Bu site, gradyanı istediğiniz gibi ayarlamak için mükemmel bir kaynaktır: https://cssgradient.io/.
Genel Konteyner
Aşağıdaki CSS, yukarıdaki başlık öğesiyle birleştirmeyi içeren ana kapsayıcıyı biçimlendirmek için kullanılır.
/* 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);
}Gönderiler Listesi
Ana sayfa gönderi listesi Blog modülümüz kullanılarak değiştirilebilir.
İşte onları şekillendirmek için kullanılan CSS:
/* 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;
}Kenar Çubuğu
Recent Posts Widget With Thumbnails eklentisi sol kenar çubuğu widget alanında tekli gönderilerde son gönderileri göstermek için kullanılır.
İlk kenar çubuğu widget’ı aşağıdaki CSS ile renklendirilmiştir:
/* Sidebar styles */
.sidebar .widget:first-child {
background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}