Jump to content
dianepep

cubecart.default.css not being called?

Recommended Posts

Can anyone tell me where cubecart.default.css is called from? I know we are supposed to place our modifications in this file instead of foundation.css and I have done that, but the changes are not taking place and I cannot see where it is even being called from. I am trying to modify the look of my search box and get rid of the box and just have a line. When I inspect my website it shows that the search box is getting it's style from foundation.css but it should be getting it from cubecart.default.css. Any help anyone can give me is appreciated!  

Share this post


Link to post
Share on other sites

In Foundation's template (as of the few most recent versions) element.css.php, find:

{if !empty($SKIN_SUBSET)}
    {$css_input[] = 'skins/{$SKIN_FOLDER}/css/cubecart.{$SKIN_SUBSET}.css'}
{/if}

The template variable {$SKIN_SUBSET} will have the value "default". This gets added to an array of other CSS filenames which are then sent to a "combine" function:

{combine input=$css_input output='cache/css.{$SKIN_FOLDER}.css' age='604800' debug=$CONFIG.debug||!$CONFIG.cache}

Make sure the above statement is exactly as shown in your copy of this template file. If the debug parameter is not as shown, then there will be issues with developing the skin of your site.

The combine function makes one big file out of all the individual files of the array. The combined file will be in the /cache/ folder and has as part of its name css.foundation.css. (Note, it may have a name similar to this because this file goes through a minifying function.)

If CubeCart has either its internal debugging function enabled, or its internal caching function disabled, then this combining action is bypassed and the resulting page HTML will have the links to all the various CSS files listed separately. It is when the browser makes separate requests for the various page resources that makes modifying CSS files much easier.

The page inspector is saying that foundation.css is getting loaded, but none of the others in the list?

 

Share this post


Link to post
Share on other sites
22 hours ago, bsmither said:

In Foundation's template (as of the few most recent versions) element.css.php, find:

{if !empty($SKIN_SUBSET)}
    {$css_input[] = 'skins/{$SKIN_FOLDER}/css/cubecart.{$SKIN_SUBSET}.css'}
{/if}

The template variable {$SKIN_SUBSET} will have the value "default". This gets added to an array of other CSS filenames which are then sent to a "combine" function:

{combine input=$css_input output='cache/css.{$SKIN_FOLDER}.css' age='604800' debug=$CONFIG.debug||!$CONFIG.cache}

Make sure the above statement is exactly as shown in your copy of this template file. If the debug parameter is not as shown, then there will be issues with developing the skin of your site.

The combine function makes one big file out of all the individual files of the array. The combined file will be in the /cache/ folder and has as part of its name css.foundation.css. (Note, it may have a name similar to this because this file goes through a minifying function.)

If CubeCart has either its internal debugging function enabled, or its internal caching function disabled, then this combining action is bypassed and the resulting page HTML will have the links to all the various CSS files listed separately. It is when the browser makes separate requests for the various page resources that makes modifying CSS files much easier.

The page inspector is saying that foundation.css is getting loaded, but none of the others in the list?

 

I checked the element.css file and it seems to have both statements worded correctly.

I've made sure my debugging is disabled and my caching enabled.

When I inspected on my search bar, the page inspector was only showing my foundation.css and made no mention of cubecart.default.css. But now it is showing the file you mentioned 94bb0.css.foundation_AprilsDen... I was able to find 94bb0foundation_AprilsDen...css and I looked inside the file. It does look like my code from cubecart.default.css is included at the end of the file. I looked through the code in inspector and it looks like it applied the styles from 94bbo.css.foundation_AprilsDen... up to the foundation.css file that was in there but that's where it stopped. The code from cubecart.default.css that is in 94bb0.foundation_AprilsDen.css... was not applied. I'm not sure why. Maybe my code is bad and that's why it didn't apply. I'm new to css and could have messed something up. This is my code that is inside cubecart.default.css:

input[type="search"], textarea {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #FFFFFF;
border: none;
border-bottom: 1px solid red;
}
Does that look okay?

 

Thanks again for your help. I would have never figured out the combined file or known to inspect the code.

 

Share this post


Link to post
Share on other sites

There is no such thing as a form input element of type "search".

You may want to try:
.search_form input[type="text"]

This selects the <input> inside something having the class=search_form.

Share this post


Link to post
Share on other sites

That worked! I saw in foundation they have a line:   input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
  -webkit-appearance: none;...    So I just copied that, but now with your help and reading up on 'input' I understand it a bit better. I've managed to rearrange a few things on the site and change the looks of it and are happy. If you want to take a look at it you can find it here Aprils Choice

Now I just have little things to modify. 

Thanks for your help!

Edited by dianepep
corrected link

Share this post


Link to post
Share on other sites

Hmm... type="search" is a new HTML5 input type -- I haven't worked with them much.

But, the Foundation skin template for the search box currently doesn't use them.

Share this post


Link to post
Share on other sites
19 hours ago, bsmither said:

Hmm... type="search" is a new HTML5 input type -- I haven't worked with them much.

But, the Foundation skin template for the search box currently doesn't use them.

Thanks again for your help. I'm starting to understand the skin better now and am understanding how to use inspect to help with modifications. I'm glad you're here to help because I don't know how I would have understood how to do anything without your help. I would have junked this and bought a package with documentation. 

Share this post


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.

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.


×
×
  • Create New...