The larger your website gets, the more important it is to make use of Joomla!'s breadcrumb feature.
To start redefining your breadcrumb's style, open the template.css
file for your template; use the rhuk_milkyway template for this demonstration. This means that your CSS file will be located in the templates\rhuk_milkyway\css
directory of your Joomla! installation. If you visit a page other than the home page in your Joomla! website, you'll be able to see the breadcrumb.
As you can see, the rhuk_milkyway template defines the style for the breadcrumb in the template.css
file.
span.pathway { display: block; margin: 0 20px; height: 16px; line-height: 16px; overflow: hidden; }
The HTML that defines the breadcrumb for the Features page is as shown:
<div id="pathway"> <span class="breadcrumbs pathway"> <a href="http://example.com/" class="pathway">Home</a> <img src=" /templates/rhuk_milkyway/images/arrow.png" alt="" /> Features...