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

Sis · 18 Eyl 2022

Aşağıdaki örnekte bulunan XF 2 butonun özelleştirmesini nasıl yapabilirim ?

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

gecitli · 18 Eyl 2022

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

Sis · 18 Eyl 2022

gecitli' Alıntı:

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

Sis · 18 Eyl 2022

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

netr0n · 18 Eyl 2022

Sis' Alıntı:
netr0n hocam bu iş çıksa çıksa senden çıkar

Diyorsun

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ç

Sis · 18 Eyl 2022

netr0n' Alıntı:

Diyorsun

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

eline sağlık hocam eyw.

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

Sis · 18 Eyl 2022

Tamamdır hallettim kodların içinde düzenleme yaparak

Sis · 18 Eyl 2022

Bu butonu navbarda ki işaretlediğim kısıma nasıl yapabiliriz?

netr0n hocam

netr0n · 18 Eyl 2022

İ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;
    }
}

Sis · 18 Eyl 2022

netr0n' Alıntı:

İ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

Ateş ediyor gayet.

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

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

Sis

xFanatik