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

Denizz

Çalışkan Üye
Katılım
9 Mar 2018
Mesajlar
200
Beğeniler
0
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

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.

XML dosyası: cta_float_bb_codes.xml (Zippyshare.com bağlantısıdır)

(Eğer XML dosyası hakkında kuşkunuz olursa aşağıda dosyadaki kodları direkt verdim, kontrol edip, kendiniz bir not defteri aracılığıyla XML olarak ta kaydedebilirsiniz.)
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.
 

Şu anda bu konu'yu okuyan kullanıcılar

Benzer konular

Üst