Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!

Nasıl yapılır ? Xenforo Giriş Yap ve Kayıt Ol Buton Özelleştirmesi Nasıl Yapılır ?

Sis

xFanatik
SMS onaylı
Kullanıcı
Katılım
17 Nis 2018
Mesajlar
1,280
Çözümler
11
Aşağıdaki örnekte bulunan XF 2 butonun özelleştirmesini nasıl yapabilirim ?

1663494660420.png

Aşağıdaki örnekteki gibi birşey istiyorum. Bunu nasıl yapabilirim ? :)

Yeşil butonun üzerine maus ile gelince buton YEŞİL oluyor.
Mavi nin üzerine maus ile gelince buton MAVİ oluyor.

Giriş Yap butonunu = YEŞİL / Kayıt Ol butonunu = MAVİ yapmak istiyorum.

YEŞİL RENK KODU: #28a745
MAVİ RENK KODU: #007bff



1663494928414.png
 

Nasıl yapılır ? Xenforo Giriş Yap ve Kayıt Ol Buton Özelleştirmesi Nasıl Yapılır ?

netr0n netr0n hocam bu iş çıksa çıksa senden çıkar :)

Diyorsun :D

Bootstrap buton tarzı için kullandığın temanın extra.less şablonuna eklersin.

Less:
[data-logged-in="false"] {
    .p-navgroup-link {
        margin-bottom: 2px;
        margin-left: 3px;
        &--logIn {
            color: #28a745 !important;
            background: transparent;
            border: 1px solid #28a745 !important;
            border-radius: 4px;
            transition: color .15s ease-in-out,
                background .15s ease-in-out,
                border-color .15s ease-in-out;
            &:hover {
                color: #fff !important;
                background: #28a745;
                border-color: #28a745;
            }...
nasıl kodlanmış bilmeden sedece fikir yürütüle bilir örneğin

CSS:
.p-navgroup-link {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #c84448;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.p-navgroup-link.p-navgroup-link--logIn {
    color: #007bff;
    background-color: transparent;
    background-image: none;
    border-color: #007bff;

}
.p-navgroup-link.p-navgroup-link--logIn:hover {
    color: #f8f8f8;
    background-color: #007bff;
    border-color: #007bff;
  }

buton.png
 
  • Beğen
Tepkiler: Sis
nasıl kodlanmış bilmeden sedece fikir yürütüle bilir örneğin

CSS:
.p-navgroup-link {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #c84448;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.p-navgroup-link.p-navgroup-link--logIn {
    color: #007bff;
    background-color: transparent;
    background-image: none;
    border-color: #007bff;

}
.p-navgroup-link.p-navgroup-link--logIn:hover {
    color: #f8f8f8;
    background-color: #007bff;
    border-color: #007bff;
  }

Ekli dosyayı görüntüle 20844

Hocam ben sadece Giriş ve Kayıt Ol butonu için özelleştirme yapmak istiyorum Default tema da. :) Bu kodlar da hepsi görünüyor maşallah :D

1663501510511.png
 
netr0n netr0n hocam bu iş çıksa çıksa senden çıkar :)

Diyorsun :D

Bootstrap buton tarzı için kullandığın temanın extra.less şablonuna eklersin.

Less:
[data-logged-in="false"] {
    .p-navgroup-link {
        margin-bottom: 2px;
        margin-left: 3px;
        &--logIn {
            color: #28a745 !important;
            background: transparent;
            border: 1px solid #28a745 !important;
            border-radius: 4px;
            transition: color .15s ease-in-out,
                background .15s ease-in-out,
                border-color .15s ease-in-out;
            &:hover {
                color: #fff !important;
                background: #28a745;
                border-color: #28a745;
            }
        }
        &--register {
            color: #dc3545 !important;
            background: transparent;
            border: 1px solid #dc3545 !important;
            border-radius: 4px;
            transition: color .15s ease-in-out,
                background .15s ease-in-out,
                border-color .15s ease-in-out;
            &:hover {
                color: #fff !important;
                background: #dc3545;
                border-color: #dc3545;
            }
        }
    }
}

Sonuç

xenforobtn.gif
 
Çözüm
Diyorsun :D

Bootstrap buton tarzı için kullandığın temanın extra.less şablonuna eklersin.

Less:
[data-logged-in="false"] {
    .p-navgroup-link {
        margin-bottom: 2px;
        margin-left: 3px;
        &--logIn {
            color: #28a745 !important;
            background: transparent;
            border: 1px solid #28a745 !important;
            border-radius: 4px;
            transition: color .15s ease-in-out,
                background .15s ease-in-out,
                border-color .15s ease-in-out;
            &:hover {
                color: #fff !important;
                background: #28a745;
                border-color: #28a745;
            }
        }
        &--register {
            color: #dc3545 !important;
            background: transparent;
            border: 1px solid #dc3545 !important;
            border-radius: 4px;
            transition: color .15s ease-in-out,
                background .15s ease-in-out,
                border-color .15s ease-in-out;
            &:hover {
                color: #fff !important;
                background: #dc3545;
                border-color: #dc3545;
            }
        }
    }
}

Sonuç

Ekli dosyayı görüntüle 20848




Valla beton yetmez :D eline sağlık hocam eyw.

Çok bitişik duruyorlar aralarına boşluk versek daha seksi duracak :D


1663509242969.png
 
Son düzenleme:
İyi duracağını zannetmiyorum ama mantık aynı. Sanırım sen o alanda XGT html Sayfayı kullanıyordun.

Less:
[data-nav-id="xgtHtml_sayfa"] {
    margin-bottom: 2px;
    color: #28a745 !important;
    background: transparent;
    border: 1px solid #28a745 !important;
    border-radius: 4px;
    transition: color .15s ease-in-out,
        background .15s ease-in-out,
        border-color .15s ease-in-out;
    &:hover {
        color: #fff !important;
        background: #28a745  !important;
        border-color: #28a745;
    }
}
 
İyi duracağını zannetmiyorum ama mantık aynı. Sanırım sen o alanda XGT html Sayfayı kullanıyordun.

Less:
[data-nav-id="xgtHtml_sayfa"] {
    margin-bottom: 2px;
    color: #28a745 !important;
    background: transparent;
    border: 1px solid #28a745 !important;
    border-radius: 4px;
    transition: color .15s ease-in-out,
        background .15s ease-in-out,
        border-color .15s ease-in-out;
    &:hover {
        color: #fff !important;
        background: #28a745  !important;
        border-color: #28a745;
    }
}

Sen yaparsın da olmaz mı hocam :D Ateş ediyor gayet. :D

1663529678247.png
 

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.