Webtiryaki : Webmaster Forumu f1wm.net' Kod Forumu - Kodlama Yolculuğunuzun Başladığı Yer
×

Mod Smf Temaya Çoklu Renk Ekleme

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

Cms Mod
cakal

cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
517
Tepkime puanı
168
Puanları
43
Konum
izmir
Basliktada belirtiğim gibi temanıza çoklu renk ekler

index.template.php

Bulun

PHP: 
// The version this template/theme is for. This should probably be the version of SMF it was created for.
    $settings['theme_version'] = '2.1';

Sonrasına Ekleyin

PHP: 
/* Define the Theme variants. */
    $settings['theme_variants'] = array('teal', 'kaki', 'brown', 'pink');

Burda ki
teal
kaki
brown
pink

Renklerini hangi renk istiyorsanız onunla değişin

Bu kodları index.template.php üyelerinizin renk seçe bilmeleri icin nerde gözükmesini istiyorsanız oraya ekleyin

PHP: 
<div id="bg_switcher">
                    <a class="teal" href="', $scripturl, '?variant=teal" title="">', $txt['style_teal'], '</a>
                    <a class="kaki" href="', $scripturl, '?variant=kaki" title="">', $txt['style_kaki'], '</a>
                    <a class="brown" href="', $scripturl, '?variant=brown" title="">', $txt['style_brown'], '</a>
                    <a class="pink" href="', $scripturl, '?variant=pink" title="">', $txt['style_pink'], '</a>       
                </div>

index.css dosyasına bu kodu ekleyin

CSS: 
#bg_switcher { position: absolute; right: 15px; top: 18px;}
#bg_switcher a { display: inline-block; width: 11px; height: 11px; text-indent: -9999px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden;}
#bg_switcher .teal { background: #355d73;}
#bg_switcher .kaki { background: #556a3e;}
#bg_switcher .brown { background: #6f4f42;}
#bg_switcher .pink { background: #84486f;}

temanızın dil dosyasına bunu ekleyin

Kod: 
$txt['style_teal'] = 'Teal';
$txt['style_kaki'] = 'Kaki';
$txt['style_brown'] = 'Brown';
$txt['style_pink'] = 'Pink';

ayni isimlerle css dosyası oluşturan
ben ekte oluşturdum sizin için

Sonuç





smf-renk.jpg
 

Ekli dosyalar

  • css.zip
    841 bayt · Görüntüleme: 0
indextempalde bul
Kod: 
/**
 * This shows any deferred JavaScript and closes out the HTML
 */
function template_html_below()

degiştir
Kod: 
/**
 * This shows any deferred JavaScript and closes out the HTML
 */
function template_html_below()
{
global $settings;

if(empty($settings['disable_user_variant'])){
echo'<svg class="grovmenu">
    <defs>
    <filter id="filt"><feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
    <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="filt" />
   <feBlend in2="filt" in="SourceGraphic" result="mix" /></filter></defs>
   </svg>
  <div class="wrap">
 <input type="checkbox" id="checking" style="display:none;" />
 <a class="blob" href="?variant=default"><span class="main_icons current_theme"></span></a>
 <a class="blob" href="?variant=blue"><span class="main_icons current_theme"></span></a>
 <a class="blob" href="?variant=black"><span class="main_icons current_theme"></span></a>
 <a class="blob" href="?variant=burgundy"><span class="main_icons current_theme"></span></a>
 <a class="blob" href="?variant=yellow"><span class="main_icons current_theme"></span></a>
 <label class="blob" for="checking">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span></label>
 </div>';
}

bul
Kod: 
function template_init()
{
    global $settings, $txt;

altına ekle


Kod: 
$settings['theme_variants'] = array('default', 'blue', 'black', 'burgundy', 'yellow');




inde.css en sona ekle :)

Kod: 
.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: #f8f9fc;
  border-bottom: 1px solid #e3e6f0;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e3e6f0;
  border-radius: 0.35rem;
  z-index: 0;
}
.bar {
  display: block;
  width: 18px;
  height: 5px;
  margin: 5px auto;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.4s linear 0.1s;
  -webkit-transition: all 0.4s linear 0.1s;
  -moz-transition: all 0.4s linear 0.1s;
  -o-transition: all 0.4s linear 0.1s;
  -ms-transition: all 0.4s linear 0.1s;
}
.bar:first-child {
  margin-top: 4px;
}
.wrap {
  position: fixed;
  bottom: 50px;
  right: 60px;
  filter: url("#filt");
  -webkit-filter: url("#filt");
  z-index: 1030;
}
.wrap .blob {
  display: block;
  cursor: pointer;
  border: none;
  outline: none;
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 0% 50% 50% 50%;
  z-index: 10;
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;
  -moz-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;
  -o-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;
  -ms-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;
  -webkit-border-radius: 0% 50% 50% 50%;
  -moz-border-radius: 0% 50% 50% 50%;
  -ms-border-radius: 0% 50% 50% 50%;
  -o-border-radius: 0% 50% 50% 50%;
}
.wrap .blob {background-color: #4e95b7;}

.wrap .blob[for="checking"] {
  z-index: 30;
  font-size: 24px;
  text-align: center;
  color: #fff;
  transition: transform 0.5s ease-in-out 0.2s;
  -webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;
  -moz-transition: transform 0.5s ease-in-out 0.2s;
  -o-transition: transform 0.5s ease-in-out 0.2s;
  -ms-transition: transform 0.5s ease-in-out 0.2s;
}
.wrap .blob:not([for="checking"]) {
  width: 36px;
  height: 36px;
  top: 0;
  left: 0;
  font-size: 30px;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
}
.wrap .blob:not([for="checking"]):hover {
  color: rgb(244, 67, 54);
  animation: harlem 0.5s linear forwards;
  -webkit-animation: harlem 0.5s linear forwards;
  -moz-animation: harlem 0.5s linear forwards;
  -o-animation: harlem 0.5s linear forwards;
  -ms-animation: harlem 0.5s linear forwards;
}

.wrap > #checking:checked ~ .blob:nth-child(2) {
  margin-top: -99px;
  margin-left: 6px;
  background-color: rgb(70, 124, 172);
}
.wrap > #checking:checked ~ .blob:nth-child(3) {
  margin-top: -91px;
  margin-left: -33px;
  background-color: rgb(4, 144, 234);
}

.wrap > #checking:checked ~ .blob:nth-child(4) {
  margin-top: -66px;
  margin-left: -66px;
  background-color: rgb(42, 45, 42);
}
.wrap > #checking:checked ~ .blob:nth-child(5) {
  margin-top: -33px;
  margin-left: -90px;
  background-color: rgb(234, 47, 4);
}
.wrap > #checking:checked ~ .blob:nth-child(6) {
  margin-top: 10px;
  margin-left: -90px;
  background-color: rgb(215, 157, 48);
}
.wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1) {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  margin-top: 14px;
}
.wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2) {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  margin-top: -10px;
}
.wrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(3) {
  opacity: 0;
}
.blob .main_icons {
  margin: 8px 0px 0px 12px;
}
.grovmenu {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
@keyframes harlem {
  0% {
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -o-transform: translate(0);
    -ms-transform: translate(0);
  }
  25% {
    transform: translate(5px, 5px);
    -webkit-transform: translate(5px, 5px);
    -moz-transform: translate(5px, 5px);
    -o-transform: translate(5px, 5px);
    -ms-transform: translate(5px, 5px);
  }
  50% {
    transform: translate(-5px, -5px);
    -webkit-transform: translate(-5px, -5px);
    -moz-transform: translate(-5px, -5px);
    -o-transform: translate(-5px, -5px);
    -ms-transform: translate(-5px, -5px);
  }
  75% {
    transform: translate(2px, 2px);
    -webkit-transform: translate(2px, 2px);
    -moz-transform: translate(2px, 2px);
    -o-transform: translate(2px, 2px);
    -ms-transform: translate(2px, 2px);
  }
  100% {
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -o-transform: translate(0);
    -ms-transform: translate(0);
  }
}
@-webkit-keyframes harlem {
  0% {
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -o-transform: translate(0);
    -ms-transform: translate(0);
  }
  25% {
    transform: translate(5px, 5px);
    -webkit-transform: translate(5px, 5px);
    -moz-transform: translate(5px, 5px);
    -o-transform: translate(5px, 5px);
    -ms-transform: translate(5px, 5px);
  }
  50% {
    transform: translate(-5px, -5px);
    -webkit-transform: translate(-5px, -5px);
    -moz-transform: translate(-5px, -5px);
    -o-transform: translate(-5px, -5px);
    -ms-transform: translate(-5px, -5px);
  }
  75% {
    transform: translate(2px, 2px);
    -webkit-transform: translate(2px, 2px);
    -moz-transform: translate(2px, 2px);
    -o-transform: translate(2px, 2px);
    -ms-transform: translate(2px, 2px);
  }
  100% {
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -o-transform: translate(0);
    -ms-transform: translate(0);
  }
}


ekteki dosyası zipten çıkarıp css içine atın
 

Ekli dosyalar

  • css.zip
    38.5 KB · Görüntüleme: 0
  • Screenshot 2024-01-07 at 20-38-33 Benim Topluluğum - Anasayfa.png
    Screenshot 2024-01-07 at 20-38-33 Benim Topluluğum - Anasayfa.png
    16.8 KB · Görüntüleme: 3
Cevap yazmak için giriş yap yada kayıt ol.
Geri
Üst Alt