Smf Temaya Çoklu Renk Ekleme

[tekyürek]

indextempalde bul

Kod Seç Genişlet


/**

 * This shows any deferred JavaScript and closes out the HTML

 */

function template_html_below()


degiştir

Kod Seç Genişlet

/**

 * 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 Seç Genişlet

function template_init()

{

    global $settings, $txt;


altına ekle

Kod Seç Genişlet

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








inde.css en sona ekle :)

Kod Seç Genişlet


.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;

}

[member=1026][/member]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);

  }

}

[member=1026][/member]-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
Bu bölümdeki eklentileri göremezsiniz.Bu bölümdeki eklentileri göremezsiniz.