Customising the Beez template/header/breadcrumbs

From Joomla! Documentation

Jump to: navigation, search

Contents

HTML Reference

<!-- index.php line 72-77 -->
<div id="breadcrumbs">
    <p>
        <?php echo JText::_('You are here'); ?>
        <jdoc:include type="modules" name="breadcrumb" />
    </p>
</div>

Replace You are here

JText::_('You are here');

Search the language file en-GB.tpl_beez.ini for "YOU ARE HERE=You are here:" and edit it:

/* #### en.GB.tpl_beez.ini line 25 #### */
 
YOU ARE HERE=Your text here!

CSS Reference

#breadcrumbs

The following classes and ids will influence the whole breadcrumbs "box". Please notice the ordering. Every CSS attribute will be overwritten by the class above.

Main Class

/* #### layout.css line 324-330 #### */
 
#breadcrumbs {
    background:#93246F;
    min-height:5em;
    padding-top:0;
    text-align:left;
    color:#fff;
}
Storage location: layout.css

Secondary Classes

/* ##### position.css line 15-19 #### */
 
*
{
    margin: 0;
    padding: 0;
}
Further information: position.css/*
Storage location: position.css


#breadcrumbs p

The following classes and ids will influence the breadcrumbs "paragraph". Please notice the ordering. Every CSS attribute will be overwritten by the class above.

Main Class

/* #### layout.css line 332-335 #### */
 
#breadcrumbs p {
    padding:5px;
    display:inline;
}
Storage location: layout.css

Secondary Classes

/* ##### layout.css line 65-68 #### */
 
p {
    line-height:1.4em;
    margin:5px 0;
}
Further information: layout.css/p
Storage location: layout.css
/* ##### position.css line 15-19 #### */
 
*
{
    margin: 0;
    padding: 0;
}
Further information: position.css/*
Storage location: position.css


#breadcrumbs span

The following classes and ids will influence the breadcrumbs itself. Please notice the ordering. Every CSS attribute will be overwritten by the class above.

Main Class

/* #### layout.css line 350-355 #### */
 
#breadcrumbs span {
    color:#fff;
    font-size:0.9em;
    padding:7px;
}
Storage location: layout.css

Secondary Classes

/* ##### position.css line 15-19 #### */
 
*
{
    margin: 0;
    padding: 0;
}
Further information: position.css/*
Storage location: position.css


#breadcrumbs a

The following classes and ids will influence the breadcrumbs link. Please notice the ordering. Every CSS attribute will be overwritten by the class above.

Main Class

/* #### layout.css line 345-348 #### */
 
#breadcrumbs a:link,#breadcrumbs a:visited {
    background:#93246F;
    color:#fff;
}
Storage location: layout.css
/* #### layout.css line 356-360 #### */
 
#breadcrumbs span a:hover,#breadcrumbs span a:active,#breadcrumbs span a:focus {
    background:#000;
    color:#fff;
    text-decoration:none;
}
Storage location: layout.css

Secondary Classes

/* #### layout.css line 341-343 #### */
 
#breadcrumbs a {
    text-transform:none;
}
Storage location: layout.css
/* ##### layout.css line 14-16 #### */
 
a:link,a:visited
{
    color:#000;
}
Further information: layout.css/a:link,a:visited
Storage location: layout.css
/* ##### layout.css line 19-23 #### */
 
a:hover,a:active,a:focus
{
    background:#000;
    color:#FFF;
}
Further information: layout.css/a:hover,a:active,a:focus
Storage location: layout.css
/* ##### position.css line 15-19 #### */
 
*
{
    margin: 0;
    padding: 0;
}
Further information: position.css/*
Storage location: position.css
Retrieved from "http://docs.joomla.org/Customising_the_Beez_template/header/breadcrumbs"
Personal tools