Resimleri Sola/Sağa Yaslamak İçin Özel BB Kodu

BulutForum

Üye
Yönetici
Administrator
Katılım
21 Ağu 2017
Mesajlar
48
Beğeniler
19
Puanları
8
Web sitesi
www.dipnot.web.tr
#1
You must be registered for see images

XenForo'da tıpkı WordPress'te olduğu gibi eklenen resimleri sola ve sağa yaslayarak (FLOAT) bunların yanına eklenen içeriklerin resimlerin dibinden değil, üst kısmından devam etmelerini ufak bir düzenlemeyle sadece 2 adımda sağlayabilmekteyiz.

(Doğru anlatabildim mi bilmiyorum ama örnek resimlere aşağıdan ulaşabilirsiniz.)

Hadi başlayalım
You must be registered for see images


Adım 1

İlk olarak aşağıdaki linkteki .XML dosyasını indirip, yönetim paneli Custom BB Codes kısmındaki (/admin.php?bb-codes/) (İNG: Import Custom BB Codes, TR: Özel BB Kodu Aktar) butonuna tıklayarak aktarıyoruz.


(Aşağıda dosyadaki kodları direkt verdim, kontrol edip, kendiniz bir not defteri aracılığıyla XML olarak ta kaydedebilirsiniz.)

XML dosyası böyle olacak: cta_float_bb_codes.xml

Kod:
<?xml version="1.0" encoding="utf-8"?>
<bb_codes>
  <bb_code bb_code_id="float_left" bb_code_mode="replace" has_option="no" callback_class="" callback_method="" option_regex="" trim_lines_after="2" plain_children="0" disable_smilies="0" disable_nl2br="0" disable_autolink="0" allow_signature="0" editor_icon_url="styles/cliptheapex/xenforo/editor/icons.png" sprite_mode="1" active="1" sprite_params_x="3" sprite_params_y="-2365" title="Float Left" description="Float content left, enabling text to wrap around it.">
    <replace_html><![CDATA[<span class="ctaBbcodeFloatLeft">{text}</span>]]></replace_html>
    <replace_html_email><![CDATA[]]></replace_html_email>
    <replace_text><![CDATA[]]></replace_text>
    <example><![CDATA[[FLOAT_LEFT]This content is floated left.
Adjacent text will wrap
around it.[/FLOAT_LEFT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat nibh, varius vitae consequat ut, pulvinar varius ante. Vestibulum auctor mattis elit, a sodales nisi. Pellentesque quis enim quam.]]></example>
  </bb_code>
  <bb_code bb_code_id="float_right" bb_code_mode="replace" has_option="no" callback_class="" callback_method="" option_regex="" trim_lines_after="2" plain_children="0" disable_smilies="0" disable_nl2br="0" disable_autolink="0" allow_signature="0" editor_icon_url="styles/cliptheapex/xenforo/editor/icons.png" sprite_mode="1" active="1" sprite_params_x="3" sprite_params_y="-2333" title="Float Right" description="Float content right, enabling text to wrap around it.">
    <replace_html><![CDATA[<span class="ctaBbcodeFloatRight">{text}</span>]]></replace_html>
    <replace_html_email><![CDATA[]]></replace_html_email>
    <replace_text><![CDATA[]]></replace_text>
    <example><![CDATA[[FLOAT_RIGHT]This content is floated right.
Adjacent text will wrap
around it.[/FLOAT_RIGHT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat nibh, varius vitae consequat ut, pulvinar varius ante. Vestibulum auctor mattis elit, a sodales nisi. Pellentesque quis enim quam.]]></example>
  </bb_code>
</bb_codes>
Adım 2

Ardından, kullandığımız temanın extra.css dosyasını açıyor (arama kısmından ya da Şablonlar kısmından bulabilirsiniz) ve alttaki kodları dahil ediyoruz:
Kod:
.ctaBbcodeFloatLeft
{
    float: left;
    margin-right: 8px;
    clear: both;
}

.ctaBbcodeFloatRight
{
    float: right;
    margin-left: 8px;
    clear: both;
}
Not: Farklı temaya geçtiğinizde, kodların çalışması için o temanın extra.css dosyasına da eklemelisiniz)

Hepsi bu kadar. Artık metin editörünüzde sola ve sağa yaslamak için iki yeni butonunuz var.
Not: Koddaki metin editörü ikonu sprite kısmında bazı sorunlar var, bu yüzden editörde ikonlar gözükmeyecektir. En kısa sürede kodda gerekli düzeltmeleri yapacağım arkadaşlar. Ancak kendi forumumda butonlar "Taslak" butonunun hemen solunda "görünmez" olarak yer almaktalar. Sizde de öyle yer alacaktır.
You must be registered for see images



ÖRNEK RESİMLER

You must be registered for see images
You must be registered for see images

XenForo.com Resource Bağlantısı:
 
Üst