Grimalkin Posted November 22, 2018 Share Posted November 22, 2018 Hello, Is anyone familiar with the Blackout skin? I want to change the category buttons and hover color. Right now the buttons are grey and the hover color is orange. I have looked through the blackout.css file, and have found a number of buttons ( actually there are a lot of them). I have experimented changing quite a few of them, but have not had any luck finding the right one. Some of them have hex numbers (which I am familiar with), and some have RGB colors, which I am not familiar with at all. Thank you for your time and consideration in this matter. Link to comment Share on other sites More sharing options...
bsmither Posted November 22, 2018 Share Posted November 22, 2018 Please give us a web address to your site. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 22, 2018 Author Share Posted November 22, 2018 Hello, Do you want the store or access to the css files? I have the store offline because I am still in the process of working on it. Link to comment Share on other sites More sharing options...
bsmither Posted November 22, 2018 Share Posted November 22, 2018 If the store is online (even if no one knows about it yet), we can look at the page resources (javascript, css, images) and be able to give personal advice on how to implement your changes. Otherwise, we would need to install Blackout - which may not be readily available. You can create a temporary admin with zero permissions. This will allow the logged in admin to view the storefront while it is "offline" to all others. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 22, 2018 Author Share Posted November 22, 2018 Not a problem, I have set the store to 'online' status for you. I just was not exactly sure what you were wanting. Here is the store URL: https://theravensroost.net/darkmoon/ Link to comment Share on other sites More sharing options...
bsmither Posted November 22, 2018 Share Posted November 22, 2018 Ok. We suggest that while you make customizations, you enable debugging (admin, Store Settings, Advanced tab, Debugging: Enabled, and enter your IP address into the adjacent field (www.whatismyip.com). This makes it easier to implement the changes because Debug mode stops CubeCart from making one large cached CSS file. (The caching is probably why you do not see changes immediately.) One large file makes it impossible to discuss the applicable CSS rules that are in the actual individual CSS files. We also suggest that changes to the CSS be made in the file cubecart.default.css. So, let's use that file to add the custom effects. The menu does have a background color, but it also has a gradient: ul#css3menu1 li:hover > a, ul#css3menu1 li a.pressed { background-color: #e7791c; background-image: -moz-linear-gradient(-90deg,rgba(237,154,83,1),rgba(231,121,28,0) 45px,rgba(231,121,28,0)); } The RGBA values are directly convertible to hex: 255 = ff. But, RGBA allows for the "Alpha" channel used for transparency. This skin may not have cubecart.default.css. So, we will need to improvise. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 22, 2018 Author Share Posted November 22, 2018 The only change that is left to make, is changing the grey color of the category buttons, and the orange color of the category buttons hover. Originally the bar at the top, and the buttons for search, add to basket, etc, were orange like the category hover. Those colors were changed in blackout.css . I want to deepen the grey of the category buttons, and change the color of the category hover. So I need to change the category grey buttons and the orange hover in cubecart.default.css? Link to comment Share on other sites More sharing options...
bsmither Posted November 23, 2018 Share Posted November 23, 2018 Again, we suggest that while you make customizations, you enable debugging (admin, Store Settings, Advanced tab, Debugging: Enabled, and enter your IP address into the adjacent field (www.whatismyip.com). This makes it easier to find and implement the changes because Debug mode stops CubeCart from making one large cached CSS file. One large file makes it impossible to discuss the applicable CSS rules that are in the actual individual CSS files. Link to comment Share on other sites More sharing options...
bsmither Posted November 23, 2018 Share Posted November 23, 2018 In the skin's /css/cubecart.default.css file, add: ul#css3menu1, ul#css3menu1 ul, ul#css3menu1 a { background-color: #4b4442; /* Non-hover color -- Change to suit */ } ul#css3menu1 li:hover > a, ul#css3menu1 li a.pressed { background-color: #e7791c; / * Hover color -- Change to suit */ background-image: -moz-linear-gradient(-90deg,rgba(237,154,83,1),rgba(231,121,28,0) 45px,rgba(231,121,28,0)); } Clear CubeCart's cache and force your browser to reload page resources. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 23, 2018 Author Share Posted November 23, 2018 okay, I will enable the debugging, and add the code. Thank you for your time, and assistance. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 23, 2018 Author Share Posted November 23, 2018 I enabled debugging, and added the code that you gave me to : skin's /css/cubecart.default.css file. I was able to change the button grey, but the hover is a color mix that includes the orange I wanted to get rid of. Also, the button for the sub-catagory is still orange. Is the color for the sub button located somewhere else? When I added the code to the css file, there is a red 'flag' beside the line number. When I mouse over this, there is the message: Expected RBRACE at line 23 col 28. I have included two screen shots in case they may be helpful. Thank you again. Link to comment Share on other sites More sharing options...
bsmither Posted November 23, 2018 Share Posted November 23, 2018 Sorry, I made a mistake above: ul#css3menu1, ul#css3menu1 ul, ul#css3menu1 a { background-color: #4b4442; /* Non-hover color -- Change to suit */ } ul#css3menu1 li:hover > a, ul#css3menu1 li a.pressed { background-color: #e7791c; /* Hover color -- Change to suit */ background-image: -moz-linear-gradient(-90deg,rgba(237,154,83,1),rgba(231,121,28,0) 45px,rgba(231,121,28,0)); } The corrected code is to remove the space between the slash and the asterisk before the word Hover. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 23, 2018 Author Share Posted November 23, 2018 Okay, not a problem. I will fix that. Any thoughts about the purple/orange mix hover or the orange sub-cat button? Thank you for your patience. Link to comment Share on other sites More sharing options...
bsmither Posted November 23, 2018 Share Posted November 23, 2018 Please allow me to see the store. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 23, 2018 Author Share Posted November 23, 2018 Certainly, allow me a coup of sec's to put it online. Link to comment Share on other sites More sharing options...
bsmither Posted November 23, 2018 Share Posted November 23, 2018 I see the background color as #501078. The background-image should have a similar color. The hex converts to the equivalent RGBA(80,16,120,1). The existing statement is: background-image: -moz-linear-gradient(-90deg,rgba(237,154,83,1),rgba(231,121,28,0) 45px,rgba(231,121,28,0)); To match what the orange gradient did, we can use these values. Make the statement look like: background-image: -moz-linear-gradient(-90deg,rgba(80,16,120,1),rgba(56,11,83,0) 45px,rgba(56,11,83,0)); Then, add this rule. Note the previous rule was for UL -> LI -> A. ul#css3menu1 ul a { background-color: #e7791c; /* Non-hover color submenu -- Change to suit */ background-image: -moz-linear-gradient(-90deg,rgba(233,135,51,1),rgba(231,121,28,0)); */ } ul#css3menu1 ul li:hover > a, ul#css3menu1 ul li > a.pressed { background-color: #c1560e; /* Hover color submenu -- Change to suit */ background-image: -moz-linear-gradient(-90deg,rgba(215,96,16,1),rgba(193,86,14,0)); } This rule is for UL -> UL -> LI -> A, a sub menu. The sub menu can have different colors, or the same. Note: there are more gradient statements than just the -moz syntax. I can't tell you where they are because the file that contains it, and all other CSS files, are not being fetched individually. That is, Debug mode is switched off. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 23, 2018 Author Share Posted November 23, 2018 I just checked debug mode because I was sure I enabled it. I am sorry, It was set to restrict mode to my IP. I believe that you should be able to do whatever it was/is that you were trying to do now. My mistake. Link to comment Share on other sites More sharing options...
bsmither Posted November 23, 2018 Share Posted November 23, 2018 You DO want it restricted to your IP. The problem, I would assume, is that the skin has not been updated to manage this debug mode. If so, make these edits to the skin: /templates/element.css.php: Find the line that STARTS with: {combine input=$css_input Whatever the rest of the line may be, replace the whole line with: {combine input=$css_input output='cache/css.{$SKIN_FOLDER}.css' age='604800' debug=$CONFIG.debug||!$CONFIG.cache} /templates/element.js_foot.php: Find the line that STARTS with: {combine input=$js_foot Whatever the rest of the line may be, replace the whole line with: {combine input=$js_foot output='cache/js_foot.{$SKIN_FOLDER}.js' age='604800' debug=$CONFIG.debug||!$CONFIG.cache} /templates/element.js_head.php: Find the line that STARTS with: {combine input=$js_head Whatever the rest of the line may be, replace the whole line with: {combine input=$js_head output='cache/js_head.{$SKIN_FOLDER}.js' age='604800' debug=$CONFIG.debug||!$CONFIG.cache} Have CubeCart clear its internal cache. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 23, 2018 Author Share Posted November 23, 2018 ok, I will go make these changes right now, and come back to the color thing. Ok, I have made the three template changes. I also reset the restrict to IP. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 23, 2018 Author Share Posted November 23, 2018 Did you just say something to me? I was working in the css file and thought I saw a notification, but I don't see anything. Link to comment Share on other sites More sharing options...
bsmither Posted November 23, 2018 Share Posted November 23, 2018 No. Just waiting for you to make the edits and report on the effort. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 23, 2018 Author Share Posted November 23, 2018 oh, okay lol. Did you want me to add the new rule or replace the old rule with the new? Link to comment Share on other sites More sharing options...
bsmither Posted November 23, 2018 Share Posted November 23, 2018 Add it. It's a rule specific to the sub menu. Link to comment Share on other sites More sharing options...
Grimalkin Posted November 23, 2018 Author Share Posted November 23, 2018 okay, that is what I did. There is no change. There is still orange and purple. Would you like a screen shot of the file? Link to comment Share on other sites More sharing options...
bsmither Posted November 23, 2018 Share Posted November 23, 2018 There is a rule missing in cubecart.default.css -- the rule for Non-hover color sub menu. And you need to change the RGBA color values of the Hover sub menu colors to be close to what you are using for the top menu. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.