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

How to Style the Joomla 1.5 Breadcrumbs Display

GJC Web Design UK 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
 

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:
  The word for verification.
Lowercase letters only with no spaces.

The word for verification.<br/>Lowercase letters only with no spaces.
Word verification:

Subject:
Comment:
Comments (7)
fcuk
7 Thursday, 14 July 2011 04:19
nick
i feel so stupid, because it does not work on my site...crap

Start of my code like this:
"Restricted access", then some "span class" and then start the default cycle
(this "span" was been before me Smile)

I try to put "you are here" in different places: before and behind the "span" - and this stupid breadcrmbs still dont show me my lovely "You are here"
I think the trouble in this "span", but i dont know how to fix it
If someone can help me, please write me on This e-mail address is being protected from spambots. You need JavaScript enabled to view it

Thanks.
P.S.: sorry if my english scare someone Smile - i am from Ukraine
Breadcrumbs
6 Monday, 20 June 2011 15:14
Marina de Wit
This article is very helpful but I have another question. How do add image size info into the php line. $_separator = JHTML::_('image.site', 'arrow.png');
I was checking the website useability in http://nibbler.silktide.com and one of the recommendation was to add size to images like the arrow.
any idea how to do that?
what file?
5 Friday, 22 October 2010 21:55
(GJC Admin)
modules/mod_breadcrumbs/default.php
Where do I insert the image code?
4 Friday, 22 October 2010 15:03
haggis
I'm looking to add a background image in the breadcrumb section. I saw the note above, but have no idea what file (or where in the file) to paste the img src. Any help is greatly appreciated!
Great Article!
3 Wednesday, 09 June 2010 01:38
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 Friday, 21 May 2010 12:26
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 Friday, 22 May 2009 12:01
Nige
Thanks for the info - this artciel helped me a lot! Smile

Our Recommended Reading

For those interested in extending their 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.


Joomla! Social Networking with JomSocial
Joomla! Social Networking
with JomSocial

by Kwasi Boateng & Beatrice A. Boateng.
Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia
by Allan Walker.


Building job sites with Joomla!
Building job sites with Joomla!
by Santonu Kumar Dhar.

Joomla! Template Design: Create your own professional-quality templates with this fast, friendly guide
Joomla! Template Design: 2nd Edition
Create your own professional-quality
templates with this fast, friendly guide
by Tessa Blakeley Silver.
Magento: Beginner's Guide
Magento: Beginner's Guide by William Rice
is a must for anyone trying the
open-source e-Commerce solution.

Read the review

object-oriented-javascript-applications-libraries
Object-Oriented JavaScript by
Stoyan Stefanov gives you a very
comprehensive grounding in
the latest Javascript techniques.

Read the review
Joomla! Web Security
Joomla! Web Security
by Tom Canavan.

Joomla 1.5 Top Extensions Cookbook
Joomla 1.5 Top Extensions Cookbook by
Suhreed Sarkar is an ideal and concise round up of the extensions available for the Joomla! system.

Read the review

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.

Mastering Joomla! 1.5 Extension and Framework Development
Mastering Joomla! 1.5 Extension and
Framework Development : 2nd Edition

by James Kennard.
Read the review

Building job sites with Joomla!
Building job sites with Joomla!
by Santonu Kumar Dhar.
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! 1.5 Site Blueprints Joomla! 1.5 Site Blueprints
by Timi Ogunjobi.

Joomla! 1.5 JavaScript jQuery Joomla! 1.5 JavaScript jQuery
by Jose Argudo Blanco.
Read the review
Joomla! Social Networking with JomSocial Joomla! Social Networking with JomSocial
by Kwasi Boateng & Beatrice A. Boateng.

Joomla! 1.5 Multimedia Joomla! 1.5 Multimedia
by Allan Walker.

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 : 2nd Edition
by James Kennard.

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

Magento: Beginner's Guide
Magento: Beginner's Guide by William Rice
is a must for anyone trying the
open-source e-Commerce solution.

Read the review

GJC Web Design UK 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