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

Hoş Geldiniz! 👋

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?

Kayıt Ol

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
52
Mesajlar
172
Çözümler
3
Reaksiyon puanı
74
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
Cevap yazmak için giriş yap yada kayıt ol.

Benzer konular

R
  • Çözüldü
Header düzenleme nasıl yaparım ?
Cevaplar
2
Gösterim
78
raccoon
R
D
  • Çözüldü
Bunları nasıl yaparım forumumda
Cevaplar
2
Gösterim
85
Dpugsf
D
hebelehübele
  • Çözüldü
Logoya mouse ile gelince bu şekilde nasıl hover efekti yaparım
Cevaplar
3
Gösterim
167
admin
admin
D
  • Çözüldü
Alıntı renk nasıl yapılır
Cevaplar
4
Gösterim
123
Dpugsf
D
R
  • Çözüldü
Mobilde olan neler yeni butonu nasıl kaldırırım ?
Cevaplar
3
Gösterim
98
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)

Forum istatistikleri

Konular
489
Mesajlar
946
Kullanıcılar
131
Son üye
BERKEN
Geri
Üst