Styling the breadcrumb area in osCommerce

The so called “breadcrumb trail” is the part on top of your osCommerce store showing the path to the actual location of the store the visitor is in. Reading the many questions in the osCommerce forum about how to style this area I think it’s worth to give a quick overview about how to do this.

Nothing of all this is necessary, things are really simple.

This is how the area looks like by default

This is generated in file catalog/includes/header.php, the code looks like this

<div class="grid_24 ui-widget infoBoxContainer">
  <div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>
</div>

There is nothing to do at this file, you can close it right away, just please notice the css classes used to wrap the beadrcrumb. They are “grid_24 ui-widget infoBoxContainer” in the outer level and “ui-widget-header infoBoxHeading” in the inner level. You can close the file now, we are not going to modify it in any way.

Lets start doing something

1 Change the ui-widget theme

First thing we can do for the look of our breadcrumb is to change the ui theme of the store. Well yes, this will change the overall look, but it’s also a good idea to get the general look as close as possible to what you like, before starting with the details.

This is how it would look like using ui theme “lightness”

Why did the look change? Because the whole section is wrapped into the ui classes “ui-widget” and “ui-widget-header” as we just saw above

2. Individual styling

All actions will be done in one and olny file: catalog/stylesheet.css I would suggest to add any code posted below to the bottom of this file

First lets see how to target this section in our css file, in other words, how to make our css file to know that we mean this and only this section of our store. If we are not specific enough, any rules added will affect other areas too (like the styling of the information boxes) and that’s something we don’t want to do right now

The selector we are going to use as a “prefix” for all other css classes is #header+div .

What does this mean? In plain text this say to the css file that we mean the div that comes after the element that has an id of “header”. There is only one in the whole store, the breadcrumb, there is no other.

After we know this, we can easily start adding some rules

/* START breadcrumb styling */
#header+div .ui-widget-header{
background:none;background:#f00; /* the background color */
border:5px solid #00ff00; /* the border around */
color:#000; /* the text color */
font-weight:400; /* use a normal font weight */
}

#header+div .ui-widget-header a{
color:#000; /* the text color of the links*/
}

#header+div .infoBoxHeading{
font-size:14px; /* the font size */
padding:10px 2px; /* padding top/bottom and left/right*/
}

#header+div .infoBoxHeading{
font-family:Verdana, Arial, Helvetica, sans-serif; /* the fonts to be used */
}
/* END breadcrumb styling */

Lets take a look now how it looks after this styling actions

Very sexy, yes? I won’t be offended if you use some other colors, I promise :)

Important to keep in mind is (1) that only the breadcrumb area got affected by our actions and (2) that we didn’t had to modify any file, just to add a couple of lines to our css

Enjoy

multimixer

• James 14/02/2012 at 04:47

  Ok, looks great, and helped me out a lot, now if I want to combine 2 of your lessons, I need to go into headers.php to modify that code so that I can round the corners on the breadcrumb trail, correct?
• James 14/02/2012 at 05:09

  Ahhh got it, all I had to do was add to this styling with border-radius:10px; and it gave me the effect I was looking for.. so the complete line is.

  border:1px solid #000;border-radius:10px;/* the border around */

  (for my site)
• dpuk44 15/02/2012 at 16:26

  This is just fantastic and can apply this to all div’s with stylesheet. Simple with a great explanation.
• Dale 29/02/2012 at 00:17

  Brilliant thank you for the tips. So clearly explained.
  I followed the lesson on breadcrumbs and would like to style all of the boxes the sam please help.

  Thanks so much…..
• multimixer 29/02/2012 at 18:56

  Hi Dale

  I will try to write a separate post about this in the coming days, since there is much to say about
• Daniel 24/08/2012 at 23:50

  Hello,

  I’m trying to do the same in the footer.
  Can comeone help-me?
  What I have to put instead of #header+div?

  Thanks in advance…

  • multimixer 25/08/2012 at 08:37

    Hi @Daniel, I’ll consider a post about how to create a nice footer

    • marc 24/10/2012 at 02:14

      Hello George

      Do you have also a possibility to do this with the columne right and left side? by the way it is fantastic what you gaeve here to use for everybody.

      best regards

      Marc
• multimixer 24/10/2012 at 09:19

  Hi Marc

  Yes, it’s of course possible to style the columns and boxes in a same/similar way too

  The basic look comes from the UI theme in use, from here on, there are various customizations possible, I hope I’ll find the time to post about
• marc 24/10/2012 at 15:15

  Thank you for fast responding and awaiting for maybe some news about that

  Best regards

  Marc

  PS: Great work from you :)
• bunhin 12/05/2013 at 08:47

  Thank you for the Tutorial. Its helpful for me as newbie.

  Could you please also give some details on how to move the navigation trail below than current position?. when I make top navigation menu or link this trail overlapping the link name that sit in the same line..

  • multimixer 13/05/2013 at 09:26

    Right now you have both, the breadcrumb and the top navigation in the same container, there is simply no space for them.

    I would suggest you create one more grid_24 container and put the navigation into there. You can copy the breadcrumb block in file includes/header.php (that is the code posted above) and paste it either before or after, depending on the location you want to have it.

    Would be something like this

    < div class="grid_24 ui-widget infoBoxContainer">
    < div class="ui-widget-header infoBoxHeading">the breadcrumb< /div>
    < /div>

    < div class="grid_24 ui-widget infoBoxContainer">
    < div class="ui-widget-header infoBoxHeading">the navigation< /div>
    < /div>
• bunhin 17/05/2013 at 06:31

  Thank you George for quick response and tips. Your tips actually solve the overlap issue. It is creates space but really too much because it creates space as height as the original header, and creates gap with the breadcrumb I tried to remove the outer div, the result is change but still not happy with.

  Anyway what i try to do is moving the position of the breadcrumb trail to be lower from it standard position just upper to main tittle of body content and the trail start just after the left box.

  Now i still have no idea how to make that positioning with css and the grid system.

  • multimixer 18/05/2013 at 07:32

    Hello,

    By adding a new grid_24 block, like I’m my previews reply, you are creating a full width “container”, that you can fill with anything, eg the breadcrumbs or the main navigation

    I’m not sure about what you did, but it looks like you duplicated the complete header? Grid_24 – and the other classes used – is not adding any height, unless you added any custom rules to the css

    I’m sorry, I can’t be more specific because I don’t know how your files look like
• bunhin 20/05/2013 at 02:40

  Ooops yes you are right, it is the css rule that adding the space. thank you George.
• Ray 05/06/2014 at 18:33

  Hi, In the navigation bar, where you have “Top » Catalog”, on the same line and on the right hand side I would like to have links, such as, Log In, Create Account, Log Out which when clicked will take them to the appropriate pages. I have created the links:

  <?php echo '‘ . HEADER_NAV_LOGIN . ‘‘; ?>
  <?php echo '‘ . HEADER_NAV_CREATE_ACCOUNT . ‘‘; ?>
  <?php echo '‘ . HEADER_NAV_LOGOFF . ‘‘; ?>

  and in the style sheet I have:
  ul
  { margin: 0;
  padding: 0;
  }
  ul li
  { font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  color: #f9f9f9;
  list-style-type: none;
  display: inline;
  text-align: center;
  line-height: 1.8em;
  padding-left: 2%;
  margin: 0;
  }

  I just can’t work out inside which div in header.php this list should be included and how to float it to the right. I have experimented but not getting the desired result.
  Any suggestions please?

  • multimixer 07/06/2014 at 16:07

    Hi Ray

    Please check the reply you got on the osCommerce forum: http://forums.oscommerce.com/topic/397126-placing-links-in-navigation-bar-on-same-line-as-breadcrumb-trail/