Jump to content

Recommended Posts

I've changed my background for the site and I would like certain boxes of my site to have white backgrounds like for example the customer review box.  I find that I can change the colour in the  .panel lines in foundation.css but by changing it,  it also change every panels on the site white.

I used the google inspect and that's how I found where I needed to go in the foundation.css to change it but once I did, well everything related to .panel also got changed to white.

I am not sure how I would write a different css for a specific area.  can anyone help?


thank you

I am using the latest CC

Link to post
Share on other sites

We recommend not changing foundation.css. There are multiple sections that look similar but are within 'media-queries'. That might cause some confusion as changing a rule in a media-query might not show because the browser is displaying another media-query. But, the browser's Developer's Tools do get it right, but only for the current media-query.

So, instead add new rules to cubecart.default.css. This file gets loaded after foundation.css and as such, take priority.

We have a <div class="panel">. But we do not want all panels. There are two solutions:

<div class="panel whitebg">
This gives another style class (hopefully not used) we can combine to make a custom rule. Combine the two classes into one word.
.panel.whitebg {background-color: white;}

<form id="review_form"><div class="panel">
Find a parent that has an ID attribute. ID names are supposed to be unique -- no two tags would have the same ID. Then pair the ID to the class.
#review_form .panel {background-color:white;}


  • Thanks 1
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...