HOŞ GELDİNİZ!

Tüm özelliklerimize erişmek için şimdi bize katılın. Kaydolup giriş yaptıktan sonra konu oluşturabilir, mevcut konulara yanıt gönderebilir, diğer üyelerinize itibar kazandırabilir, kendi özel mesajlaşma programınızı edinebilir ve çok daha fazlasını yapabileceksiniz. Aynı zamanda hızlı ve tamamen ücretsizdir, peki daha ne bekliyorsunuz?
Giriş yap Kayıt ol

XenForo Eklentileri

XenForo için hazırlanmış eklentiler

Web Radyo İndex

Web radyoları için HTML tasarımlar

Forum Yardım

HeBeLe kullanım kılavuzu.

XenForo Destek

Xenforo ile ilgili soru ve sorunlarınız

Buna benzer breadcrumbs nasıl yaparım ?

  • Konuyu Başlatan Konuyu Başlatan raccoon
  • Başlangıç tarihi Başlangıç tarihi
R

raccoon

Kayıtlı Üye
1
HBL RANK
Katılım
31 Mart 2025
Konular
51
Mesajlar
168
Çözümler
3
Reaksiyon puanı
71
Puanları
28
Konum
Türkiye
Cinsiyet
Erkek
prnt.sc

Screenshot

Captured with Lightshot
prnt.sc prnt.sc
Forumumdaki breadcrumbs düz sade default görseldeki gibi nasıl yaparım?
 
Çözüm
admin
raccoon' Alıntı:
Harika süper oldu bu lakin mobilde sanki bir garip çalışıyor soldan sağa yazı çok boşluklu Destek Oyun! - Valorant Seven Dostların Mekanı! sizde bir bakar mısınız şuan aktif çalışıyor.
Genişletmek için tıkla...
bunu deneyebilir misin?

CSS: 
//Breadcrumb
.p-breadcrumbs {
    margin-bottom:15px;
    display:inline-block;
    width: 100%;
    font-size: 12px;
    border-color: @xf-borderColor; // BORDER RENGİ
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    color: @xf-textColor;
    background: @xf-contentBg; //ARKA PLAN RENGİ
    
    &:before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 0px;
        border-radius...
Tarihe göre sırala Oylara göre sırala
admin

Konu 'XenForo 2.x.x Verisoyonları İçin Breadcrumb Özelleştirme'

XenForo 2.x.x versiyonları için Breadcrumb alanını özelleştirme kodları. Aşağıya eklemiş olduğum kodu extra.less şablonuna ekleyerek breadcrumb alanında görünümü değiştirebilirsiniz.

Kodları ekledikten sonra aşağıdaki gibi bir görünüm olacaktır.

xenforo-breadcrumb-alanini-ozellestirme.webp

CSS: 
//Breadcrumb
.p-breadcrumbs {
    margin-bottom:15px;
    flex: 1 1 auto;
    width: 100%;
    font-size: 12px;
    border-color: @xf-borderColor; // BORDER RENGİ
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    color: @xf-textColor;
    background: @xf-contentBg; //ARKA PLAN RENGİ...
  • Beğen

Bu konudakini deneyebilir misin?
 
Olumlu oy 0 Negatif oyla
admin' Alıntı:
admin

Konu 'XenForo 2.x.x Verisoyonları İçin Breadcrumb Özelleştirme'

XenForo 2.x.x versiyonları için Breadcrumb alanını özelleştirme kodları. Aşağıya eklemiş olduğum kodu extra.less şablonuna ekleyerek breadcrumb alanında görünümü değiştirebilirsiniz.

Kodları ekledikten sonra aşağıdaki gibi bir görünüm olacaktır.

xenforo-breadcrumb-alanini-ozellestirme.webp

CSS: 
//Breadcrumb
.p-breadcrumbs {
    margin-bottom:15px;
    flex: 1 1 auto;
    width: 100%;
    font-size: 12px;
    border-color: @xf-borderColor; // BORDER RENGİ
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    color: @xf-textColor;
    background: @xf-contentBg; //ARKA PLAN RENGİ...
  • Beğen

Bu konudakini deneyebilir misin?
Genişletmek için tıkla...
Denedim fakat sanki bozukluk var gibi görünğmleri de değişiyor iki adet resim bırakıyorum bakınca anlarsınız

prnt.sc

Screenshot

Captured with Lightshot
prnt.sc prnt.sc
 
Olumlu oy 0 Negatif oyla
admin' Alıntı:
admin

Konu 'XenForo 2.x.x Verisoyonları İçin Breadcrumb Özelleştirme'

XenForo 2.x.x versiyonları için Breadcrumb alanını özelleştirme kodları. Aşağıya eklemiş olduğum kodu extra.less şablonuna ekleyerek breadcrumb alanında görünümü değiştirebilirsiniz.

Kodları ekledikten sonra aşağıdaki gibi bir görünüm olacaktır.

xenforo-breadcrumb-alanini-ozellestirme.webp

CSS: 
//Breadcrumb
.p-breadcrumbs {
    margin-bottom:15px;
    flex: 1 1 auto;
    width: 100%;
    font-size: 12px;
    border-color: @xf-borderColor; // BORDER RENGİ
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    color: @xf-textColor;
    background: @xf-contentBg; //ARKA PLAN RENGİ...
  • Beğen

Bu konudakini deneyebilir misin?
Genişletmek için tıkla...
Denedim fakat sanki bozukluk var gibi görünğmleri de değişiyor iki adet resim bırakıyorum bakınca anlarsınız

prnt.sc

Screenshot

Captured with Lightshot
prnt.sc prnt.sc
prnt.sc

Screenshot

Captured with Lightshot
prnt.sc prnt.sc
 
Olumlu oy 0 Negatif oyla
raccoon' Alıntı:
Denedim fakat sanki bozukluk var gibi görünğmleri de değişiyor iki adet resim bırakıyorum bakınca anlarsınız

prnt.sc

Screenshot

Captured with Lightshot
prnt.sc prnt.sc
prnt.sc

Screenshot

Captured with Lightshot
prnt.sc prnt.sc
Genişletmek için tıkla...
Bunu da deneyebilir misin?

CSS: 
//Breadcrumb
.p-breadcrumbs {
    margin-bottom:15px;
    flex: 1 1 auto;
    width: 100%;
    font-size: 12px;
    border-color: @xf-borderColor; // BORDER RENGİ
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    color: @xf-textColor;
    background: @xf-contentBg; //ARKA PLAN RENGİ
    max-height:48px;
    
    &:before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 0px;
        border-radius: inherit;
        pointer-events: none;
        z-index: 2;
    }
    
    li {
        margin: 0;
        padding-left: 15px;
        float: left;
        margin-right: -1.5em;
        font-size: 13px;
        
        &:first-of-type {
            a {
                margin-left: -20px;
                &:before, &:after {
                    width: calc(100% + 20px);
                }
            }
        }
        
        &:after {
            display: none;
        }
        
        a {
            padding: 10px 15px;
            position: relative;
            z-index: 1;
            display:inline-block;
            overflow: visible;
            max-width: none;
            text-decoration: none;
            color: inherit;
            margin-left: 5px;
            
            &:before {
                top: 0;
                transform: skewX(35deg);
            }
            
            &:after {
                top: 50%;
                transform: skewX(-35deg);
            }
            
            &:before, &:after {
                border-style: solid;
                border-width: 0;
                border-right-width: 1px;
                box-shadow: inset currentColor -1px 0px 0px 0px;
                content: '';
                position: absolute;
                height: 50%;
                width: 100%;
                right: 0;
                z-index: -1;
                box-sizing: border-box;
                transform-origin: 100% 50%;
                border-color: @xf-contentAltBg;
                color: @xf-borderColor;
            }
            &:hover:before, &:hover:after {
                background: darken(@xf-contentAltBg, 15%); //Hover Rengi
            }
            &:hover {
                background: transparent;
            }
        }
    }
}

@media (max-width: @xf-responsiveNarrow) {
    .p-breadcrumbs {
        li {
            &:before {
                display:none;
            }
            
            a:before {
                top: 0;
                transform: skewX(-35deg);
                width: calc(100% + 20px);
            }
            
            a:after {
                top: 50%;
                transform: skewX(35deg);
                width: calc(100% + 20px);
            }
        }
    }
}
 
Olumlu oy 0 Negatif oyla
admin' Alıntı:
Bunu da deneyebilir misin?

CSS: 
//Breadcrumb
.p-breadcrumbs {
    margin-bottom:15px;
    flex: 1 1 auto;
    width: 100%;
    font-size: 12px;
    border-color: @xf-borderColor; // BORDER RENGİ
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    color: @xf-textColor;
    background: @xf-contentBg; //ARKA PLAN RENGİ
    max-height:48px;
   
    &:before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 0px;
        border-radius: inherit;
        pointer-events: none;
        z-index: 2;
    }
   
    li {
        margin: 0;
        padding-left: 15px;
        float: left;
        margin-right: -1.5em;
        font-size: 13px;
       
        &:first-of-type {
            a {
                margin-left: -20px;
                &:before, &:after {
                    width: calc(100% + 20px);
                }
            }
        }
       
        &:after {
            display: none;
        }
       
        a {
            padding: 10px 15px;
            position: relative;
            z-index: 1;
            display:inline-block;
            overflow: visible;
            max-width: none;
            text-decoration: none;
            color: inherit;
            margin-left: 5px;
           
            &:before {
                top: 0;
                transform: skewX(35deg);
            }
           
            &:after {
                top: 50%;
                transform: skewX(-35deg);
            }
           
            &:before, &:after {
                border-style: solid;
                border-width: 0;
                border-right-width: 1px;
                box-shadow: inset currentColor -1px 0px 0px 0px;
                content: '';
                position: absolute;
                height: 50%;
                width: 100%;
                right: 0;
                z-index: -1;
                box-sizing: border-box;
                transform-origin: 100% 50%;
                border-color: @xf-contentAltBg;
                color: @xf-borderColor;
            }
            &:hover:before, &:hover:after {
                background: darken(@xf-contentAltBg, 15%); //Hover Rengi
            }
            &:hover {
                background: transparent;
            }
        }
    }
}

@media (max-width: @xf-responsiveNarrow) {
    .p-breadcrumbs {
        li {
            &:before {
                display:none;
            }
           
            a:before {
                top: 0;
                transform: skewX(-35deg);
                width: calc(100% + 20px);
            }
           
            a:after {
                top: 50%;
                transform: skewX(35deg);
                width: calc(100% + 20px);
            }
        }
    }
}
Genişletmek için tıkla...
Harika süper oldu bu lakin mobilde sanki bir garip çalışıyor soldan sağa yazı çok boşluklu Destek Oyun! - Valorant Seven Dostların Mekanı! sizde bir bakar mısınız şuan aktif çalışıyor.
 
Olumlu oy 0 Negatif oyla
raccoon' Alıntı:
Harika süper oldu bu lakin mobilde sanki bir garip çalışıyor soldan sağa yazı çok boşluklu Destek Oyun! - Valorant Seven Dostların Mekanı! sizde bir bakar mısınız şuan aktif çalışıyor.
Genişletmek için tıkla...
bunu deneyebilir misin?

CSS: 
//Breadcrumb
.p-breadcrumbs {
    margin-bottom:15px;
    display:inline-block;
    width: 100%;
    font-size: 12px;
    border-color: @xf-borderColor; // BORDER RENGİ
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    color: @xf-textColor;
    background: @xf-contentBg; //ARKA PLAN RENGİ
    
    &:before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 0px;
        border-radius: inherit;
        pointer-events: none;
        z-index: 2;
    }
    
    li {
        margin: 0;
        padding-left: 15px;
        float: left;
        margin-right: -1.5em;
        font-size: 13px;
        
        &:first-of-type {
            a {
                margin-left: -15px;
                &:before, &:after {
                    width: calc(100% + 20px);
                }
            }
        }
        
        &:after {
            display: none;
        }
        
        a {
            
            
            
            padding: 10px 15px;
            position: relative;
            z-index: 1;
            display:inline-block;
            overflow: visible;
            max-width: none;
            text-decoration: none;
            color: inherit;
            margin-left: 5px;
            
            &:before {
                top: 0;
                transform: skewX(35deg);
            }
            
            &:after {
                top: 50%;
                transform: skewX(-35deg);
            }
            
            &:before, &:after {
                border-style: solid;
                border-width: 0;
                border-right-width: 1px;
                box-shadow: inset currentColor -1px 0px 0px 0px;
                content: '';
                position: absolute;
                height: 50%;
                width: 100%;
                right: 0;
                z-index: -1;
                box-sizing: border-box;
                transform-origin: 100% 50%;
                border-color: @xf-contentAltBg;
                color: @xf-borderColor;
            }
            &:hover:before, &:hover:after {
                background: darken(@xf-contentAltBg, 15%); //Hover Rengi
            }
            &:hover {
                background: transparent;
            }
        }
    }
}

@media (max-width: @xf-responsiveNarrow) {
    .p-breadcrumbs {
        li {
            &:before {
                display:none;
            }
            
            a:first-of-type {
                margin-left: -20px;
            }
            
            a:before {
                top: 0;
                transform: skewX(-35deg);
                width: calc(100% + 20px);
            }
            
            a:after {
                top: 50%;
                transform: skewX(35deg);
                width: calc(100% + 20px);
            }
        }
    }
}
 
Olumlu oy 0 Negatif oyla
Çözüm
admin' Alıntı:
bunu deneyebilir misin?

CSS: 
//Breadcrumb
.p-breadcrumbs {
    margin-bottom:15px;
    display:inline-block;
    width: 100%;
    font-size: 12px;
    border-color: @xf-borderColor; // BORDER RENGİ
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    color: @xf-textColor;
    background: @xf-contentBg; //ARKA PLAN RENGİ
   
    &:before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 0px;
        border-radius: inherit;
        pointer-events: none;
        z-index: 2;
    }
   
    li {
        margin: 0;
        padding-left: 15px;
        float: left;
        margin-right: -1.5em;
        font-size: 13px;
       
        &:first-of-type {
            a {
                margin-left: -15px;
                &:before, &:after {
                    width: calc(100% + 20px);
                }
            }
        }
       
        &:after {
            display: none;
        }
       
        a {
           
           
           
            padding: 10px 15px;
            position: relative;
            z-index: 1;
            display:inline-block;
            overflow: visible;
            max-width: none;
            text-decoration: none;
            color: inherit;
            margin-left: 5px;
           
            &:before {
                top: 0;
                transform: skewX(35deg);
            }
           
            &:after {
                top: 50%;
                transform: skewX(-35deg);
            }
           
            &:before, &:after {
                border-style: solid;
                border-width: 0;
                border-right-width: 1px;
                box-shadow: inset currentColor -1px 0px 0px 0px;
                content: '';
                position: absolute;
                height: 50%;
                width: 100%;
                right: 0;
                z-index: -1;
                box-sizing: border-box;
                transform-origin: 100% 50%;
                border-color: @xf-contentAltBg;
                color: @xf-borderColor;
            }
            &:hover:before, &:hover:after {
                background: darken(@xf-contentAltBg, 15%); //Hover Rengi
            }
            &:hover {
                background: transparent;
            }
        }
    }
}

@media (max-width: @xf-responsiveNarrow) {
    .p-breadcrumbs {
        li {
            &:before {
                display:none;
            }
           
            a:first-of-type {
                margin-left: -20px;
            }
           
            a:before {
                top: 0;
                transform: skewX(-35deg);
                width: calc(100% + 20px);
            }
           
            a:after {
                top: 50%;
                transform: skewX(35deg);
                width: calc(100% + 20px);
            }
        }
    }
}
Genişletmek için tıkla...
Adminim süpersin hem mobil hem tarayıcı şuan harika muhteşem oldu hatasız.
 
Olumlu oy 0 Negatif oyla

Yorum yapmak için bir hesap oluşturun veya giriş yapın

Yeni bir konu oluşturabilmek veya konulara cevap verebilmek için sitemize üye olmanız gerekmektedir

Hesap oluştur

Forum sitemizde bir hesap oluşturun. Bu işlem çok kolay!

Kayıt ol

Giriş yap

Zaten bir hesabınız var mı? Giriş yapın.

Benzer konular

R
  • Çözüldü
Header düzenleme nasıl yaparım ?
Cevaplar
2
Gösterim
75
raccoon
R
D
  • Çözüldü
Bunları nasıl yaparım forumumda
Cevaplar
2
Gösterim
80
Dpugsf
D
hebelehübele
  • Çözüldü
Logoya mouse ile gelince bu şekilde nasıl hover efekti yaparım
Cevaplar
3
Gösterim
161
admin
admin
D
  • Çözüldü
Alıntı renk nasıl yapılır
Cevaplar
4
Gösterim
117
Dpugsf
D
R
  • Çözüldü
Mobilde olan neler yeni butonu nasıl kaldırırım ?
Cevaplar
3
Gösterim
93
admin
admin
« Breadcrumbs - Body Header altına taşıma? | 2.3 eklenti için türkçe dil paketi kaldırma »

Konuyu toplam 0 üye okuyor. (0 Kayıtlı üye ve 0 Misafir)

Yapay Zeka, insan benzeri zeka gösteren makineler ve yazılımlar geliştirmeyi amaçlayan bir teknoloji alanıdır. Yapay zeka, bilgisayarların, makinelerin ve yazılımların, düşünme, öğrenme, problem çözme, dil anlama, görsel algılama ve daha birçok insana özgü işlemi yerine getirebilmesini sağlar.
Sitemiz bir forum sitesi olduğu için kullanıcılar her türlü görüşlerini önceden onay olmadan anında siteye yazabilmektedir. 5651 sayılı yasaya göre bu yazılardan dolayı doğabilecek her türlü sorumluluk yazan kullanıcılara aittir. 5651 sayılı yasaya göre sitemiz mesajları kontrolle yükümlü olmayıp, yasaya aykırı yada telif hakkı içeren paylaşımlar BURADAN bize ulaşıldığı taktirde, ilgili konu en geç 48 saat içerisinde kaldırılacaktır. Sitemizde Bulunan Videolar YouTube, Facebook, Dailymotion, v.b. video paylaşım sitelerinden alınmaktadır. Telif hakları sorumluluğu bu sitelere aittir. Videoların hiç biri sunucularımızda bulunmamaktadır.

Forum istatistikleri

Konular
482
Mesajlar
931
Kullanıcılar
128
Son üye
emre
  • Ana sayfa Neler yeni Giriş yap Kayıt ol
    • Geri
    Üst