Our default osCommerce provides us a breadcrumb. Now what do you mean by breadcrumb? Let’s know a bit about breadcrumb. It is a navigation technique mostly used in user interfaces. It is also refereed as breadcrumb trail. Path like structure it shows and also the exact location of your current page you working on.

2014-06-16_14-41_Hardware, osCommerce

Here you see the default code for breadcrumb:

top navigation

For styling the breadcrumb area some steps you have to follow:

The related div having class “grid_24 ui-widget infoBoxContainer” and inner div containing class “ui-widget-header infoBoxHeading”. Using these classes you can modify your navigation with a new look and you can do certain changes with the help of css properties to look your breadcrumb good.

Next we will see some examples on the above topic.

How to style breadcrumb ?

There are two ways to style our breadcrumb.

  • To Change the ui-widget theme:

    In this case ui-widget theme refers to the jquery theme already available we can use them for our requirements.

    This will provide you nice look to your widget available in your store.

    The other thing we can do is we can change the whole theme to apply new look to our osCommerce store.
    By the use of ui-theme in jQuery you can add new theme to your widgets.

    Go for the below link: http://jqueryui.com/themeroller

    After applying ui theme “lightness” widgets in our store looks like this:

    2014-06-20_10-50_osCommerce

  • Individual Styling:

    We have to make changes on this file catalog/stylesheet.css.

    Add to your code at the end of the file.

    In our default store,already css classes are specified for each block through jQuery.

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

    The selector meant by, all the child div coming under parent div id “header” are to be selected and apply the respective properties.

    After we know this, we can easily start adding some rules of css.

    For reference see to the screenshot :Styling breadcrumb css.

    Styling breadcrumb css

    The store now looks like this:

    After new stling

    In this way you can add as many css properties as you want. And enjoy different styling effects on your store.