Yondaime
Yeni üye
Bu modifikasyon ile Xenforo sistemindeki gibi alıntılanan mesajlara devamını oku özelliği ekleyeceğiz.
Kullandığınız temanın global.css stilinin en sonuna ekleyin ve kaydedin:
Şimdi ise footer şablonlarının en sonuna aşağıdaki kodları ekleyip kaydediniz.
Tüm işlemler bu kadar.
Önizleme
Kullandığınız temanın global.css stilinin en sonuna ekleyin ve kaydedin:
Kod:
.mycode_quote {
position: relative;
overflow-y: auto;
max-height: 200px;
transition: max-height 500ms ease-in-out;
}
.quote__expand {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to bottom, rgba(249,250,250,0) 0%, #f9fafa 60%);
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
text-align: center;
height: 75px;
cursor: pointer;
}
.quote__expand span {
position: absolute;
bottom: 10px; left: 0; right: 0;
}Şimdi ise footer şablonlarının en sonuna aşağıdaki kodları ekleyip kaydediniz.
Kod:
<script>
const bbCodeQuoteExpandHtml = '<div class="quote__expand"><span>Click to expand...</span></div>';
const bbCodeQuotes = $('.mycode_quote');
bbCodeQuotes.each(function() {
if ($(this).parent('.mycode_quote').length) {
return $(this).css('max-height', 'initial');
}
if (this.scrollHeight > this.clientHeight) {
return $(this).css('overflow', 'hidden').append(bbCodeQuoteExpandHtml)
}
})
const bbCodeQuoteExpand = $('.quote__expand');
bbCodeQuoteExpand.on('click', function() {
const bbCodeQuote = $(this).parent('.mycode_quote');
$(this).remove();
bbCodeQuote.css('max-height', bbCodeQuote.prop('scrollHeight'));
})
</script>Tüm işlemler bu kadar.
Önizleme
