Sidebar rengini nasıl değiştireceğim?

  • Konuyu başlatan eth
  • Başlangıç Tarihi
  • Mesaj 3
  • Görüntüleme 868

eth

Hectopat
Katılım
19 Nisan 2020
Mesajlar
3.354
Makaleler
2
Çözümler
9
Proje üstünden front-end öğrenmeye çalışıyorum. Sidebar rengini değiştiremedim. Style etiketi içine color: #1B1b1D; yazdığımda değişmiyor ama class etiketi içine W3-red vs. yazdığımda oluyor ama #1B1B1D şeklinde yazığımda olmuyor. Bu durumu nasıl çözebilirim?

Kod:
<nav class="w3-sidebar w3-collapse w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
<div class="w3-container">
<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">
<i class="fa fa-remove"></i>
</a>
<img src="images/urun.jpg" style="width:100%;" class="w3-round"><br><br>
<h4><b>deneme</b></h4>
</div>
<div class="w3-bar-block">
<a href="#portfolio" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-th-large fa-fw w3-margin-right"></i>Ürünler</a>
<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-user fa-fw w3-margin-right"></i>Hakkımızda</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-envelope fa-fw w3-margin-right"></i>İletişim</a>
</div>
<div class="w3-panel w3-large">
<i class="fa fa-facebook-official w3-hover-opacity" title="Çok yakında..."></i>
<i class="fa fa-instagram w3-hover-opacity" title="Çok yakında..."></i>
<i class="fa fa-pinterest-p w3-hover-opacity" title="Çok yakında..."></i>
</div>
</nav>
 
Son düzenleyen: Moderatör:
Proje üstünden front-end öğrenmeye çalışıyorum. Sidebar rengini değiştiremedim. Style etiketi içine color: #1B1b1D; yazdığımda değişmiyor ama class etiketi içine W3-red vs. yazdığımda oluyor ama #1B1B1D şeklinde yazığımda olmuyor. Bu durumu nasıl çözebilirim?

Kod:
<nav class="w3-sidebar w3-collapse w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
<div class="w3-container">
<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">
<i class="fa fa-remove"></i>
</a>
<img src="images/urun.jpg" style="width:100%;" class="w3-round"><br><br>
<h4><b>deneme</b></h4>
</div>
<div class="w3-bar-block">
<a href="#portfolio" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-th-large fa-fw w3-margin-right"></i>Ürünler</a>
<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-user fa-fw w3-margin-right"></i>Hakkımızda</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-envelope fa-fw w3-margin-right"></i>İletişim</a>
</div>
<div class="w3-panel w3-large">
<i class="fa fa-facebook-official w3-hover-opacity" title="Çok yakında..."></i>
<i class="fa fa-instagram w3-hover-opacity" title="Çok yakında..."></i>
<i class="fa fa-pinterest-p w3-hover-opacity" title="Çok yakında..."></i>
</div>
</nav>

Color yazı rengini değiştirir background-color kullanmanız gerekmektedir. Birde kodlarınız çok karışık acilen kodlarınızı düzeltemeniz lazım semantic yazmayı öğrenebilirsiniz.
Color yazı rengini değiştirir background-color ise arka plan rengini değiştirmek için kullanmanız gerekmektedir. Bir de kodlarınız çok karışık acilen kodlarınızı düzeltemeniz lazım semantic yazmayı öğrenebilirsiniz.
 
Bahsettiğin class w3schools tarafından örnek için yazılan hazır kodlardan geldiği için renk verebiliyor. Senin rengi değiştirmen için CSS kullanman gerek. Bunun için de sidebar divine aşağıdaki attribute*yi eklemen lazım.

HTML:
style="background-color:renk_hex_kodu";

[*] Attribute: HTML etiketlerinin özelliklerini belirtmek için kullanılır. Örneğin aşağıdaki kodda class ve style bir attributedir.

HTML:
<div class="helloText" style="color:#f0f0f0;">
    <p>Selam, Dünya'dan merhaba!</p>
</div>
 

Geri
Yukarı