dianepep Posted November 11, 2019 Share Posted November 11, 2019 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! Link to comment Share on other sites More sharing options...
bsmither Posted November 11, 2019 Share Posted November 11, 2019 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? Link to comment Share on other sites More sharing options...
dianepep Posted November 12, 2019 Author Share Posted November 12, 2019 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. Link to comment Share on other sites More sharing options...
bsmither Posted November 12, 2019 Share Posted November 12, 2019 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. Link to comment Share on other sites More sharing options...
dianepep Posted November 13, 2019 Author Share Posted November 13, 2019 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! Link to comment Share on other sites More sharing options...
bsmither Posted November 13, 2019 Share Posted November 13, 2019 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. Link to comment Share on other sites More sharing options...
dianepep Posted November 14, 2019 Author Share Posted November 14, 2019 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.