• Merhaba Sitemizi Smf den Xenforoya taşıdık bundan dolayı şifrenizi güncellemeniz gerek verdiğimiz rahatsızlıktan dolayı özür dileriz webtiryaki team.

Smf 2.0 Karanlık Mod Özelliği

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
443
Puanları
28
Konum
Almanya
Web sitesi
webtiryaki.com
Son zamanlarda popüler bir uygulama ben de smf temalarıma kullanabiliyorum isteyen kendi temasına uygulaya bilir ben defult tema için anlatayım

tema css kilasorune siyah diye bir css oluşturun teman izin index-templete.php sini açın şunu bulun
Kod:
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
altına ekleyin

Kod:
<link rel="stylesheet" href="', $settings['theme_url'], '/css/siyah.css" />

Bulun
Kod:
// Here comes the JavaScript bits!
 echo '
Sonrasına ekleyin

Kod:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

index-templete.php de

Bulun
Kod:
}

 echo '
 </ul>

sonrasına ekleyin
Kod:
<ul class="p-nav-opposite">
 <li class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="darkSwitch">
            <label class="custom-control-label" for="darkSwitch"></label>
          </li>
        </ul>
temanizin scripts kilasorunden theme.js yi acin bulun

Kod:
// Add hover events to list items if the browser requires it.
if (is_ie7down && 'attachEvent' in window)
 window.attachEvent('onload', smf_addListItemHoverEvents);

üstüne ekleyin

Kod:
$(function() {
  var darkSwitch = document.getElementById("darkSwitch");
  if (darkSwitch) {
    initTheme();
    darkSwitch.addEventListener("change", function(event) {
      resetTheme();
    });
    function initTheme() {
      var darkThemeSelected =
        localStorage.getItem("darkSwitch") !== null &&
        localStorage.getItem("darkSwitch") === "dark";
      darkSwitch.checked = darkThemeSelected;
      darkThemeSelected
        ? document.body.setAttribute("data-theme", "dark")
        : document.body.removeAttribute("data-theme");
    }
    function resetTheme() {
      if (darkSwitch.checked) {
        document.body.setAttribute("data-theme", "dark");
        localStorage.setItem("darkSwitch", "dark");
      } else {
        document.body.removeAttribute("data-theme");
        localStorage.removeItem("darkSwitch");
      }
    }
  }
});

şimdi css kilasorunden siyah.css dosyam izi acalim bu kodları ekleyelim

Kod:
#main_menu .p-nav-opposite {
    cursor: pointer;
    position: relative;
    right: 0px;
    top: 50%;
    height: 30px;
    line-height: 30px;
    margin-top: -20px;
    color: #fff;
    z-index: 20;
    font-size: 12px;
    border-radius: 4px;
}

.custom-switch {
    padding-left: 2.25rem;
}
.p-nav-opposite {
    margin-left: auto;
    margin-right: 10px;
    text-align: right;
    flex-shrink: 0;
}

input[type="radio"], input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}
.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.custom-control-label {
    position: relative;
    cursor: pointer;
}
label {
    display: inline-block;
    margin-bottom: 0.5rem;
}
.custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 1.85rem;
    pointer-events: all;
    border-radius: 0.5rem;
}
.custom-switch .custom-control-label::after {
    top: calc(0.36rem + -3px);
    left: calc(-2.2rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #f6f6f6;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
.custom-control-label::after {
    position: absolute;
    top: 0.1rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50% / 50% 50%;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #4d90fe;
    background-color: #4d90fe;
}
.custom-control-label::before, .custom-file-label, .custom-select {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.custom-control-label::before {
    position: absolute;
    top: -1px;
    left: -1.5rem;
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    pointer-events: none;
    content: "";
    background-color: #4DB7FE;
    border: #808285 solid 1px;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    -webkit-transform: translateX(0.75rem);
    transform: translateX(0.75rem);
}

[data-theme="dark"] {
  background: #161622 !important;
  color: #eee;
}

[data-theme="dark"] .bg-light {
  background: #333 !important;
}

[data-theme="dark"] .bg-white {
  background: #000 !important;
}

[data-theme="dark"] .bg-black {
  background: #eee !important;
}
[data-theme="dark"] #main {
    background: #161622;
}

Ben sadece Temanin arka background rengini değiştirmeyi gösterdim her tema farklılık gösterir siz ona göre düzenleyin

Demo


 
Katılım
11 Ara 2018
Mesajlar
15
Puanları
1
Web sitesi
www.medeniyetmuhendisleri.com
İyi günler orhan hocam. Kendi sitem için bir index.css dosyası oluşturdum. koyu moda geçerken bu index dosyasını kullanmasını istiyorum. ama beceremedim. css dosyam ekte

index temlate ve theme.js dosyalarında belirtilen düzeltmeleri yaptım.
 

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
443
Puanları
28
Konum
Almanya
Web sitesi
webtiryaki.com
Merhaba sanirim NightBreeze Theme kulaniyorsunuz ben defulta baska bir steyle css olmadigi icin ayri bir sitil dosyasi olusturun dedim sizin kulandiginiz temada cok fazla sitil dosyasi var haliyle yeni bir dosyaya gerek yok temanizin responsive.css dosyasini acin css kodlarini ekleyin simdi sizin kulandiginiz tema siyah bir tema sizin temanizin arka alan renk kodu bu

Kod:
body {
    background: #010714;
    font: 78%/130% Roboto,Verdana,Arial,Helvetica,sans-serif;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

yapmaniz gereken

Kod:
[data-theme="dark"] body {
    background: #fff;
}

dikat edin kodun basina [data-theme="dark"] kodunu ekledik

örnek windowbg kodunuz bu

Kod:
.windowbg, #preview_body {
    color: #a4a4a4;
    background-color: #1c2432;
}

yapmamiz gereken

Kod:
[data-theme="dark"] .windowbg, [data-theme="dark"] #preview_body {
    color: #000;
    background-color: #fff;
}

yazimda cok sayida cümle hatasi var ingilizce aypet kulaniyorum cevirme sansim yok.
 
Üst Alt