Breadcrumbs CSS location

1,161 Posts

Photowebmax Reply #1, 17 years, 6 months ago

Sometimes I find you have to really dig around looking for where the various CSS values are for the various building blocks in MODx.

For instance, say you want to modify the appearance of Breadcrumbs. If a user goes to the Breadcrumbs page here: http://modxcms.com/extras.html?view=package/view&package=54 one can learn about the evolution of Breadcrumbs code versions itself. Maybe this is useful? What users are looking for is how to use it, no?

Reading this sentence gives you some insight into what Breadcrumbs actually does:

Creates a highly configurable and styleable breadcrumb navigation trail

OK, but how do configure and style Breadcrumbs? Where are the style sheets? Which CSS values gets used?

Wouldn’t it be used to new (and experienced users) to have this sort of information right at the top of this page? To me this is one of the major sources of frustration with most CMS modules and snippets (not just MODx): if you are skimming through all of these things what you are really looking for is A) what does this widget/gizmo do? and B) how do you make it work?

Max

788 Posts

breezer Reply #2, 17 years, 6 months ago

In older versions of MODx, the default install template had styles for the breadcrumbs, which is where I think I got this one I use. The newer ones don’t use the trail so I assume thats why the styles aren’t found anywhere besides in the snippet comments. Also note that the "B_" prefix is the default in the snippet code and can be changed, passed as a param in the snippet call.

Drop the following in your template css and adjust to fit your theme

/* BREADCRUMBS
// Included classes
    // .B_crumbBox        Span that surrounds all crumb output
    // .B_hideCrumb       Span surrounding the "..." if there are more crumbs than will be shown
    // .B_currentCrumb    Span or A tag surrounding the current crumb
    // .B_firstCrumb      Span that always surrounds the first crumb, whether it is "home" or not
    // .B_lastCrumb       Span surrounding last crumb, whether it is the current page or not
    // .B_crumb           Class given to each A tag surrounding the intermediate crumbs (not home, or hide)
    // .B_homeCrumb       Class given to the home crumb
*/
a.B_currentCrumb, a.B_currentCrumb:visited {
   font: normal 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
   text-decoration: none;
   color : #fff;
   padding: 0px 12px 0px 5px;
}

a.B_currentCrumb:hover {
   text-decoration: none;
   background-color:#5A5A5A;
}
a.B_crumb, a.B_crumb:visited {
   font: normal 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
   text-decoration: none;
   color : #fff;
   padding: 0px 12px 0px 5px;
}

a.B_crumb:hover {
   text-decoration: none;
   background-color:#5A5A5A;
}
a.B_homeCrumb, a.B_homeCrumb:visited {
   font: normal 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
   text-decoration: none;
   color : #fff;
   padding: 0px 12px 0px 5px;
}

a.B_homeCrumb:hover {
   text-decoration: none;
   background-color:#5A5A5A;
}

xforum
http://frsbuilders.net (under construction) forum for evolution

1,161 Posts

Photowebmax Reply #3, 17 years, 6 months ago

Thanks!

I found these by adding the call and then using the FF Firebug utility to highlight the CSS values in place. I then added these to the template CSS file and edited them after they were deployed.

I still think a well worded paragraph or two that tells users what this "thing" does, how it does it and how you go about modifying it would be very useful...