Apologies if I am being a bit pesky on this, but could someone give me some steps in how to make breadcrumbs like you all have in these forums? Thanks.
Support Forum
start here: https://simple-press.com/support-forum/sp5-theme-topics/breadcrumbs-nested-or-on-a-single-line/page-3/
some basic instructions… its not as simple as a setting though… you need to create the css and images to use…
if you just want them flat instead of tree, that is easy… but the arrows and graphics are more involved…
Thanks. I’ll give it a try. I’ve been doing some simple css and creating simple images. Maybe it’s time for me to advance to the next level!
if it helps, here is the css we use on the site…
#spMainContainer #spBreadCrumbs {
font-size: 0.85em;
min-width: 75%;
line-height: 1.2em;
margin-left: 2px;
}
#spMainContainer #spBreadCrumbs span.spBreadCrumbs {
margin-left:17px;
min-height:2px;
}
#spMainContainer #spBreadCrumbs a {
color: #333333;
display: block;
float: left;
font-family: inherit;
font-weight: inherit;
font-size: 0.9em;
height: 34px;
line-height: 34px;
margin-right: -8px;
padding: 0 18px 0 15px;
position: relative;
text-decoration: none;
text-transform: Capitalize;
}
#spMainContainer #spBreadCrumbs a:first-child {
padding-left:11px;
}
#spMainContainer #BreadcrumbPosition2 {
background: url(“images/breadCrumbArr2.png”) no-repeat scroll right 2px transparent;
}
#spMainContainer #BreadcrumbPosition2:hover {
background: url(“images/breadCrumbArr2.png”) no-repeat scroll right 2px transparent;
}
#spMainContainer #BreadcrumbPosition3 {
background: url(“images/breadCrumbArrCombined.png”) no-repeat scroll right 1px transparent;
}
#spMainContainer #BreadcrumbPosition3:hover {
background: url(“images/breadCrumbArrCombined.png”) no-repeat scroll right -38px transparent;
color:#4682B4;
}
#spMainContainer #BreadcrumbPosition4 {
background: url(“images/breadCrumbArrCombined.png”) no-repeat scroll right 1px transparent;
}
#spMainContainer #BreadcrumbPosition4:hover {
background: url(“images/breadCrumbArrCombined.png”) no-repeat scroll right -38px transparent;
color:#4682B4;
}
#spMainContainer #BreadcrumbPosition5 {
background: url(“images/breadCrumbArrCombined.png”) no-repeat scroll right 1px transparent;
}
#spMainContainer #BreadcrumbPosition5:hover {
background: url(“images/breadCrumbArrCombined.png”) no-repeat scroll right -38px transparent;
color:#4682B4;
}
but we also do some filtering to make things better… so in our spFunctions.php, we also do this:
/* Functions for Breadcrumb Z-Index Sorting */
add_filter(‘sph_BreadCrumbs’, ‘spBlueSortBreadcrumbs’,15,5);
function spBlueSortBreadcrumbs($breadCrumbs, $a=”, $crumbEnd=”, $crumbSpace=”, $treeCount=”) {
global $no;
$no = substr_count($breadCrumbs, ‘spLink’) + 2;
$breadCrumbs = preg_replace_callback(
‘|href=|’,
create_function(
‘$matches’,
‘global $no; $no–; return ‘ID=”BreadcrumbPosition’.$no.'” style=”z-index:’.$no.'” ‘.$matches[0];’
),
$breadCrumbs);
return $breadCrumbs;
}