Jump to content

Change background color of Foundation

Recommended Posts

We recommend that you use your browser's Developer Tools to find the CSS rules that are applied to the thing you want to change.

Then, there is a file named cubecart.default.css where you can add other rules that apply to the same things.

Because cubecart.default.css comes after foundation.css, your new rules will overrule those from foundation.

For example, (using Firefox) when viewing the main frontpage, right-click on the plain text that that is just above "Latest Products". Choose Inspect Element.

The Developer Tools will open and the CSS Rules list will show the rules that apply to all <p> tags. Note however, nothing is mentioned about text color.

For text color, we scan down the list to find what rule the <p> is getting the color from. We see it is a rule applied to the <body> tag.

Therefore, in cubecart.default.css, you can add your own rule:

body {color: #000000; }

Inspecting Element for the background reveals there is no background-color specified. You can create your own rule for that.

Link to comment
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...