.Panel in css

[JoJo]

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

[bsmither]

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;}

 

[JoJo]

Thanks  bsmither, greatly appreciated