Jump to content

Blackout Skin


Grimalkin

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.

Link to comment
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.

Link to comment
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.

Link to comment
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?

Link to comment
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.

 

Link to comment
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.

Link to comment
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.

 

Link to comment
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.

Link to comment
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.

Link to comment
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.

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...