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

'XenForo Eklentileri' forumunda DipnotWEB tarafından 22 Ağu 2017 tarihinde açılan konu

Bu Sayfayı Paylaş

  1. DipnotWEB

    DipnotWEB Üye Site Yetkilisi Administrator

    Katılım:
    21 Ağu 2017
    Mesaj:
    41
    Alınan Beğeniler:
    21
    Ödül Puanları:
    8
    Cinsiyet:
    Erkek
    [​IMG]
    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 [​IMG]

    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.

    Linkleri görebilmeniz için Üye Ol veya Giriş Yap !!!

     

Bu Sayfayı Paylaş