web design, England, Britain, UK, belgium
 
Ulti Clocks content

How to Style the Joomla 1.5 Breadcrumbs Display

GJC Web Design Joomla & VirtueMart how to, tips, tricks, coding examples, html, php, tutorial, 101, useful hints, help

A collection of help articles and coding examples for Joomla & Virtuemart

Belgium, VirtueMart & Joomla Web Design England UK Britain & Germany

Joomla, VirtueMart, how to, tips, tricks, coding examples, html, php, tutorial, 101, useful hints, help sand 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

Home Joomla - VirtueMart Joomla & VM How To's 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


Add this page to your favorite Social Bookmarking websites
Digg! Reddit! Del.icio.us! Mixx! Free and Open Source Software News Google! Live! Facebook! Slashdot! Technorati! StumbleUpon! Spurl! Newsvine! Furl! Fark! Yahoo! Netvouz! Mister-Wong! RawSugar! Ma.gnolia! Squidoo! DZone! Swik!
Last Updated on Thursday, 26 November 2009 09:59 Read : 9115 times
 
Comments (1)
Breadcrumbs
1 Friday, 22 May 2009 12:01
Nige
Thanks for the info - this artciel helped me a lot! Smile

Add your comment

BoldItalicUnderlineStrikethroughSubscriptSuperscriptEmailImageHyperlinkOrdered listUnordered listQuoteCodeHyperlink to the Article by its id
Very HappySmileWinkSadSurprisedShockedConfusedCoolLaughingMadRazzEmbarrassedCrying or Very SadEvil or Very MadTwisted EvilRolling EyesExclamationQuestionIdeaArrowNeutralMr. GreenGeekUber Geek
Your name:
Subject:
Comment:

Latest Articles

Paypal Donation

If you use this module on your site please donate a small amount.
Any donation amount appreciated.

VM Live Product Search

Recommended Reading

For those interested in extending there knowledge of Joomla! & VirtueMart Packt Publishing has an excellent range of help & how to books.
Listed below are some I can recommend.
Simply click on the images to be taken directly to their web shop.

Learning Joomla! 1.5 Extension Development Learning Joomla! 1.5 Extension Development
by Joseph L. LeBlanc.
Read the review
Joomla! E-Commerce with VirtueMart Joomla! E-Commerce with VirtueMart
by Suhreed Sarkar.
Read the review
Joomla! Web Security Joomla! Web Security
by Tom Canavan.

Mastering Joomla! 1.5 Extension and Framework Development Mastering Joomla! 1.5 Extension and Framework Development
by James Kennard.

Joomla! Template Design: Create your own professional-quality templates with this fast, friendly guide Joomla! Template Design: Create your own professional-quality templates with this fast, friendly guide
by Tessa Blakeley Silver.

GJC Web Design Joomla & VirtueMart how to, tips, tricks, coding examples, html, php, tutorial, 101, useful hints, help

A collection of help articles and coding examples for Joomla & Virtuemart

Belgium, VirtueMart & Joomla Web Design England UK Britain & Germany

Joomla, VirtueMart, how to, tips, tricks, coding examples, html, php, tutorial, 101, useful hints, help



How to Style the Joomla 1.5 Breadcrumbs Display



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