Jump to content

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Edited by bsmither

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

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