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
XGT Onaylı
Kullanıcı
Katılım
17 Nis 2018
Mesajlar
1,203
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
 
Çözüm
@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;
            }...

gecitli

xFanatik
XGT Kullanıcı
Kullanıcı
Katılım
16 Ara 2018
Mesajlar
144
Web sitesi
webtiryaki.com
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

Sis

xFanatik
XGT Onaylı
Kullanıcı
Katılım
17 Nis 2018
Mesajlar
1,203
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

XҽɳGҽɳTɾ
Yönetici
XGT Master
XGT Onaylı
Katılım
6 Ara 2016
Mesajlar
5,730
Web sitesi
netron.web.tr
@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

Sis

xFanatik
XGT Onaylı
Kullanıcı
Katılım
17 Nis 2018
Mesajlar
1,203
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:

netr0n

XҽɳGҽɳTɾ
Yönetici
XGT Master
XGT Onaylı
Katılım
6 Ara 2016
Mesajlar
5,730
Web sitesi
netron.web.tr
İ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;
    }
}
 
  • Sev
Tepkiler: Sis

Sis

xFanatik
XGT Onaylı
Kullanıcı
Katılım
17 Nis 2018
Mesajlar
1,203
İ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
 

Forumdan daha fazla yararlanmak için giriş yapın yada üye olun!

Forumdan daha fazla yararlanmak için giriş yapın veya kayıt olun!

Kayıt ol

Forumda bir hesap oluşturmak tamamen ücretsizdir.

Şimdi kayıt ol
Giriş yap

Eğer bir hesabınız var ise lütfen giriş yapın

Giriş yap

Tema düzenleyici

Tema özelletirmeleri

Grafik arka planlar

Granit arka planlar