Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Change color of Breadcrumb bar


doon1947

Recommended Posts

Posted

Hi,

OSC 2.3.1

How do I change the color of the Breadcrumb Bar and the Ttitle bar colors on the various info boxes.

Al

Posted

Assuming you are using a standard install of 2.3 your infobox headers are images which can be found in your ext/jquery/ui/Redmond/images folder. You can either upload a whole new scheme or just alter the images to something that you like. A search on something like Google images will fid many similar images.

 

The breadcrumb bar is also an image in the same folder.

REMEMBER BACKUP, BACKUP AND BACKUP

Posted

Thanks Steve.

Have made the color change as per your helpful info, see:

http://www.lcn-test.com/

How do I remove the blue broder from the breadcrum bar

How do I change the blue border on the info boxes to black or white

Dorset - spent a couple of days on a fruit farm in Stoke Abbot many moons ago

Posted

Heres what I do when I want to change something and cant find where it is. There are other ways. I open the webpage in a browser, and then view source. A new page opens and I look through the code until I find the area that I want. It will be defined by something that can be found in the stylesheets. So you are looking for something like class=

 

You then have to search for the class in the stylesheets, remembering that oscommerce uses a main stylesheet in the root folder, and another in the same file as where the jquery image file was.

 

The blue border on your site is in the following bit of code

 

<div class="ui-widget-header infoBoxHeading">  <a href="http://lcn-test.com" class="headerNavigation">Top</a> » <a href="http://lcn-test.com/index.php?osCsid=4dd1932a8fc59cdb4a3e34fef22e95ba" class="headerNavigation">Catalog</a></div>

</div>

 

So you need to search the stylesheets for ui-widget-header infoBoxHeading and headerNavigation. In this case its the first one, which is found in the jquery stylesheet. Look for border: 1px solid #4297d7; The six digit number is the html colour code and the 1px is the width of the border. Just change the 1px to 0px and it should go. You will have to check other areas of the site and removing the border may impact other areas of your store. I may be easier to change it to the same orange as you use for the image.

 

REMEMBER BACKUP, BACKUP AND BACKUP

Posted

Thanks.

I understand what you are saying, it's just I am completely new to the 960 grid system, trying to migrate from MS 2.2

Posted

I would not suggest to change anything in the ui stylesheets, any changes will affect other areas too

 

Either create a new theme online, as suggested, or create new rules in an other stylesheet, like stylesheet.css, to overwrite the ui settings

 

Some styling tips about the breadcrumb: http://multimixer.gr/13/02/2012/styling-the-breadcrumb-in-oscommerce/

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...