when accessing a category page and a product page i'd like to change the breadcrumb css background attribute based upon the category that is being accessed. So I added some logic within breadcrumbs.phtml that will check for the category title and it will reflect these changes.

Although due to the need for caching, this is not continuously changed and persists, for example, when I visit a product page that doesn't have the same category (or any category whatsoever).

the background image persists on the search page, product page, etc.

<?php if ($crumbs && is_array($crumbs)): ?>
<?php $key = array_keys($crumbs);
$category = $crumbs[$key[1]['label']];
$first = '<div id="grid-breadcrumbs"';
$mid = 'style="background:url(\'http://website.local/skin/frontend/website/web/images/category_header_';
$last = '.jpg\') no-repeat scroll center top #edf0f1">';
if ($category = 'category1') {
    echo $first . $mid . 'cat1' . $last;
} elseif ($category = 'category2') {
    echo $first . $mid . 'cat2' . $last;
} elseif ($category = 'category3') {
    echo $first . $mid . 'cat3' . $last;
} elseif ($category = 'category4') {
    echo $first . $mid . 'cat4' . $last;
} else {
    echo $first . '>';

The above code essentially generated a dynamic background for grid-breadcrumbs based upon the name of the category.

Is it possible to change the css of a breadcrumb from the category page itself?

  • Could you add the changes you've made in breadcrumbs.phtml? Dec 17, 2014 at 16:23
  • @SanderMangel I added my code. Dec 17, 2014 at 16:28

2 Answers 2


Each element in the breadcrumbs has a certain class based on what it means.
For example the home breadcrumb has the class home.
For each category you have the class category{ID_HERE}.

I think you can solve this with css by setting styles on the corresponding classes.

  • So where would I define this in relation to grid-breadcrumbs? Dec 17, 2014 at 16:31
  • What do you mean by relation? Can you add an example to the question?
    – Marius
    Dec 17, 2014 at 17:37
  • I was able to achieve a sufficient answer. I had a terrible misconstruction of the logic in the above code. ('=') instead of ('==')... Dec 17, 2014 at 21:07
  • Please post your solution as an answer adn mark it as accepted.
    – Marius
    Dec 17, 2014 at 21:08
if ($crumbs && is_array($crumbs)):
$key = array_keys($crumbs);
$category = $crumbs[$key[1]]['label'];
$first = '<div id="grid-breadcrumbs"';
$mid = 'style="background:url(\'http://spooltuning.local/skin/frontend/cj-pony/spool/images/category_header_';
$last = '.jpg\') no-repeat scroll center top #edf0f1">';
if ($category == 'Focus ST') {
    echo $first . $mid . 'focus' . $last;
} elseif ($category == 'F-150 EcoBoost') {
    echo $first . $mid . 'F150' . $last;
} elseif ($category == 'Mustang EcoBoost') {
    echo $first . $mid . 'mustang' . $last;
} else {
    echo $first . $mid . 'fiesta' . $last;

It turns out that the caching issue was not the major hurdle that needed a good leaping. my logical booleans were actually assignment, oh what a misfortune! haha! The category assignment itself was misconfigured. You can imagine the redfacedness, i'm sure of it!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.