it-swarm.dev

Joomla印刷/メール機能

Joomlaの標準の印刷/電子メール機能の動作を変更したかったのですが、ドロップダウンからスタンドアロンアイコンに変更したかったのです。

テンプレートオーバーライドで、このコードを次のように変更しました。

        <?php if ($canEdit || $displayData['params']->get('show_print_icon') || $displayData['params']->get('show_email_icon')) : ?>
        <div class="btn-group pull-right">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-cog"></span> <span class="caret"></span> </a>
            <?php // Note the actions class is deprecated. Use dropdown-menu instead. ?>
            <ul class="dropdown-menu">
                <?php if ($displayData['params']->get('show_print_icon')) : ?>
                    <li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
                <?php if ($displayData['params']->get('show_email_icon')) : ?>
                    <li class="email-icon"> <?php echo JHtml::_('icon.email', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
                <?php if ($canEdit) : ?>
                    <li class="edit-icon"> <?php echo JHtml::_('icon.edit', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
            </ul>
        </div>
    <?php endif; ?>

に:

        <?php if ($canEdit || $displayData['params']->get('show_print_icon') || $displayData['params']->get('show_email_icon')) : ?>
        <div class="pull-right">
                <?php if ($displayData['params']->get('show_print_icon')) : ?>
                    <li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
                <?php if ($displayData['params']->get('show_email_icon')) : ?>
                    <li class="email-icon"> <?php echo JHtml::_('icon.email', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
                <?php if ($canEdit) : ?>
                    <li class="edit-icon"> <?php echo JHtml::_('icon.edit', $displayData['item'], $displayData['params']); ?> </li>
                <?php endif; ?>
            </ul>
        </div>
    <?php endif; ?>

<?php else : ?>

これにより、印刷アイコンとメールアイコンがタグから外され、縦のリストにスタンドアロンのアイコンとして表示されます。

印刷/メールのアイコンを垂直ではなく水平に表示するにはどうすればよいですか?

1
Hammur

まず、ドロップダウンを削除しましたが、まだリストアイテムを使用しています。したがって、<li>タグから<div>タグ。

完了したら、次のようにクラスを親要素に追加することをお勧めします。

<div class="pull-right actions">

次に、CSSを使用します。

.actions > div {
    display: inline-block;
}

それか、単にdropdown-menuからのクラス<ul>要素とすべての<li>要素は左にフロートされます。

お役に立てれば

1
Lodder

これらのリンクがリストアイテムであってはならない理由はありません。それはisリンクのリストであり、Joomlaでは常にそのようにコーディングされています。

簡単なユーティリティクラスを使用して、

<ul class="dropdown-menu">

に:

<ul class="inline"> // Following BS2.3 syntax

or:

<ul class="list-inline"> // BS3 syntax

これは、より少ないコード、より高い精度、より優れたセマンティクスで正しい結果をもたらします。

1
Seth Warburton