How to Style the Joomla 1.5 Breadcrumbs Display - Joomla & VirtueMart Tips & How To's

How to style the native Joomla 1.5 Breadcrumbs display (mod_breadcrumbs)

Home Joomla VirtueMart Tips How to Style the Joomla 1.5 Breadcrumbs Display

Mon

11

May

How to Style the Joomla 1.5 Breadcrumbs Display
  • Joomla 1.5
  • mod_breadcrumbs

The standard Joomla 1.5 breadcrumbs display can be quite plain.
Here's how to brighten it up a bit.


joomla breadcrumbs un-styled


You can add a text separator via the mod_breadcrumbs dialogue but it still doesn't do much for the display.

You can also paste in a full url to an image file, for example -
 
<img src="http://gjcwebdesign/templates/gjcwebdesign/images/arrow.png" border="0" alt="arrow" />
 

If you want to add a bit of text before the "Home" (believe me, loads of people have no idea what that list of words is at the top of the page!) then open joomla_root/modules/mod_breadcrumbs/tmpl/default.php and add straight after the access restriction -
 
<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
You are here: <img src="http://gjcwebdesign.com/templates/gjcwebdesign/images/arrow.png" border="0" alt="arrow" />
<?php for ($i = 0; $i < $count; $i ++) :
 

The "last" entry in the breadcrumb can be individually styled by adding a span id as below..
 
13.  echo ' '.$separator.' ';
14.  }  else if ($params->get('showLast', 1)) { // when $i == $count -1 and 'showLast' is true
15.      echo '<span id="last">'.$list[$i]->name.'</span>';
 

and style it in your css sheet.

The "You are here:" could also be:
 
<?php echo JText::_( 'HERE')?>
 
for a multilingual site. Ad the translation in the language/en-GB/en-GB.mod_breadcrumbs.ini .

You can style the breadcrumb containing div with a background colour or image, just look at the template code to find the div surrounding the line jdoc:include type="modules" name="breadcrumb" or check it in Firebug.

Much nicer.... joomla breadcrumbs styled
Last Updated on Thursday, 26 November 2009 09:59
 
VirtueMart
Your Cart is currently empty.

Latest Joomla & VirtueMart Tips

See all tips & examples



How to Style the Joomla 1.5 Breadcrumbs Display|Joomla & VirtueMart Tips & How To's



How to style the native Joomla 1.5 Breadcrumbs display (mod_breadcrumbs)


breadcrumbs, mod, joomla, add, breadcrumb, style, text, modules, display, bit, image, div, ini, site, sheet, css, multilingual, translation, language, template, type, include, check, firebug, nicer, jdoc, line, colour, background, look, code, surrounding, containing, tmpl, url, paste, file, example, home, doesn


guru

We use cookies to improve our website and your experience when using it. Cookies used for the essential operation of the site have already been set.
To find out more about the cookies we use and how to delete them, see our privacy policy.

I accept cookies from this site.