Support Forum

breadcrumbs

CB Charlie Badenhop
Charlie Badenhop
Member

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.

5 Answers

New Answer

MP Mr Papa
Mr Papa
Member

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…

CB Charlie Badenhop
Charlie Badenhop
Member

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!

MP Mr Papa
Mr Papa
Member

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;
}

CB Charlie Badenhop
Charlie Badenhop
Member

Wow, okay, I have my work cut out for me. Will give it a try.