Jump to content

Add background color to foundation Content


Recommended Posts

I have already added a body color to the background however I would like the content section to have a white background if possible.   Any ideas? 

I tried adding a class ":content" to CSS while adding <span class="content">{$PAGE_CONTENT}</span> to main.php under templates but it didn't work.  Also tried applying the class to content.document.php and it too didn't work.  

Any ideas? 

Link to comment
Share on other sites

If I understand what you want correctly, you need to look at the /* Panels */ section of foundation.css. Please remember that any edits you make to foundation.css will be lost on upgrade. You should either put your edits in cubecart.css, or if edits are extensive, you might want to rename foundation, change the config file accordingly, and then your edits will not be lost on upgrade. That's what I did.

Link to comment
Share on other sites

"I tried adding a class ":content" to CSS while adding <span class="content">{$PAGE_CONTENT}</span> to main.php."

I see a colon in front of the selector. I suggest a period:

/* Class selectors have a period prefix */
.content { background-color: #ABC; /* or whatever */ }

 

Link to comment
Share on other sites

Oops, there isn't a colon in the coding.  I mistakenly input that in the post.  

Here is what I have and it isn't working. 

main.php

  <div class="small-12 large-9 columns small-collapse">
                  {include file='templates/box.errors.php'}
                  {include file='templates/box.progress.php'}
               <span class="content">{$PAGE_CONTENT}</span></div>

 cubecart-default.css

.content {
    background-color: #FFF;
}

Link to comment
Share on other sites

I am looking at some margins too. On a PC the foundation home page looks OK, but on a mobile there is no margin. The justified text is from left to right, with no padding.

Most of the other main text on other pages is like this too. 

 

Any suggestions how to change in default cubecart.default.css please?

I found the following using chrome developer tools

<div class="small-12 columns"> text here
</div> 

and div.small-12.column

<div id="content_homepage">
   text here

</div> regards Duncan

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.

Guest
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.

 Share

×
×
  • Create New...