Jump to content

Recommended Posts

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 {

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 

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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.

Edited by bsmither

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...