Foundation Custimisation

[bondimedical]

How do I make basic style changes to the Foundation skin. For example the color of top-bar is #333. How do I change this to another color?

[bsmither]

The starting point of foundation is in the foundation.min.css file. However, that file is nearly impossible to customize.

 

You can create substyles of Foundation by creating your own CSS file, cubecart.purplehaze.css, for example, or editing the existing cubecart.default.css file. These substyle CSS files overrule the foundation.min.css rules.

[Dirty Butter]

Finding the right code to change in foundation.css and cubecart.css can be difficult. I'm FireFox using right click Inspect Element, and using the Firebug Addon to help find the items I want to change.

[Dirty Butter]

Even with that said, I have a few spots I can't figure out. For one, I found where to get rid of the black category bar - well almost. There's a piece of it left - Hover over a category and get the blue colors I wanted, but move the cursor down the column of subcategories and when not hovered the Category goes back to the black.

[Dirty Butter]

The Foundation skin code could really use enough Comments to be clear where to look!!

[Dirty Butter]

Also note - if you make any cosmetic changes to foundation.css - you need to take ".min." out of foundation.min.php near the top of main.php and main.checkout.php. Your changes won't show if you don't change the reference OR you could minify your css file.

[bondimedical]

The starting point of foundation is in the foundation.min.css file. However, that file is nearly impossible to customize.

 

You can create substyles of Foundation by creating your own CSS file, cubecart.purplehaze.css, for example, or editing the existing cubecart.default.css file. These substyle CSS files overrule the foundation.min.css rules.

I have spoken to someone in the Foundation forum and they said to use the code

.top-bar {
  background: #1a16ca;
}
.top-bar-section li:not(.has-form) a:not(.button) {
  background: #1a16ca;
}

If I choose to edit cubecart.default.css how do I avoid it from being overwritten when an upgrade is done?

[bsmither]

Keen observation.

 

Try creating a unique file, cubecart.purplehaze.css, and put the rules in there.

[bsmither]

I also want to try to actually create a folder named /purplehaze/ and...

 

Hmm. I need to get some feedback from CubeCart, Ltd.

 

If one updates CubeCart, and therefore the Foundation skin, and therefore the config.xml file, will any added "subthemes" having its own <style> node get overwritten?

 

The comments in the config.xml file suggest that this is the file to customize.

 

To be fair, CC5 skins also has this dilemma. So, nothing gained, nothing lost.

[bsmither]

So, I added a new <style> node for Purple Haze in config.xml, and it shows in the Store Settings, Layout tab, Default front-end skin selector.

 

And I added the style rules posted above to the file cubecart.purplehaze.css.

 

I would also likely want to create a folder /images/purplehaze/ (with a /logo/ folder) and put my custom image set in it. Then make the appropriate edit in config.xml.

 

The new css file and folder will not get overwritten, but the config.xml file will be.

[bsmither]

I think I got it:

.top-bar {
  background: #1a16ca;
}
.top-bar-section ul li {
  background: #1a16ca;
}
.top-bar-section ul li:hover:not(.has-form) > a {
  background: #1a16ca;
}
.top-bar-section .dropdown li a {
  background: #1a16ca;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
  background: #1a16ca;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:hover:not(.button) {
  background: #1a16ca;
}
.top-bar-section li:not(.has-form) a:not(.button) {
  background: #1a16ca;
}
.top-bar-section li:not(.has-form) a:hover:not(.button) {
  background: #1a16ca;
}

This gives the same color for hover, not hover, on each selector piece.

[bondimedical]

I used the Galaxy skin in CubeCart 5 so upgrades where not an issue. Would it be easier to simply make a copy of the Foundation skin, rename it and put it in the skin folder?

[Dirty Butter]

I made a copy of Foundation, renamed the folder, and changed the config info in it. I didn't need any separate images, so I left source alone. I'll try the cosmetic edits and get back.

[bondimedical]

I think I got it:

.top-bar {
  background: #1a16ca;
}
.top-bar-section ul li {
  background: #1a16ca;
}
.top-bar-section ul li:hover:not(.has-form) > a {
  background: #1a16ca;
}
.top-bar-section .dropdown li a {
  background: #1a16ca;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
  background: #1a16ca;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:hover:not(.button) {
  background: #1a16ca;
}
.top-bar-section li:not(.has-form) a:not(.button) {
  background: #1a16ca;
}
.top-bar-section li:not(.has-form) a:hover:not(.button) {
  background: #1a16ca;
}

This gives the same color for hover, not hover, on each selector piece.

 

I have just tested this on a copy of the Foundation skin editing cubecart.default.css and it all works fine except for one issue.

On the mobile version there is a drop down menu called "Shop by Category", this changes back to the black color when you click on it. How can I make it stay blue?

[bsmither]

Add these two rules to the existing rules in cubecart.purplehaze.css:

.top-bar-section .left {
  background-color: #1a16ca;
}
.top-bar.expanded .title-area {
  background-color: #1a16ca;
}

I have also changed all the instances of background to background-color, just make it clear that the color is the only thing that is overruling the other rules.

[bondimedical]

Add these two rules to the existing rules in cubecart.purplehaze.css:

.top-bar-section .left {
  background-color: #1a16ca;
}
.top-bar.expanded .title-area {
  background-color: #1a16ca;
}

I have also changed all the instances of background to background-color, just make it clear that the color is the only thing that is overruling the other rules.

I am working with cubecart.default.css but the changes did work. However, now the actual text "Shop by Category" changes from white to another color. How do I make it stay white?

[bsmither]

Try adding to the css file you are customizing:

.top-bar.expanded .toggle-topbar a {
    color: #ffffff;
}

[bondimedical]

Try adding to the css file you are customizing:

.top-bar.expanded .toggle-topbar a {
    color: #ffffff;
}

No. It didn't work.

[bsmither]

Please remind me of your web address, or attach a screenshot of the page and effect you are targeting. From what I understood, it was the drop-down top bar when the screen width is small enough to cause the only thing to show is "Shop by Category" as opposed to a horizontal list of the top-level categories.

 

I saw, as I was reducing the width of my browser window, certain pieces of Foundation disappeared and the top bar switch to a single item called "Shop by Category". When I make edits to the CSS file, I have to tell my browser to force reload the CSS file.

[bondimedical]

If you look at the normal Foundation theme when you press the "Shop by Category" link the font changes from white to a grey color but is still legible against the black background. However, with the customised Foundation theme, the grey text in not legible with the blue background. You can view my web address www.andropenis.info/shop/ on a mobile to see what I mean.

[bsmither]

What I see in the file cubecart.default.css, at the bottom is:

.top-bar.expanded .toggle-topbar a { Â Â Â  
 color: #ffffff;
}

This is a CSS rule with illegal characters in it. You might not even see them.

 

Please edit the css file and make sure there is nothing after the open brace.

[bondimedical]

 

What I see in the file cubecart.default.css, at the bottom is:

.top-bar.expanded .toggle-topbar a { Â Â Â  
 color: #ffffff;
}

This is a CSS rule with illegal characters in it. You might not even see them.

 

Please edit the css file and make sure there is nothing after the open brace.

 

I have removed the illegal characters but its still not working.

[bsmither]

I had to force my browser to fetch a fresh copy of the css file. It's working for me.

[bondimedical]

Great work. ☺ I cleared all the browsing data and it showed up.

[bondimedical]

Another issue has come up on the Desktop version. I have added some sub-categories making a drop down menu. Part of the drop down menu is black. If you go to my website http://www.andropenis.info/shop/and hover over "Products" you will see what I mean. How do I change this to #1a16ca and also how do I make the text "PRODUCTS" white?