Visual guide to customising the weblinks pages using Joomla

This tutorial guide shows you how to modify the default weblinks layout in Joomla by using the over-ride mechanism that's built into Joomla.

This is important because it means that when you upgrade to a more recent version of Joomla you will not have to re-do your changes.

The default layout for the weblinks pages of Joomla looks like this, highlighting the two elements that are going to be changed.

default Joomla weblinks page design

Joomla's weblinks page layout

There are only going to be a few links on the page so I don't want to show the number in front of each link, and the drop-down menu to select the number of links to show on the page is redundant. Both of these need to be removed.

Here's how the final layout will look.

customized Joomla weblinks page

Customised Joomla weblinks page layout

Same content but the link numbers and the selection menu have both gone.

Follow the instructions on the right to do the same on your Joomla website.

Visual guides to Joomla

Customising Joomla weblinks - page 3

<< previous page

 

Next we're going to remove the Display # and drop-down menu as shown on the left.

The code for this is in the same file, at the top of the listing.

Here are the lines to look for . . .

<script type="text/javascript">
function tableOrdering(order, dir, task) {
var form = document.adminForm;

form.filter_order.value = order;
form.filter_order_Dir.value = dir;
document.adminForm.submit(task);
}
</script>

<div class="display">
<form action="<?php echo htmlspecialchars($this->action); ?>" method="post" name="adminForm">
<?php echo JText :: _('Display Num'); ?>&nbsp;
<?php echo $this->pagination->getLimitBox(); ?>
<input type="hidden" name="filter_order" value="<?php echo $this->lists['order'] ?>" />
<input type="hidden" name="filter_order_Dir" value="" />
</form>
</div>

There are two things here. The first is a Javascript that is used to sort a table, we are not going to need that. Second is the code that displays the number of items in a drop-down. Commenting out these two parts calls for two different methods. There is html and php code to be removed. Of course you could just remove them altogether, but that means that anyone who comes after you will not know what you did. AND - a couple of months in the future you will have forgotten too, so if you comment them out and add a suitable additional comment to say what you did then you will remember it too.

Use html comment (<-- before the items, --> after it) to remove the html and then inside that you still need to comment out the php with //.

Here's the finished result . . .

<!--<script type="text/javascript">
function tableOrdering(order, dir, task) {
var form = document.adminForm;

form.filter_order.value = order;
form.filter_order_Dir.value = dir;
document.adminForm.submit(task);
}
</script>
-->
<!--<div class="display">
<form action="<?php //echo htmlspecialchars($this->action); ?>" method="post" name="adminForm">
<?php //echo JText :: _('Display Num'); ?>&nbsp;
<?php //echo $this->pagination->getLimitBox(); ?>
<input type="hidden" name="filter_order" value="<?php //echo $this->lists['order'] ?>" />
<input type="hidden" name="filter_order_Dir" value="" />
</form>
</div>-->

As before, upload the cusomised file and check that the page of weblinks displays without the appropriate items.

That's it.

 

<< previous page