Kullanıcı:
Filtreler
Neler yeni
XenGenTr
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.

Giriş yap Şimdi kayıt ol

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

Sis

Sis

Banned
Yasaklı
XGT Onaylı
Kullanıcı
Katılım
17 Nis 2018
Mesajlar
1,282
Çö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
Sis' Alıntı:
netr0n netr0n hocam bu iş çıksa çıksa senden çıkar :)
Genişletmek için tıkla ...

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;
            }...
Tamamını görüntüle
Tarihe göre sırala Oylara göre sırala
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
Oyla 0 Downvote
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
Genişletmek için tıkla ...

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
 
Oyla 0 Downvote
Sis' Alıntı:
netr0n netr0n hocam bu iş çıksa çıksa senden çıkar :)
Genişletmek için tıkla ...

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
 
Oyla 1 Downvote
Çözüm
netr0n' Alıntı:
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
Genişletmek için tıkla ...




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:
Oyla 0 Downvote
Tamamdır hallettim kodların içinde düzenleme yaparak :)

1663510234086.png
 
Oyla 0 Downvote
Bu butonu navbarda ki işaretlediğim kısıma nasıl yapabiliriz? netr0n netr0n hocam :)

1663523228187.png
 
Oyla 0 Downvote
İ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;
    }
}
 
Oyla 1 Downvote
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;
    }
}
Genişletmek için tıkla ...

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

1663529678247.png
 
Oyla 0 Downvote
Cevap yazmak için giriş yap yada kayıt ol.

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.

Giriş yap Şimdi kayıt ol