Top Bar

[arie]

Hi there

I am new to Cube Cart and the forum

I have tried many a cart program and am pleasantly surprised by Cube Cart

It has been easy to install on a local computer and is not dragged down by to many bells and whistles

and more importantly it has the speed the others do not have

As i am of advancing years my speed in learning new things has somewhat reduced so just a couple of questions

In the Top-Bar i am able to change the color but it  only goes partially across eg  

 .top-bar {
  background-color:#ffff7f;
   
}

is there a way  changing it to make it go the whole way ?

Also is there a way to create a link on the top menu for customers to return to my websites home page in case the do not want to continue shopping ?

Many thanks in advance 

[Al Brookbanks]

I've done this many times for customers in our managed support plan and it's not as easy as it "should be".

I think you'll find there are many CSS classes that need changing. At least 10.

[bsmither]

In the Foundation skin /css/ folder, there is a file cubecart.default.css. You can add CSS rules here to make this 'theme' of the skin (the 'default' theme) look a specific way.

Add this rule:

nav, nav * {
    background-color: green !important;
}

This makes every part of the Navigation bar have a background of green.

Note that there is another nav that groups the Site Documents. So instead, one can get more specific:

#box-navigation, #box-navigation * {
    background-color: green !important;
}

If you are wanting some parts one color, and other parts a different color, then we start getting specific in the CSS selectors.

It helps tremendously to do the following:
1. Learn to use your browser's Developer Tool Set. It gives you the ability to experiment and make changes to the document as viewed in the browser
2. In CubeCart's admin, Store Settings, Advanced tab, enable debugging and enter your IP address in the adjacent field - www.whatismyip.com
3. After every change you make to the actual on-site files to match your experiments, you will need to:
3A. Have CubeCart clear its internal cache - at the bottom of the debug section of the page is a URL that will instruct CubeCart to do that
3B. Force your browser to reload the page resources - usually by CTRL-F5

An alternate approach is to create a 'theme' of this skin. There will be a new file cubecart.greennav.css with specific rules. Actually, there is more to creating a new 'theme', but you get the idea. Creating your own 'theme' to a skin will not be lost when upgrading CubeCart (which replaces all files in the package).

At the very left of the Nav bar (only when viewing on a browser window wider than approx. 940 pixels) is a "Home" icon. This is a link to Home.  Between 940 and 640 pixels, the Home icon is hidden in the "Shop by Category" drop-down. At 640 pixels wide and narrower, as on a mobile device, there is no Home icon - although a very simple edit will make it show.

However, the logo in the upper-left of the screen is also a link to Home - although not readily apparent.

[arie]

Thank you so much for your prompt responses

It works  I can see there is some learning to do  which I will enjoy

It is good to see an active forum thanks again