Joomla print/email function

Question

I wanted to change the way the standard print/email function in Joomla worked, where I wanted to change it from being a drop-down to stand alone icons.

In a template override I changed the code for this from:

        <?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; ?>

To:

        <?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 : ?>

This takes the print and email icons out of the tag and shows them as stand alone icons in a vertical list.

How can can I make the print/email icons displaying horizontally instead of vertically?

Answer 1

Firstly, you have remove the dropdown, but you are still using list items. So you need to change the <li> tags to <div> tags.

Once done, I would suggest adding a class to your parent element, like so:

<div class="pull-right actions">

Then using CSS:

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

Either that or simply remove the dropdown-menu class from your <ul> element and make sure all <li> elements are floated to the left.

Hope this helps

Answer 2

There's no reason these links shouldn't still be list items. It is a list of links and has always been coded as such in Joomla.

I think it would be preferable to use a simple utility class, changing

<ul class="dropdown-menu">

To:

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

or:

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

This get's the correct result with less code, more precision and better semantics.