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

How to Style the Joomla 1.5 Breadcrumbs Display

JOOMLABOTTOM 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.

Mai

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!
Zuletzt aktualisiert am Donnerstag, 26. November 2009 um 09:59 Uhr Read : 12759 times
 
Comments (3)
Great Article!
3 Mittwoch, 09. Juni 2010 um 01:38 Uhr
Bob
Thanks for the excellent tip!

I would make one recommendation: Instead of modifying the file that is installed with Joomla (joomla_root/modules/mod_breadcrumbs/tmpl/default.php), I created an override of that file in my template directory (joomla_root/templates/my_template_dir/html/mod_breadcrumbs/default.php) and modified my override file. This technique means that my change won't get overwritten the next time I upgrade my Joomla version. Smile
Works for me
2 Freitag, 21. Mai 2010 um 12:26 Uhr
Ouboet
Thanks, works great for me.

I cant post the code here, but I added "You are here:" just below the "span Class = breadcrumbs pathway" line and above the "php for" line.

You can see this working at http://www.stonedeer.com

Hope that helps someone.
Breadcrumbs
1 Freitag, 22. Mai 2009 um 12:01 Uhr
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:
Titel:
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.

JOOMLABOTTOM



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